ERIC SHEFFERMAN <DOT> COM

Blog-o-Goodness

How To Include Amazon Text and Image (Enhanced Display) Affiliate Links In WordPress

Another WordPress thingy to drive me crazy! I try to put an amazon affiliate link in a post and it seems to work, but then as soon as I switch back the the Visual editor the link disappears!

As with many WordPress things:

  1. There’s probably a reason beyond my comprehension why this “bug” is actually a feature
  2. There’s all sorts of solutions posted by people with such high levels of technical expertise that I can’t understand how to implement their “obvious” solution
  3. The fix is actually simple (I think)

NOTE: Watch the video below to understand the danger of the word “simple” — then read the rest of the post for what I did to make it work.

FYI – I’m a huge fan of Jeri Ellsworth!

OK – all that’s necessary is to go into your WordPress theme’s functions.php file and add in this tiny bit of code:

// make TinyMCE allow iframes
add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]"; return $a;') );

Side thought: An annoyance with making this something you stick in the functions.php file instead of making it a plugin is that if you decide to change themes you have to remember to put this in the new themes function or you’re going to have screwed up your site’s functionality in a mysterious way that you might not discover for a long time even though things are screwed up. I wonder what the WordPress logic is for not having a separate place to put running code that isn’t tied to the theme? Ah, that would be the plugins directory. Except then instead of writing 2 lines of code you’d need to write the whole plugin framework for it. If I knew how to I would… So perhaps this solution will be updated in the future.

Unfortunately my theme is currently too narrow to make that easily readable. Grr.

I got this code from:

http://wordpress.stackexchange.com/posts/6003/revisions

Some other posts that almost helped:

http://richbui.com/web/iframes-in-wordpress-post-editor-using-shortcodes-and-custom-fields/

http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

This seemed like a good plugin except it was last updated forever ago and I wouldn’t expect it to work in WP 3.0 or higher

http://wordpress.org/extend/plugins/tinymce-valid-elements/

This almost was useful, but instead of coming up with the answer just came up with a way to insert maps

http://multimedia.journalism.berkeley.edu/tutorials/embedding-map-mashups/googlemaps-in-wordpress/

If this post had said to just put this code into functions.php, then I might have used this code first instead of keeping on looking. A big advantage of the code from this post is that it is shorter and thus easier to display on my blog:

http://old.nabble.com/Re%3A-iframe-question-p21722564.html

It looks like this code from the above post is good, but I already had the above code working in my functions file:

add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[*]"; return $a;') );

So – let’s see if I can put an amazon enhanced affiliate link here that uses an iFrame…

Yay!

Note: There is a lot of usefulness to be gained from being able to use an iFrame in a WordPress page – for instance this plugin allows you to embed youtube videos with an iFrame – which enables youtube to serve HTML5 video instead of flash video when it can. I’m all for using less flash — it constantly crashes on my computer.

http://wordpress.org/extend/plugins/iframe-embed-for-youtube/

Also, my guess would be that the code above could be easily modified to add any other markup that the TinyMCE editor might be stripping out.

Share

Category: Internet Marketing, WordPress

Tagged:

4 Responses

  1. Stephen Todd says:

    Thanks, same thing was happening to me – enter in html view OK, switch to visual – gone!

    I’m going to edit the file now – wish me luck!

    PS. a lot of my wordpress blog sites have missing insert image icon – very common judging by the number of people asking for help – no answers either

  2. Stephen Todd says:

    Well I tried 5 times and got 5 different errors

    I’ve restored the original file now, and will try it later with another of my blog sites that uses a simpler theme

    Strange that autoblog plugins that post Amazon content manage to insert iframes OK without messing with the wordpress files

  3. Eric says:

    I’m going to have to learn to write plugins because the more I look at this the more ugly it seems to me to put non-theme related code into functions.php.

    If you change themes or even if your them just does an upgrade, you lose whatever you added to the functions file. That seems wrong when you are using it to change the functionality independent of the theme.

    If I figure out how to do this (it seems simple — thus I earn MY dunce cap!) I will post an update.

    @Stephen Todd
    Re: the autoblog plugins — I’m not familiar with them, but the problem doesn’t seem to be with the iframe code being IN the WordPress post, the problem is that the visual editor strips out iframes when you use it to edit posts because… um, just because. (Probably for some sort of security thing that goes way beyond what I’m worried about when I’m the only person posting to this blog.)

  4. Martin says:

    Hi!

    I tried your solution after having lost my beautiful page if Amazon iframed links (15+ inserted from half an hour’s work) and tried it with just one iframe. Immediately I could switch back and forth between html and visual without losing the iframe etc.

    So – thank you very much for putting this code up there, it just worked for me and I can get on with adding links.

    Great work – thanks again.

    Martin

Leave a Reply

Resource

Keep Up With
Eric Shefferman

Via RSS
    

Via Email Updates
Name:
Email:

Categories

Archives

The following link is not for people: I do not like it, Sam I Am.