It was whilst writing a review of the book ‘boo hoo’ that I spotted a problem with embedding iframes in WordPress postings. As I was reviewing a book I wanted to add an Amazon Product link. These product links are in the form of iframes. An example of the HTML is below. I added the align="right" myself as I wanted the text to flow around the iframe.
<iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=advancedhtml- 21&o=2&p=8&l=as1&asins=0099418371&fc1=000000&IS2=1 <1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" align="right"></iframe>
You can see from the image that in WordPress (in the default theme anyway) there is no spacing between the left edge of the image and the text. This looks wrong so I wanted to find a solution to this.
It seems that there are no padding tags that you can add to an iframe unless you use style sheets. I wanted a simple solution that I could just embed in the HTML. The solution that I chose was to put the iframe in a table and set the cellspacing attribute of the table to the required amount padding. Instead of using align in the iframe I am now using it in the table. The HTML and result of this change are shown below.
<table border="0" cellspacing="10" align="right"><tr><td> <iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=rmlcouk- 21&o=2&p=8&l=as1&asins=0099418371&fc1=000000&IS2=1 <1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td></tr></table>
You’ll probably agree that the Amazon product links looks much better with the extra spacing.
I have been trying to insert Amazon links in my word press, but word press does not seem to accept iframes. What is the solution?
Hi,
Try disabling the WYSIWYG visual editor (Click on ‘Users’ choose your user account and then untick ‘Use the visual editor when writing’). Then add the iframe using the text editor and see if it works.
The WordPress WYSIWYG editor is known to cause many problem if you try to add any interesting HTML to your post.
I disabled the visual editor and added iframe code via html editor and still can’t get it to work. :( I am trying to add a chess game (PGN) viewer to my blog and I need iframe support
You rock! this was exactly what was bugging me and a perfect solution! I also wanted amazon affiliate links to look nice in WordPress. thanks!
Allison
You are brilliant, been struggling for hours to add a product, but never work, installed plugins but only worked for US amazon and not UK. But disabling the WYSIWYG worked straight away. Thank you!!
Thanks, I’ve also been looking for a solution and this works great.
Good idea!
Still requiring a bit of fidgeting around, but by far this is the easiest solution I have found. Thanks!
Thanks ever so much for this tip. I had been searching in a few places and eventually found your post. Looks great now with the table around the iframe. Cheers!
Ps I gave you the well deserved tweets …
That’s so great, I just did a search for ‘align amazon iframe left wordpress’ and your site came up first. exactly what I was looking for. Awesome!
Woo…hoo
Before I found you, I’ve tried many options including the 1st option you adviced here. It never work with WordPress.com
But your 2nd option with table does works. Thanks so much.
I also include your link in my post so that others who have same problem as mine can found you.
Thank you so much! This was driving me crazy.
Wow now why didn’t I think of that? Thanks a lot. The align attribute is deprecated though so I used style=”float:right” instead of align=”right”.
I just faced this problem, too. I fixed it by adding a padding setting inside amazon’s “style=” section in the iframe, so my style section now reads: style=”width:120px;height:240px;float:right;padding:0 0 0 15px;”
This floats it right and adds 15px padding to the left (where my text is). Obviously, you could add padding all around if you want. Seems easier than adding a table. Thanks to the poster above who suggested “float:right”. That’s what gave me the idea to add the padding to the style.
Thanks to fl_litig8r for the August 28, 2011 solution to my iframe problem. style=”width:120px;height:240px;float:right;padding:0 0 0 15px; This, with some minor modifications turned out to be the perfect solution to add padding for my Amazon.com banners!
So helpful and so easy – thanks much…I used it on my wife’s blog and she now likes me again:)
This solution is exactly what I was looking for but can you tell me how to make the spacing apply to the sides only and not the top?
I am trying to space 2 amazon ads side by side but with one aligned right and one left and spaced from the edges.
Your solution is working beautifully with a spacing of 75 but it is also adding this to the top and bottom and creating too much white space.
I have tried fiddling with the margins but it seems to have no effect. Thanks, Joe
Hi Joe, You can add the padding attribute to your style definition. e.g.
style="padding: 0px 10px 10px 0px;"The order of numbers is top, right, bottom, left.
THANK YOU for sharing this – Reading the comments, I decided to use the ‘float:right; padding 0 0 0 15 px’ for my right-aligned Amazon iframes and everything is now right in the world again :)
This post was exactly what I was looking for! I tried the table method first, but the second method of adding the float: right; and padding to Amazon’s iframe turned out to be much cleaner looking.
Wow! This is such an awesome post with excellent comments. Yes, float:right with padding seems to be a lot easier. I used it and it worked like a charm. Thanks to the author and all commenters.