Tutorial on using my new Zazzlit Gadget on your blog or web site

After something like five or six intense days, I've finished both my Zazzlit Gadget and the tutorial on adding and using it.

What is it?

Regular readers will know that I've recently opened a Zazzle shop (basically they make it dead easy to get your images onto products. No set-up fees.)

In these tough economic times, sales of my work through my web site have dropped off. People aren't really spending on fine art the way they used to. Not mine, anyway (and I keep hearing the same story from other artists).

The shop is a way to offer my work, albeit in a different way, at a much more affordable price. And it's starting to work.

So what is the Zazzlit Gadget? It's a way for Zazzle storekeepers to display just the products they want, in a small gadget in their blogger side panel or on their web site. Zazzle provide a couple of brilliant panels but they don't allow you to narrow down the products displayed.

But my Zazzlit does! I had to write it because I couldn't find one anywhere that did the job half decently, one that any shopkeeper could use. The thing about the Zazzlit Gadget is that I can put one on each of my sites / blogs and get them to display the type of gear most suitable to the folks who visit those places.

Tutorial - a piece of cake

My tutorial shows you in 5 easy-to-follow steps, with live working examples, how to point and click a Zazzlit onto your blogger blog.

Another revenue trickle / stream is always good...

I'd encourage any of the serious artists who follow me to sign up for a Zazzle shop - apart from the effort in uploading images and applying them to products, any sales made are pure profit. If you do, get things moving by using Zazzlit.

I'm not saying this is an instant earner but if you already sell your work and have a good handful or two of regular followers, then with Zazzlit you should see some additional revenue.

As usual, I'm after your feedback. What I want to know is, was the tutorial easy to follow and understand or did it frighten you?!

Secondly would you/will you use Zazzlit on your Zazzle store or does it have any drawbacks that need fixing?

comments / feedback always welcome :)

Stumble It!

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: http://hosting.gmodules.com/ig/gadgets/file/100521288542998786592/zazzle-by-highton-ridley-v1_1.xml)
-------------------------------------------------------
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

http://hosting.gmodules.com/ig/gadgets/file/100521288542998786592/zazzle-by-highton-ridley-v1_1.xml

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

• http://www.zazzle.com/HightonRidley/rss?qs=fun&at=238582202591969585
• "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="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100521288542998786592/zazzle-by-highton-ridley-v1_1.xml&amp;up_show_date=1&amp;up_num_entries=99&amp;up_MyZazzleFeed=http%3A%2F%2Fwww.zazzle.com%2FHightonRidley%2Frss%3Fqs%3Dfine%2Bart%26at%3D238582202591969585&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 :)

Stumble It!

Hacking and cobbling stuff together

I'm rather pleased with myself... it's been a hard old slog over many days to achieve the gadget-ified scrolling image selector you (hopefully) see here.



...and I'll finish writing this post when I can see it works (after the usual test, test and test again)!

Ok, it does - and with only a minor hiccough (see if you notice!).

So, why was it all so hard?

Well, first of all, what actually is going on here? Hover with your mouse to the left of centre, and the piccies scroll towards the beginning of the gallery, and vice versa.

Click on a thumbnail, and it takes you to a page (opens in a new tab) with a larger version of the picture, showing what it looks like in a frame, and letting the visitor buy one of the limited editions of that picture, using PayPal as the payment processor.

Well, in the dim and distant past I once saw someone who claimed they were "doing programming" and, when I looked over his shoulder, thought it all looked a bit like witchcraft to me with strange runes, spells and incantations.

Little did I know I'd end up wrestling and doing battle with the slippery little things! It only began to dawn on me when I was researching how to achieve my vision above, that I was going to have to do a bit of "programming" myself.

I use the term cautiously, it was more akin to hacking and chopping, with a fair bit of kludging, hair-tearing and plead-offerings to the bittybyte silicon gods of the megaverse, thrown in as well.

And there was me thinking, a quick search on google to find a suitable bit of javascript, a deft bit of cutting and pasting and chucking in my own urls and... done deal, or so I niaively thought :)

Once it was all hanging together (small word "once", to really get the meaning across, I need a word that echoes trail blazing over virgin mountains during a blizzard, while suffering from snowblindness and frostbite in eleven toes, or crossing the vast desert plains of the kalahari with only a swiss army knife, a small flagon of dehydrated water to hand and an impromptu overly-friendly "hopping" bird for company, "once" just doesn't seem to cut it) it was easy enough to google gadget-ify it.

..And the problem, well it's not fully transportable - when the scroller has less than 500 pixels to display in, the javascript that drives it still thinks the center is 250 pixels from the left. The width of this blog means the google gadget that contains it can't be wider than 400 pixels - the end result is that to scroll to the right you need to hover much further than right of center than you should.

Obviously my plead-offerings to the gods weren't quite up to par!

If only I knew how to change the javascript to make it right. Hmmm.

I suppose I should say, the advantage of having it gadget-ified is that it is dead easy for friends (and people who find it in the google gadgets directory and who like it enough) to add it to their blog, website etc. See how easu it is yourself, just click the google + button under the scroller to see just how easy it is.

Stumble It!