Posts Tagged ‘Referrals’

Adding spacing round an iframe in WordPress

Wednesday, March 5th, 2008

It was whilst writing a previous post 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=rmlcouk-
21&o=2&p=8&l=as1&asins=0099418371&fc1=000000&IS2=1
&lt1=_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
&lt1=_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.

Related Posts

Tags: , , , , , , , ,
Posted in Website building | 7 Comments »

Playing with Amazon’s aStore

Sunday, August 5th, 2007

I’ve been playing with Amazon’s new aStore. Instead of adding each individual book link (that takes your viewer straight to Amazon’s main site), you can create an ‘aStore’ within your own site. You get to choose which books appear with a few simple clicks and you can customise the look of the page. Your website reader can browse your books and add them to the shopping basket all whilst remaining on your site.

There are three ways you can integrate the aStore into your site.

  1. Link to store direct on Amazon, simple to use but not very integrated – e.g. http://astore.amazon.co.uk/advancedhtml-21.
  2. You can embed the aStore in a frame – only useful if frames will fit in with your site.
  3. Embedded in any page using an iframe. e.g. http://www.advancedhtml.co.uk/htmlbooks.htm

I’ve gone for the 3rd option as this is the one that looks most integrated with my existing Advanced HTML site. There is one side effect. As you can see from the HTML code below the default height is set at 4000 pixels.

 <iframe src="http://astore.amazon.co.uk/advancedhtml-21"
 mce_src="http://astore.amazon.co.uk/advancedhtml-21"
 width="90%" height="4000"
 frameborder="0" scrolling="no"></iframe>

It causes your web page hosting the aStore to be very tall. There is a good reason for this; if you move to a specific product page, the product reviews are shown in the iframe. If you change the height to be less than 4000 then some of your product links may have truncated reviews.

I’ve decided to leave the height at 4000, and just make sure that any page which has the aStore doesn’t have any content after the iframe.

Related Posts

Tags: , , , ,
Posted in Website building | 1 Comment »