{"id":37,"date":"2005-11-16T21:06:40","date_gmt":"2005-11-16T13:06:40","guid":{"rendered":"http:\/\/www.darkmirage.com\/2005\/11\/16\/recommendations\/"},"modified":"2006-07-27T01:25:37","modified_gmt":"2006-07-26T17:25:37","slug":"recommendations","status":"publish","type":"post","link":"http:\/\/www.darkmirage.com\/2005\/11\/16\/recommendations\/","title":{"rendered":"Recommendations"},"content":{"rendered":"

I have created a recommedations section at the right. It displays selected CDs and books I like using the Amazon.co.jp<\/a> database. (They do ship overseas for most printed materials and music CDs, so it’s a pretty good site to get stuff from) It took me damn long to get the script working right.<\/p>\n

Stop reading here if you are not interested in technical fluff.<\/p>\n

<\/p>\n

First of all, I have to confess that I was<\/strike> am totally clueless about PHP, so it took me a lot longer than necessary to write this simple script… \u00ef\u00bc\u00bf|\u00ef\u00bf\u00a3|O<\/p>\n

Basically Amazon Affliate links allow you to link to individual items and adds thumbnail and item information. I noticed that these links are actually webpages nested in an iframe, which makes the actual URL of the page known. The code given looks something like this:<\/p>\n

<iframe src=\"URL IS HERE\" style=\"width:120px;height:240px;\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\"><\/code><\/p>\n

The URL itself is seriously long and it will break my layout if I typed it here. Clicky for a sample<\/a> of one (btw, that’s KOTOKO’s new single).<\/p>\n

As you can see from the iframe code and the URL, Amazon has already provided the user with some levels of customizability. The bg1=ffffff<\/code> parameter in the URL allows you to set the background colour, lc1=<\/code> for the link colour, bc1=<\/code> for the border colour, etc. The most important parameter is asins=B000ANY1HA<\/code>, which tells Amazon’s script which item you are trying to display, with “B000ANY1HA” being the ASIN (Amazon Serial Identification Number) of the item, which can be found on the page of all items listed on Amazon.<\/p>\n

Well, being able to customize the colour is great, but it’s not enough. The links are all underlined and there’s this grey “\u00e3\u0192\u2014\u00e3\u0192\u00a9\u00e3\u201a\u00a4\u00e3\u0192\u0090\u00e3\u201a\u00b7\u00e3\u0192\u00bc\u00e3\u0081\u00ab\u00e3\u0081\u00a4\u00e3\u0081\u201e\u00e3\u0081\u00a6” (Privacy policy) text at the bottom which is pretty distracting. The default table and iframe size also cause a tiny white margin to overflow and makes the iframe scroll slightly when you turn the mousewheel. This annoys me greatly.<\/p>\n

Since, unlike with Google Adsense which uses Javascript to cloak everything, I now have the URL of the actual page, I decided to reformat it using PHP to fit my layout. Originally, my intention was to do away with the iframe completely and using include()<\/code> to insert the content directly. The benefit of this is that the CSS formatting will all be applied automatically as the whole thing because effectively part of this page. But I soon realized that the idea stinked because Amazon codes like drunkens and introducing the HTML codes in directly will make my site to contain invalid XHTML.<\/p>\n

So I decided to file_get_contents()<\/code> the thing into a variable, reformat it however I like, echo the result and finally put that<\/em> into the iframe instead (making sure that there isn’t any overflow). Normally the script retrieves and formats an indexed page (specified using indexed=<\/code>) instead of a live feed so as to speed things up. The other display method is to input a specific ASIN using the url=<\/code> parameter, through which the script can display even non-indexed items by downloading the live feed. It cycles through the indexed links randomly by default if neither parameter is present. Source code is here<\/a>. It’s hardly optimized in anyway, but it works.<\/p>\n

The results for comparison: KOTOKO’s 421 -a will-<\/strong> in three versions.<\/p>\n