Thursday, 19 November 2009

I fought Google Gadgets and won!

[UPDATE: 22 Nov. This brief tutorial is now out of date. Please see the new, full-blown tutorial at its new location.]
[UPDATE:] There was a flaw: clicked links opened the product page in the gadget window. Now fixed to open in a new window / tab. 
New filename is v1_1 (full name:
It's been a long eleven hours! ([update: now 25!!]

Google gadget for Zazzle

I couldn't find a way of displaying search results from my Zazzle store in a small panel, suitable for my blog.

So I wrote my own - which other zazzle storekeepers can use too.

The key things it does are:
  • Searches your store for the tags you decide
  • displays the products, matching the search
  • Make sure you use your associate id in the config (see below) so you get the credit for referrals 
  • clicking the picture takes you to that item in your store
See it  in action at the top of my right hand panel (I can't get it to work in posts).

The really great thing is that you can have lots of them, each for a different search. Wouldn't it be great if you could put all your fun products on a page you've got which is to do with humour?

Simple, use the gadget with a search for all your products that are tagged with "fun". Do the same for your page about your favourite band. The list goes on...

So exactly how do you do this? Well, read on...

Blogger Blog

To get it onto your Blogger blog, from dashboard, choose "layout" and "add a gadget". In the window that pops up to let you choose your gadget, choose "add your own" and give it the following url
You then get a chance to configure it. The settings you'll want are
  • Title: Whatever you want.
  • Height: 220 (or, I guess, a multiple of 220 [Update: two require 434]
  • Show Dates: (go on, you can guess this time!)
  • Number of entries: 99
  • Zazzle rss feed. This deserves a few words. Look at mine
  • "fun" is the search query - all your tags are searched. If you want the tag "fine art", use fine+art
  • the number at the end is your associate id. Get it from your store.
    Then you'll get the credit from any referrals
  • Note: When you change the Zazzle rss feed (including the query string etc), the preview won't show the changes. You'll only see them once you've completed adding the gadget (grrr!)
    • Box colour: Each product returned is surrounded by an outline. Set the colour here.

    Ordinary webpage

    (or an FTP blogger blog)

    Here's the code I use: Copy and replace the relevant bits and put on your page or in your blogger (classic) template sidebar:
    <div style="width: 200px;">
    <script src=";up_show_date=1&amp;up_num_entries=99&amp;;up_ItemBoxColour=96%2C96%2C96&amp;synd=open&amp;w=200&amp;h=220&amp;title=My+Zazzle&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></div>
    The relevant bits are:
    • HightonRidley: change to your own store name
    • qs%3Dfine%2Bart: change to qs%3Dyour_search_query%26
      (this does a search for fine+art, note that %2B is used in place of the "+" symbol)
    • 238582202591969585 change to your_associate_id
    • &amp;title=My+Zazzle change to the title you want.
      Note the + is used in place of a space here
    • ItemBoxColour=96%2C96%2C96 change to ItemBoxColour=red_value%2Cgreen_value%2Cblue_value
    Whew! Well, that's it. If you have any questions, I'll try and answer them but remember that I'm not techy. I know just enough to be dangerous! hehe!

    If you use the gadget, drop off a link to your page / blog in the comments, I'd love to see how you use it :)
    comments / feedback always welcome :)
    Post a Comment


    Related Posts with Thumbnails