New free tool: Nifty Fanci-Panci bookmarklets for easy-peasy Collection animations on social media

HightonRidley
Contributor III

Getting and putting your collection animation on a new pin on Pinterest is the easiest - it's one-click magic:
https://youtu.be/o0ptZyLkMXE (2minute video)

Here's a pin I made of one of my own collections: https://www.pinterest.co.uk/pin/332562753751134111/

Get the bookmarklets so you can do the same:
https://niftytoolz.com/npcp/collections-anigif-maker.html

getting your Fanci-Panci bookmarkletsgetting your Fanci-Panci bookmarklets

Facebook and Twitter involve some copying and pasting but you're given everything you need - just drag and drop the animation and copy and paste the text-with-link.

See the full "How To" tutorial here:
https://niftytoolz.com/fanci-panci-bookmarklets-for-easy-peasy-zazzle-collection-animations-on-socia...

Zazzle Community signature
30 REPLIES 30

ColsCreations
Honored Contributor II

This looks like an awesome tool, tried it out straight away!

Maybe I'm slow to catch on but it took me quite a while to figure out what/where I was supposed to click & drag to get the Niftymarklet on my toolbar.

Once I figured that out, the Fanci version worked with no issues. I right-clicked the resulting .gif animation, saved/downloaded it, then added it to a FB post with my own text and the referral link copied from the Nifty page (edited to change the tracking code part).

The Panci version gave me issues though. After I activated it I got this

Panci-01.png

So I waited a short bit and then got this

Panci-02.png

which is the home page for Pinterest UK which I am never logged in to. I tried several times to log-in to it but have apparently forgotten how to get in to that version of the site. So I gave up and tried manually creating a pin (on the US site I am always logged in to) using the .gif I had downloaded created by the Fanci version, and you're right, it doesn't animate on Pinterest.

This is a really nice addition to your tool collection but the US vs UK site issue may be throwing a wrench in the works for the Pinterest version. 

 

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

Thanks for the helpful feedback, @ColsCreations 🙂

Maybe I need to do a short video on dragging the bookmarklets to the toolbar??

About your issue with Pinterest... is it maybe because you're not logged in to the .com domain? They have a way of detecting where you're from and switching domains behind the scenes. That's what happens to me (I'm in the UK) when I try to visit a page on the .com site.

..I just checked. If I'm NOT logged in to Pinterest and try to go to https://www.pinterest.com/pin/332562753751134111/  (note the .com) it takes me to the .co.uk version. So whether logged in or out, it sorts out which domain to use for me.

The pin builder I've been using behind the scenes just happens to be the .co.uk one - because it was always doing the right thing for me. I wonder if it's broken the other way around? Anyway, I've changed it under the bonnet so it uses the .com pin builder now.

Give it a try and let me know how you get on, please. You can check you're using the latest version (1.1) by hitting the new FAQ button at top right hand side when it's making the animation.

Zazzle Community signature

Maybe I need to do a short video on dragging the bookmarklets to the toolbar??

No, it was just me being a dummy. I read the title, viewed your sample pin, and went right to the link for the marklet. It took a bit of trying before I noticed it says to use the underlined text. I barely even glanced at the screenshot tute in your post where you made it clear as day what you're supposed to drag.

About your issue with Pinterest... is it maybe because you're not logged in to the .com domain? They have a way of detecting where you're from and switching domains behind the scenes.

I was definitely logged in to the US .com domain. It wouldn't take my log-in credentials for the UK site and I don't even remember if that's a separate log-in name/pw or supposed to be the same as for the US site. It def was not auto detecting and switching me, was making me manually sign-in and as said, I don't remember how I am supposed to do that.

Anyways, the 1.1 version worked with no problem. Thanks for making such a quick change!

I have another question now, though.

