Saturday, April 14, 2007

Making a bookcover image link to Amazon page

Some of you may be Amazon Associate. Someone in the Google Blogger Help group asked on how to create an image of a book cover to link to an Amazon page for that book. The best way to explain is to show how I made that Digital Photography Book image in the bottom of the left sidebar of this demonstration blog Digital Photography Articles.

It is best if you have a browser like FireFox which has tabbed browsing. In one tab, sign into your Amazon Associate account and select "Build Links". The select "Product link" and click on the "Build links" Amazon Associate Build Links icon icon. A new page will open where you can search for products. Just type in the search term as shown in the screenshot below:

Amazon Associate Product Link Search box
Click go, and you will be taken to a list of relevant products. If you see a suitable product, click the "Get HTML" Amazon Associate Get HTML icon icon.

You will be given 3 choices - text and image, image only, and text only. Since this post is about using a book cover image only, click the "Image Only" radio button and wait for a new page to open. There, there will be an image of the book cover plus the HTML to display it. If you use that HTML, you will have to save the image to your blog server, which in the case of blogspot user, is not possible. I don't use own domain and host with a third party web host, but if you are doing that, perhaps you may be able to use the HTML generated by ticking "Image only" by saving it to the server of your web host, but I am in no position to confirm as I use only blogspot and have no access to Blogger's server.

If you use blogspot or custom channel where the blog is hosted by Blogger, there is still a way to do it. Copy the HTML and save it to NotePad. I will show the image of the HTML with the link (URL) to the Amazon Product highlighted in blue below (click on screenshot to enlarge):

Amazon Associate Product Link HTML with URL highlighted

Highlight the link, copy and paste it either in the same or different NotePad for future use. Now you need an image of the book cover. Press the Printscreen key and open a suitable photo editor like the very good and free Irfanview (click "BACK" button to get back to this page). Paste it into the photo editor and crop the book cover image. Save it into a suitable folder in your computer. I saved it in a specially created "Temporary" folder which I can easily find.

Actually, although I ticked the large image, for the book cover image I did for Digital Photography Articles, I actually didn't do it that way, but opened a new tab and went to http://amazon.com/ and made a search for "The Digital Photography Book" and printscreen there and pasted and dropped the image of the book cover as described above. This is because I wanted a larger image.

Now you will have to host the picture on the web somehow. You can use Blogger as described in the post Getting New Blogger to host your image for the profile, sidebar, etc. (click "BACK" button to get back to this page). You can also use Photobucket or other third party photo host. I have actually posted it to a special blog My photo store: The Digital Photography Book for hosting the image.

Now to create the book cover image link in the sidebar. I clicked "Add a Page Element" for the left sidebar in the Layout of the Dashboard, selected HTML/Javasript, then typed <a href="Amazon product URL" target="_blank"><img src="book cover image URL"></a> into the HTML/Javascript window where the Amazon product URL is the URL I mentioned (and highlighted in the screenshot) above. To make things clearer, I will put the actual HTML into the scroll box below:

<a href=""http://www.amazon.com/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.com%2FDigital-Photography-Book-Scott-Kelby%2Fdp%2F032147404X%3Fie%3DUTF8%26s%3Dbooks%26qid%3D1176421784%26sr%3D8-1&tag=bloggerfordum-20&linkCode=ur2&camp=1789&creative=9325" target="_blank"><img alt="Digital Photography Book" src="http://4.bp.blogspot.com/_jizoPL28qCY/Rh8J6-trSdI/AAAAAAAAAJ0/iP24qefngLk/s1600/The%2BDigital%2BPhotography%2BBook.jpg"/></a>


with the Amazon product link (URL) highlighted in red.

