Pinterest Pin It Button
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?
○ 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
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,
◌ 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.
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.
1. Search your template or source code for the following tag,
2. Now customize the below script to your preferences and place it right before the </body> tag.
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,
- 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,