I was using this Collection as a test as it's my largest one I think. If you're just viewing the board, it's a static image. I did a pin using the marklet and the top main image was that of the ceramic knob that happens to be the 7th item in the Collection.  Curious now about which image gets used, I deleted that pin and did another. This time it picked the window decal, which happens to be the 3rd item in the Collection, for the top main image. So then I thought, maybe I can manipulate which image gets used by waiting to click to Save to board until the preview animation is on the image I want. That didn't work, I got the ceramic knob again.

Since it doesn't animate unless you click to view the pin, is there a way to pick which image we want as that top main one for the static image people will see when scrolling their feed?

P.S - In case anyone is wondering, this works on any Collection, doesn't have to be your own.

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

My coding has gone with the defaults of whatever Zazzle provides. So the image at the very start is the one that's mentioned in the collection page's under-the-hood head section, the og:image tag, with the bit of text in the filename changed from z5em8 to zruem - It's the same as the one that you'd get from clicking the share button on the collection page (then the link option, with the portrait size option selected --> then look in the html section for the image filename)

The order of the images is supposed to be whatever Zazzle's rss feed mechanism provides, which is the order of the products in the collection. I've just checked but that isn't the order they appear in the animation.

I've done some digging and now know that the reason it's happening is because of stuff (stuff = some techo babble to do with asynchronous image saving) . Now that I know I'll try to do something about it. Don't hold your breath 😉

Thanks for making me aware 💐

PS I see that in testing, I limited the number of piccies in the animation to 10 and forgot to set that max back to the 30 it was supposed to be. I've done that now.

Zazzle Community signature

It didn't take as long as I thought. The images now follow the same order as they appear in the collection (as they should have done from the get-go!)

Zazzle Community signature

I didn't think it mattered to me what order the product images are shown in when animated, I was only wondering about the top image used for the static view

StaticGifImagePanci.png

which with your most recent update is now the first product in the Collection. 👍
That's terrific, that means we can move whatever we want to showcase to best represent the collection into the first spot in the Collection on Zazzle.

That the animated gif shows the products in the same order they are in in the Collection - that's a big unexpected +.
I just did this pin and love that it seamlessly cycles through the different pre-set color options I made for each product!

You've made this so easy I am now motivated to actually try and promote my Collections. 😀

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

I'm glad you're finding it so easy to use and are now motivated enough to promote your collections, @ColsCreations!

A word to the wise: If you do move anything in your collection, you'll need to give it time for Zazzle to reindex the collection so the rss feed mechanism, and hence the animation when created, uses the new order. Maybe 12-24 hours to bake properly???

Zazzle Community signature

Connie
Honored Contributor

This is a very neat tool! I tried it on a collection for Pinterest, and it works very well! It's a bit slow, and I did get a "hiccup" message the first time, but refreshing the page does the trick. Thank you!

HightonRidley
Contributor III

I've changed things up a little and you'll need to delete the old bookmarklets and get the new ones from here:
https://niftytoolz.com/npcp/collections-anigif-maker.html

The default orientation now for Facebook / X (formerly Twitter) is landscape. If you want to get portrait orientation instead for them then you press either of the shift keys when the tool page first opens after clicking the Fanci bookmarklet. You've got 3 seconds and if you manage it ok, you'l get a dialog box to let you know.

If you don't get the dialog box, refresh the page and try again - maybe press and release the shift key two or three times, just to be sure.

So to summarize - Panci gives you portrait orientation on the auto-created pin. Fanci gives you landscape orientation by default or portrait orientation if you press the key while the page is loading.

Enjoy 🙂

Zazzle Community signature

HightonRidley
Contributor III

I've been tweaking again. The bookmarklets are now called Fansci-Pansci (they were called Fanci-Panci) and have been modified to create either a collection animation or a search results page animation, depending on where they were used. See the tutorial for more.

getting a search results page animationgetting a search results page animation

Zazzle Community signature

Made an oopsie booboo - you'll need to reget the Pansci bookmarklet - bug squished!

Zazzle Community signature

HightonRidley
Contributor III

