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 :-)
Hi Mayura,
Informative post indeed, and good to see a post on your blog after very long - after all, why not - today is a especial day being your birthday, so all new beginning in this New Year :)
Yes indeed, a lot of good changes have come around with Pinterest, and I have most of these buttons on my browser, and even on the images, which makes it easy to share the images directly on the boards you like. I love the fact that they keep bringing about changes off and on for a better user experience.
Thanks for sharing this with us, and have a nice day ahead. Wishing you every success and happiness in this New Year, and a Happy New Year and Happppppy Birthday once again :)
Hey Mayura! Great to see you sharing your knowledge again!
This is a great post and one I know a lot of folks will enjoy reading. As you know I love sharing your articles and have already done so. I'm sure you will be helping out some bloggers with your easy to understand tutorials!
And btw, Happy Birthday my friend!!
B
Great way to showcase ones images for Pinterest. I love how this one hovers over each and all images not just one as I see on many places online.
Pinners need it easy to pin images along the way and this makes it really easy! Thanks for sharing it with us and I will have to try it on my blogger blog. Pus: Happy Birthday too!
Seems like a great idea! Thanks for the info Mayura. Will have a closer look at it when I get back into the Blogosphere. Nice to see you posting again and hope you had a great birthday. Cheers!
Hi Harleena,
Glad you find it informative dear :) Ha ha... You got it right! I had this pre-written and scheduled to be published on this day ;)
Isn't it nice of Pinterest team to bring new changes for online publishers? Nice to hear you have it already implemented, and I find it very convenient as well - pinning made easy.
Wishing a happy and prosperous New Year packed with lots of wonderful surprises for you too, Harleena :) Thanks again for your birthday greetings as well dear.
Enjoy your weekend ahead :)
Cheers...
Hey Brenda,
Nice to see you too, dear :) I'm glad to hear you enjoyed this and find it can be helpful to many as well.
Of course, I know that for sure, 'cause you never cease to share interesting content you come across :) Thanks again for being awesome.
Ha ha... Thanks for the greetings as well dear :)
Cheers...
Hi Lisa,
I'm with you there, and love how easy it is to pin on hover too :) So we don't have to scroll, pin and scroll back or spend extra time on pinning.
I hope you will find it much better after having it implemented on your Blogger blog as well :)
Thanks again for the birthday greetings dear :)
Cheers...
Hi Debbie,
Nice to see you here while you're on the break too dear :)
I hope you can experiment with it when you back rockin' on the blogosphere following the wonderful break your are having right now :) Indeed, I had a great birthday and thanks again for your greetings as well dear.
Cheers...
Hi Mayura,
that's a great tutorial, thanks for sharing.
You know, 2 years ago, I have set up my Pinterest account, and shared few images, after having created 2-3 boards. And that's all.
I know many bloggers are very active there, but I simply don't have the time/will to invest some time at Pinterest.
I guess this is one thing to do in 2015.
Thanks for your post, and good to have you visited your blog for the first time. :)
Hi Erik,
You're always welcome and I'm glad you enjoyed the post as well mate :) Yesterday I read your post at Lisa's place and now here you are. Nice to see you :)
Now that's 2 years of Pinteresting, eh? :) I'm not active on Pinterest much either, but share away interesting stuff as I come across. As you mentioned, there are so many Pinterest lovers, so at least we have to make our content "Pin Easy" for them. Isn''t it? :)
I hope you will spend more time on Pinterest this year mate :) And... I'm sure you will realize it's a place to find inspiration as well.
Cheers...