spaceship banner
An Author’s Blog

Better Amazon Link

· by Brett · Read in about 4 min · (811 Words)

I’ve come across a strange problem with the links provided by the Amazon affiliates program to enable you to sell your book. Usually they sit there displaying your book. But sometimes they display a general advertisement for Amazon that does not lead the customer - a hard won customer, by you on your blog - to the product you want to sell. Obviously, this is not okay. The moment I saw this behaviour I knew I had to design my own advertisement, one not served by Amazon. I needed an Amazon advertisement that I could control myself.

I want it to look like the one Amazon serves, which is a skyscraper shaped box that has the Amazon logo at the top. Under that is a picture of the book cover, with a caption below saying the title of the book. Finally, below that is a yellow button with another, smaller, Amazon logo and text that says “Shop now”.

That is a lot of elements to get stuck together in only one box. I had no idea how to do it, so I went Googling. I have pasted in the fieldset-based advertisement I came up with below.

Galaxy Dog (Dark Galaxy) My first idea was to use the fieldset attribute. The first element I put in the fieldset was the Amazon logo, which was easy to find with a quick Google image search. There are literally thousands of them to choose from. I downloaded one, resized it and uploaded to my site’s image directory as amazon_logo_top_element.jpg. Then I created an image of the cover of one of my books with the same width, which I saved as amazon_link_cover_galaxy_dog.jpg. Now all I needed was the yellow button for the bottom element. Another image search, this time for “yellow button”, produced one to download in seconds. Then I used GIMP to add a small amazon logo to it, along with the text, Shop now. I then saved it as, amazon_logo_bottom_element.jpg. The next step was just to bring the whole thing together, along with my Amazon affiliate link. I just went to my Amazon affiliate console and generated a text only link which I simply added to the code between the image of the cover and the bottom button.

Next came the testing phase, where I discovered that it did not work. Instead I thought I could just use a float attribute to float all the images over to the left of the sceen, where I want to have it, and so they would be loosely grooped because they all share the same behaviour.

It worked surprisingly well, though I had to experiment with various configurations of “clear:left” and “float:left” parameters to get it to hang together just right. I was tipped off about the correct order for the attributes by this sitepoint discussion. Once that was done, I just made every image into a link, just the way explained aboult half way down this article. I used the same long string of text for the “href” attribute as was generated by the Amazon affiliate link maker. The text link was quite centred so I fixed that with a “position: relative” atribute I found on a stack overflow discussion. I had to fiddle a bit with the number of pixels, eyeballing the results, but eventually I got it where I wanted it.

Here is the code I came up with below, to help you replace your Amazon links, if they are giving you the same problems mine were giving me. I learned how to make the code block below from a github guide. The Github rules usually work on my blog as well, because it also uses Markdown in creating pages.

<a href="https://www.amazon.com/gp/product/B06Y11L4CH/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B06Y11L4CH&linkCode=as2&tag=shou0e-20&linkId=a8ca3ee5833c96ee61bc6e416c4cf9d9"><img style="float:left; margin: 0px 20px;"  src="http://www.brettfitzpatrick.com/img/amazon_logo_top_element.jpg"  /></a> 
<a href="https://www.amazon.com/gp/product/B06Y11L4CH/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B06Y11L4CH&linkCode=as2&tag=shou0e-20&linkId=a8ca3ee5833c96ee61bc6e416c4cf9d9"><img style="clear:left ; float:left; margin: 0px 20px;"  src="http://www.brettfitzpatrick.com/img/amazon_link_cover_galaxy_dog.jpg"  /></a>
<a  style="clear:left ; float:left; position: relative; left: 32px;" href="https://www.amazon.com/gp/product/B06Y11L4CH/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B06Y11L4CH&linkCode=as2&tag=shou0e-20&linkId=a8ca3ee5833c96ee61bc6e416c4cf9d9">  Galaxy Dog (Dark Galaxy)</a><img src="//ir-na.amazon-adsystem.com/e/ir?t=shou0e-20&l=am2&o=1&a=B06Y11L4CH" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a href="https://www.amazon.com/gp/product/B06Y11L4CH/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B06Y11L4CH&linkCode=as2&tag=shou0e-20&linkId=a8ca3ee5833c96ee61bc6e416c4cf9d9"><img  style="clear:left ; float:left; margin: 0px 20px;"  src="http://www.brettfitzpatrick.com/img/amazon_logo_bottom_element.jpg"  /></a>

Galaxy Dog (Dark Galaxy)

So here is the finished link again, and a little information about the book it will take you to on Amazon. Galaxy Dog is the first book in the Dark Galaxy series and it is a story of adventure, spaceships, and rebellion across a galactic empire. A small group of friends, one woman, one man, and one robot incite a revolt and take on the might of the Tarazet Deep Space Navy. They find an immensely powerful alien spaceship so, even though the rebellion is extremely outnumbered, they still stand a chance. Galaxy Dog combines the action of military sci-fi with the heart of space opera. There are robots, aliens, space battles, and all the good things that make sci-fi so enjoyable. Galaxy Dog is available from Amazon right now, so just click the link and download a copy.






Comments