I've been adding a great new feature that works for the Fansci and Pansci bookmarklets on Zazzle Search pages and Collection pages (marketplace or store).

The new templates will give lots of variation to your social media pins / posts and I'm sure you're gonna love 'em 😍

It doesn't add any complexity - all you have to do is choose the layout option in the dialog box you get when you click one of the bookmarklets:

choose your layout optionchoose your layout option

You'll need to delete your old bookmarklets and get the new ones from here:
https://niftytoolz.com/npcp/collections-anigif-maker

Enjoy!

Zazzle Community signature

Finally got a chance to try the newest versions. Have only tried the Pinterest (Pansci) one so far but wow, you've outdone yourself with the Search results version. Here's one I made using my store name as the search term, then using the cat filter to narrow it down to just tissue paper:
https://www.pinterest.com/pin/421719952623812867/

Here's another one I made after searching for [tie dye pillows] then clicking the suggestion for "rainbow" then using the cat filter to narrow it down to just square pillows:
https://www.pinterest.com/pin/421719952623812905/

This is wonderful for targeting things that aren't all in a specific category or collection and even from multiple stores. Would it be at all possible to make the pin title optionally editable?

Feedback on the Collections version in another reply.

 

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

I'm really happy you're loving it, @ColsCreations - and I'm loving those tissue papers 🙂

Unfortunately there's nothing I can do about any of the text used in pins. It's because Pinterest visits the link given and grabs the title and description from the page's meta tags (stuff beihnd the scenes for others reading this).

I wish it were different but, hey ho!

Zazzle Community signature

HightonRidley
Contributor III

I'm in the process of tweaking again! Watch this space for news about a change that lets you do the magic on a public storefront.

Zazzle Community signature

ColsCreations
Honored Contributor II

The Collection use is awesome too but for one reason that I realize is probably very specific to just me, I prefer the orig version.

In this screenshot, the pin made with the original version is on the right, the pin made with the latest version is on the left.

PansciCompare.jpg

This is the Collection I was using. Since the Z Collection pages show four products across, I specifically made four pre-set color versions of each product. I have a couple of Collections like that. Even when color versions aren't a factor, I try to organize my Collections in ways that make visual sense to me based on "groups" of four each. So,

In the orig version, you got static images of products 1-4 in the Collection (in order) plus the large animated square that cycles thru all the products. In the latest version, the first product (in this case the black version) becomes the animated square, and products 2-5 are the smaller static image squares. For me that breaks the cohesiveness of things so I did prefer the orig version where the animated square wasn't doubling as the first product image causing the fifth product image to be added as the fourth smaller square.

I am watching this space, looking forward to seeing what you have up your sleeve before I start pinning anything besides just tests.

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

Great feedback - thanks @ColsCreations 

Just to make sure I understand you properly - you're suggesting that the 4 smaller images should always be the first 4 in the collection and the larger, animating one should then cycle through all of them starting at the first, yes?

Zazzle Community signature

Yes, exactly.

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

Give it a try now 🙂 🤞

Zazzle Community signature

That's exactly what I wanted! I feel like I have a promoting tool designed specifically for me now. 😀
Creators, once you've saved the bookmarklets this is ridiculously easy to use. Mark, thank you for this amazing addition to your tool set.

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

At your service, M'am 🙂

Zazzle Community signature

HightonRidley
Contributor III

I've released new versions of the animation makers that let you use text (animated or static) on your animations. The bookmarklets haven't changed so there's nothing you need do apart from use the new options panel - if you want.

If you do nothing, things will all work as before - except that the Pinterest dialog will open in a new tab/window.

Here's the new options panel:

neww options panelneww options panel

 

Zazzle Community signature

I gave this a whirl this morning and found that you HAVE to "Stop and Set Options" --> add some text --> "Regenerate" in order for it to use the first 4 products in the Collection. If you don't do that, or do that but leave the text fields blank and regenerate anyway, it picks four random products.

