Thursday, 29 March 2012

Putting a Zazzlit on your Facebook Brand Store Page

If you have a Facebook brand page for your Zazzle store, here's a short tutorial showing you how to create one or more tabs containing your Zazzlit(s)

Note that you can click any image here to see it larger

What will it look like?

The Zazzlit in place
Where its tab appears on your page

What you'll need...

  • 15 minutes and a cup of tea / coffee ;)
  • First, decide what the Zazzlit is to show.
    My main Facebook brand page is devoted to my fine art photography, so it made sense for me to create a Zazzlit showing off some of my fine art products.
  • Next, you need your Facebook (brand) store page ready in a browser window. You'll need to have your admin panel in view and be using the page as your personal profile.
  • Finally, you'll need my Zazzlit Builder web page open, as that's how you'll build the Zazzlit

Decide on what's to show up in the Zazzlit

A good way to sort this out is by
  1. going to your store (like a customer)
  2. typing stuff into the Search this Store box and seeing what comes up
  3. keep doing this until you've got just the products you'd like to appear in the Zazzlit
  4. Stop! (for now)
Leave this browser window open - you'll come back to it later so you can copy those search terms. Or maybe you write them down and close the window - it's up to you.

Readying your Facebook store page

Open a new browser window (as this will make it easier in a while) and get to your Facebook store brand page.
Make sure you're using it as you and not the page. This is so you can add the app that will display your Zazzlit
Make sure you're in Admin mode
The app for your Zazzlit will go here

Readying the Zazzlit Builder page

Again in a new browser window, get to my Zazzlit builder page:
Zazzlit Builder - what it looks like initially
In a wee while, you'll be preparing your Zazzlit using this page. It was actually designed for emailing Zazzlits to your blog but is near perfect for building one for your Facebook brand page as well :)

Great, your now ready to start adding it to your Facebook page. On we go...

Grab the app

Look at the top of your Facebook page for the search box and type html static
The one you want is the one I've circled. If the time comes for you to add another Zazzlit, you'll choose the one marked [Second Tab] and so on.
Anyway, click the one I've circled - Static HTML:iframe tabs and you'll get to its details page.
search for html static
html static details page

hit the Add Static HTML to a page button...

choose your Facebook brand store page
confirm you want to add the app

Choose the Facebook brand store page you want to add it to and then confirm. One thing I really appreciate about this app is it doesn't ask you for permissions, so no handing over your email address or other personal information.

Once you've clicked the confirm button, you'll be sent back to your brand page.
The Static HTML app has now been added
You'll now see the thumbnail (circled) of the app you've just added. You can change it for your own image but for now we'll skip that and get on with adding the Zazzlit.

Where does the Zazzlit code go?

Click the star thumbnail to bring up the window where you'll paste the Zazzlit code into the top box.
the top box is where you'll paste the Zazzlit code from the Zazzlit Builder
Now you're ready to build your Zazzlit and paste its code into the top box.

Building the Zazzlit ready for pasting

Bring up your browser window with your customer view of your store. The one where you did some searching to bring up just the products you want to show in the Zazzlit. If you haven't already done that, in a new browser window:
  1. Get to your store (like a customer)
  2. Type stuff into the Search this store box to bring up what you want
  3. When you've got just the products you'd like to appear in the Zazzlit, copy the search terms you used
  4. Get to the Zazzlit builder and paste in the tags
  5. be sure to replace all spaces with %2B - if you leave any spaces in, it won't work

For me, I've used the search terms full%2Bdesiderata (these are power tags against all relevent products in my store)
Fill in all the boxes on this page and make sure you use a tracking code you'll recognize when sales arise. All the boxes are described, so I won't repeat that here.

When you've done that, click the Display goobledegook for email button. Ok, it's not going to be emailed but I haven't got round to changing it so it makes sense for both emailing to blogs and using for your Facebook brand page.

Oh, one last point. When you click that button, you'll get an alert telling you never to remove the last line of code, the one that starts with #end. Well, you're going to ignore that in a moment!!

Ok, now you're ready to put that gobbledegook into the app you just added to your Facebook page.
First, select it all and copy it.

Get pasting!

Bring up the browser window and paste it into the top box:
..the code pastes as one long unbroken line
Now you have to get rid of that pesky chunk of text that starts with #end
Scroll back until you see it, then select it and all the way to the very end of the line, until you can't go any further. The last bit of text is </b> (in the screenshot it's shown as <b>, which was a mistake on my part; I've now corrected it but haven't updated the screenshot)
showing the text that is to be removed
..and hit delete. Save what you've got so far:

..and click the preview button:
ready to preview
Zazzlit preview
Click the back button to return to the app code page. Assuming all is well, you've finished and you can close the window. Well done, congratulations are in order!

If not, delete the Zazzlit code you pasted, return to the Zazzlit Builder, make whatever changes you need and re-paste the code (and remove the text starting with #end, as before).

To check to see what it looks like for someone else, you'll need to log out, visit your brand page and click the star - or maybe log-in as a different user first, if you have another account.

In time, I'll provide a specific version of the Zazzlit builder, just for Facebook brand pages and that'll remove the pesky #end stuff.

First version of this tutorial - feedback please

I've thoroughly checked this first version of the tutorial but even so, the best laid schemes o' mice an' men gang aft agley, so there may be some slight glitches.

If you spot any, I'd be grateful if you tell me about them in the comments.

comments, likes, +1s, tweets are always welcome! :)

New Electronics Skins from Zazzle Logo
Scroll to see all products - for those you like, click to view, personalize / customize and buy

Brand new from Zazzle! Vinyl skins for your electronic devices. Decorate your mobile phone, laptop, mp3 player or a multitude of other devices with one of these patterns from my collection. Click on any image to see the design in my shop. Lots of models are available from a drop down list for each design. I'm just getting started with these and plan to add new items daily. If you like my artwork then please click one or more of the social networking buttons below to let your contacts know. Thanks!

More great designs in the Anderson_Designs Zazzle store

Watch Out There Are Vampires About! Logo
Scroll to see all products - for those you like, click to view, personalize / customize and buy

Vampires are all the range lately and over at Zazzle there are some fantastic vampire designs which will tickle your vampire taste buds! If you love vampires then hop on over to Mrs Cookie's Zazzle store and have a browse!

See the entire range in the mrscookie store