iFrame on eBay Listings

eBay pageSo, for anybody who has seen the flashy ebay listings with fancy picture sliders and stuff and wanted some of that for yourself (without paying a third party), here is one way…

Ebay allows you to add some basic formatting to your post using the WYSIWYG editor or by entering HTML code. However, it prevents you from using certain things like javascript and iframes. Also (though there are some die-hards who still swear by notepad and raw markup), creating a page that looks good in an html editor box is tedious to say the least.

What I wanted to do was incorporate a page from my website into the ebay listing page. The website I planned on using was a WordPress installation with a nice theme and some plugins which gave a nice lightbox effect to the gallery pictures. I tweaked the theme so that static content that I wanted on every page appeared in the sidebar widgets (guarantee, shipping notices, whatever) so that each page or post had the same overall format and I could just edit the content (pictures and text) for each one.

I initially tried the simple iframe tag

<i frame src="amarantha.pegasusweb.co.uk/swarovski-elements-crystal-iphone-4-4s/" width="100%" height="1500px" scrolling="no"></iframe>

in the ebay listing editor which seemed to work fine in the preview, but when I got to actually committing the page I got the infamous error message

eBay error message

Ebay does not like iframes 😦

A little research (actually a lot of googling) finally turned up this gem from The Last Drop of Ink website.

Ebay obviously scans the text you enter looking of prohibited words like “iframe”. The trick her is to use a tiny piece of javascript to insert the iframe tag dynamically into the page as it loads.

<script type="text/javascript">
<!--
var ax="ifr";var bx="ame src='htt";var cx="p://"
document.write("&lt;"+ax+bx+cx+"amarantha.pegasusweb.co.uk/swarovski-elements-crystal-iphone-4-4s/");
document.write("'width='100%' height='1500px' scrolling='no'>"+"</ifr"+"ame>");
-->;
</script>

Now this is not the most elegant bit of code – it was my first fumbling try – but in essence it breaks the ‘naughty words’ up so ebay doesn’t spot them and reassembles them and stuffs them into the page when the page loads.

The result is this listing – I don’t know how long this link will work – which is the ebay listing containing this page from my WordPress site.

Next challenge is to get the iframe auto-resizing. Note that at the moment the height is set fixed.

Advertisements

4 thoughts on “iFrame on eBay Listings

  1. Buzz

    Can see your listing is still working but I won’t be able to upload mine =(

    Tried to copy your script and past to TL directly and it still detect the iframe….
    any clue?

    Reply
  2. stuartparkinsonuk Post author

    Sorry guys, it was some time ago and I’ve not tried it lately so don’t know if anything has changed. However the original ebay listing still seems to display okay ( http://www.ebay.co.uk/itm/iPhone-4-4S-Bling-Cover-encrusted-in-Swarovski-Elements-crystals-hard-case-/121050247434?pt=UK_MobilePhones_MobilePhonesCasesPouches&hash=item1c2f28310a ). I am running it from a site with an ssl certificate – ebay might insist on this the same as facebook does for any iframe content but I am only guessing.
    I used one of the WooThemes premium themes, probably Canvas I think as this is highly customisable, and hacked it about a bit to remove the menu bars etc. as I didn’t want them displayed on the ebay page obviously.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s