22 comments:

  1. I wanted to know if the Amazon advertising in the left column of this blog is a pay per click advertiser like Adsense.

    If so, how do you get it?

    ReplyDelete
  2. Hi Reece,

    No, Amazon is Pay per Action, which means you get paid only when someone purchase something.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  3. hi peter,

    just want to thank you for all the tips. so far, everything i have modified from my blog, i learned them from you.
    one question, how do you do the amazon advertizing on your left side bar?

    ReplyDelete
  4. Hi Mandy,

    Refer to How to put an Omakase ad unit in your blog. If you have any further problems, just comment again.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  5. some handy tips there, will you mind if I copy some of this for my tutorial and provide you a link back from my aStore tutorial? you can have a look at it here

    ReplyDelete
  6. Hi Roo,

    I don't mind if you do a summary and put a link to my post.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  7. peter your blogs are very nice. it helped a lot.

    ReplyDelete
  8. Thanks Peter, I am a html novice and I wouldn't have been able to do that myself. A fab site! What I want to do now though is to put the amazon product preview code onto the link as well. I have tried this but it does not work and I fear it may be something to do with my hacked template? A lot of things seem to be problematic and I am not sure if it is because my html is a mess because I don't know what I am looking at! Can you offer me any advice?

    Thank you!

    www.themoodyfoodie.blogspot.com

    ReplyDelete
  9. Hi Moody,

    I am afraid I read your comment too fast and got it confused with Amazon Content Links (beta). Amazon Content Links is still in beta, so they may still have some bugs to work on. Further, they haven't given information on how long before you begin to see Amazon Content Links begin to put the site. I just implemented it for DIY (Do It Yourself) and I think it will take some time for their spider to crawl that site and to see any links.

    In the meantime, I remember vaguely implementing product review for one of my sites but can't remember which. Anyway I tried looking for information in their Help section and couldn't find any. I have requested for support and now waiting for their response. I will copy this whole message into Notepad and save it into my "To do" files (there are lots of files waiting there). When I do get a response or any extra information, I will comment again here.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Hi Cheeky,

    What browser are you using? My favorite is FireFox with Google toolbar and that is cross platform which means you can use for MAC, plus it is recommended by Blogger. My favorite strategy when getting problems like these is changing web browser. Not cure all, but cure many.

    Try that and let us know if you have any success.

    I don't normally respond to comments by email. But when I have time and the profile and a blog is public, I often make a comment in blog to let them know I have responded.

    Peter Blog*Star
    Natural Remedies

    ReplyDelete
  12. Peter, QUESTION: with the way you describe, does your unique Amazon Associate ID stay intact so you get credit for click thrus and purchases? I got the impression by what you're doing that you're stripping out that code... OR am I wrong? Please explain!

    ReplyDelete
  13. Hi Andonee,

    No, if you study the code carefully, you will see the Amazon publisher code. You need to sign into your Amazon Associates account and generate a link from there.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  14. I eventually figured it out. Thanks Peter. I have been using your methods in my Book Review blog here:
    http://theherculesnotes.blogspot.com/

    ReplyDelete
  15. Hello Peter,
    I tried to add a widget from amazon associates. I clicked the blogger link and it took me to the Add Page Element page. When I clicked Add Widget I got an error. The error code is: bX-s1feoa. And the additional info is:
    blogID: 1160213629090272799
    host: www.blogger.com
    uri: /add-widget.do

    Any help you can give is greatly appreciated. Thanks.

    ReplyDelete
  16. Hi Ashe,

    Use a HTML/Javascript Page Element

    ReplyDelete
  17. you amazing i will write about your blog in my

    http://helpyoutoearn.blogspot.com/

    ReplyDelete
  18. please give me ideas to develop it

    ReplyDelete
  19. dear Peter, i have an amazon account which i verified with one of my blog. can i paste html add code from amazon to my another blog? please tell me. thanks

    ReplyDelete
  20. Once you have an account, you can install it anywhere and I am not even sure if they have similar requirements as AdSense which is a little bit more stringent.

    ReplyDelete
  21. Thanks, that was really helpful! :D

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics