Have you got a collection of Pinterest boards filled with your favorite images found on the web? Either you are a Pinteresting fan or not, as a publisher, I believe your blog / website is almost pin ready for your visitors. If you already integrated the Pinterest Pin It button, your visitors must adore you for making your content pin easy as well. I do love having a Pin It button around when I stumble upon interesting content that should goes right into my Pinterest boards. How about you?
Pinterest Pin It Button
I believe you are already familiar with the Pin It button and its functionality. Unless you have it configured for one specific image on your page, it comes up with image suggestions it can crawl and discover on that page.
Once you pick the right image among the suggestions, you can pin the image to one of your boards appending a descriptive caption.
No reason why you shouldn't have a Pin It button on your site, isn't it?
Instead of,
○ Making visitors scroll and click on the Pin It button
○ Populating all images from the page to choose from
○ Leaving them spending their time on picking the right image to pin
What if your visitors could pin images to their boards,
● As and when they come across the image they wanna pin?
● While still keeping them engaged with your interesting content?
● With less distraction while pinning?
Pinning can be much easier and fun. Don't you think?
Once you pick the right image among the suggestions, you can pin the image to one of your boards appending a descriptive caption.
No reason why you shouldn't have a Pin It button on your site, isn't it?
Instead of,
○ Making visitors scroll and click on the Pin It button
○ Populating all images from the page to choose from
○ Leaving them spending their time on picking the right image to pin
What if your visitors could pin images to their boards,
● As and when they come across the image they wanna pin?
● While still keeping them engaged with your interesting content?
● With less distraction while pinning?
Pinning can be much easier and fun. Don't you think?
Pin It on Hover
Pinterest offers you an alternative to the usual Pin It button - On Hover Pin It button. Unlike the usual Pin It button, your readers don't have to scroll until they find the Pin It button on your page. Instead, they can pin their favorite images as and when they come across them.
This floating Pin It button comes into action as you hover over any image, positioned to the top left of the image as demonstrated in following screenshot,
This floating Pin It button comes into action as you hover over any image, positioned to the top left of the image as demonstrated in following screenshot,
If your site is filled with lots of images, this can be the best way for your visitors to pin your images. Imagine they have to click on the Pin It button instead and having to go through all the images figuring what to be pinned.
But I wouldn't leave out the obvious downside of this implementation either.
◌ Currently, floating Pin It button is not compatible with all the mobile browsers.
It doesn't blend with smaller images either. However, it's common to the usual Pin It button as well. Pinterest documentation claims "images that are under 80 by 80 pixels in size". But as I've observed, it doesn't seem to populate on images that has the height less than 130 pixels.
Hence if you already have a third party sharing solution or Pin It button placed beneath your content, you may still wanna keep it eventhough you are going to add floating Pin It button for your images. Then it won't leave anyone disappointed when it comes to pinning images from your site.
◌ Currently, floating Pin It button is not compatible with all the mobile browsers.
It doesn't blend with smaller images either. However, it's common to the usual Pin It button as well. Pinterest documentation claims "images that are under 80 by 80 pixels in size". But as I've observed, it doesn't seem to populate on images that has the height less than 130 pixels.
Hence if you already have a third party sharing solution or Pin It button placed beneath your content, you may still wanna keep it eventhough you are going to add floating Pin It button for your images. Then it won't leave anyone disappointed when it comes to pinning images from your site.
Now... If you would like to have this cool feature on your site, you will soon find out how easy it is to implement as well :)
Before You Go:
If you already have official Pinterest Pint It button implemented on your blog / website, you likely to have a similar script as below. Then, you will have to find and remove it from your blog / website first.
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" ></script>
Steps:
1. Search your template or source code for the following tag,
</body>
2. Now customize the below script to your preferences and place it right before the </body> tag.
Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.
<script type="text/javascript" data-pin-shape="[Button Shape]" data-pin-color="[Button Color]" data-pin-height="[Button Height]" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Color Indication Information:
- Button Shape
By default, the Pinterest button is rectangular and if you would like to have the default button, leave this attribute empty - i.e.: data-pin-shape=""
To switch to the circular shape, specify this attribute value as round.
- Button Color
Pinterest button color applies only if you use the rectangular button. If you are using rectangular button, you can specify following color values,
Value: Red
Value: Grey
Value: White
- Button Height
Either it's rectangular or circular shapes, you can leave this attribute value empty if you prefer the small button size on your images.
For large buttons, you have to specify the button height value corresponds to the button shape you are going to use,
Circular: 32
Enjoy :-)
