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- going to your store (like a customer)
- typing stuff into the Search this Store box and seeing what comes up
- keep doing this until you've got just the products you'd like to appear in the Zazzlit
- Stop! (for now)
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: www.highton-ridley.co.uk/tutorials/zazzlit-email-builder.html |
| Zazzlit Builder - what it looks like initially |
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 staticThe 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 |
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 |
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:- Get to your store (like a customer)
- Type stuff into the Search this store box to bring up what you want
- When you've got just the products you'd like to appear in the Zazzlit, copy the search terms you used
- Get to the Zazzlit builder and paste in the tags
- 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 |
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 |
 |
| ready to preview |
 |
| Zazzlit preview |
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! :)