Pansci4compare.jpg

 

I probably wouldn't use the text option myself except maybe to add a "50% off!" or such as I think the animated text on top of the animated main frame is a little much but that's just me. I would recommend speeding up the rate it drops a little though. I timed it and it takes 42 seconds for the text to drop as far as it goes (just past half-way I think) before it starts at the top again. So like in the second example above with the main animated frame at top, that's a long time to wait for the text to clear the main animation frame for an unobstructed view.

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

Yeah - I made an oopsie... should be ok now... I just fixed it. Try it (clear your cache) and let me know if all is good again - it should be 🤞

Zazzle Community signature

All good now. 👍

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

HightonRidley
Contributor III

I've been experimenting, spurred on by one of the other Niftyers. As a result, we've found a way to get the animation to work on pins in your Created section. Why is that important? It's because pins in there get far more exposure than the ones in the Saved section.

I've updated the FAQ on the animation creation pages to list the steps to do it. I've repeated them here:

What you need to do is convert the animated gif file to an mp4 video because that will animate on Pinterest when you upload it to your pin (gifs won't). I use and recommend convertio 

To do this, first you need to get the animation and the text to go with it. So instead of using the Pansci bookmarklet, use the Fansci one. When you've set up any options how you want and regenerated:

  • save the animation to your desktop
  • start creating your new pin
  • drag the animation to the pin
  • edit the text you're given in the box on the animation creation page to how you want it
  • change the word facebook in the tracking code (tc=) to pinterest
    NB tracking codes can take only lowercase letters, digits and the underscore character
  • add any hashtags you want - use no more than, say, five
  • copy the text for the title and paste it into your pin
  • copy the text for the description and paste it
  • copy and paste the link text
  • hit publish
  • choose your board

You're done! You'll find your pin in the Created section and you should expect lots of impressions and engagements.

I'd love to hear how you get on!

Zazzle Community signature

HightonRidley
Contributor III

After lots of feedback, I've been tweaking the way the text animations display. You can see examples of them all, together with a description of where the static text goes, at the bottom of the page here:
https://niftytoolz.com/fansci-pansci-bookmarklets-for-easy-peasy-zazzle-animations-on-social-media

It's always good to listen to feedback 😜

Zazzle Community signature

HightonRidley
Contributor III
I've been tweaking again.
It was taking me ages to write the static / animated text - I think it's because my brain is in the wrong "mode" when I'm making the animations.
So I've made 250 calls to action texts, one being selected at random with a button in the Options panel. Each has got XYZ as stand-in text for the product type / theme of the animation. It means there's still some editing to do but at least we're not starting from scratch now - unless we want to.
Here's the new Options panel:new options panelnew options panel

 

Zazzle Community signature

HightonRidley
Contributor III

I"ve withdrawn the Pansci bookmarklet because the poor results it was giving on Pinterest have been improved hugely by using the Fansci bookmarklet for your Pinterest pins. There's an extra step when making manual pins this way - you need to convert the gif to an mp4. Full instructions are given in the reply below: https://community.zazzle.com/t5/external-tools-materials/new-free-tool-nifty-fanci-panci-bookmarklet...

Pins made this way go into your Created section where Pinterest gives them much more exposure than pins made the other way, which put them into your Saved section.

Zazzle Community signature

HightonRidley
Contributor III

Tweaking again - Fansci now has another 4 templates, two more horizontal and two vertical templates. They each have one large image and 9 thumbnail sized images. The animated large images are left/right or top/bottom.

You'll need the new bookmarklet (remember to delete the old one first). Get it here:
https://niftytoolz.com/npcp/collections-anigif-maker.html
or here:
https://niftytoolz.com/npcp/searchpage-anigif-maker.html
bkmrklt.png
 
Here's an example (half the frames deleted so it could be uploaded here but it goes twice as fast)
ezgif.com-optimize.gif

 

Zazzle Community signature