Ease is a crucial aspect of any successful social marketing campaign. If you make it simple for people to share your content, they are much more likely to do it.
For a business’s Pinterest strategy, this means including Pin It buttons on each and every image on your site, particularly if you are a retailer with products that translate well to the social network.
Once your content has been saved, it’s much easier for a customer to find it again later to complete a purchase, and of course, it’s now able to be shared with all their friends, and their friends’ friends, and their friends’ friends’ friends, and so on.
Unfortunately, all those little buttons can really clutter up your design, so some businesses are reluctant to make full use of them, particularly if they have a minimalist web design.
But that’s where the new Pin It Hover Button comes in. They work just like the standard Pin It buttons, but with one new nifty feature, it’s invisible until someone mouses over the image. It keeps your design clean, but still maintains the ease of use that encourages Pinterest users to share.
You can see an example right here on this page. Go ahead! Mouse over the image.
How to Activate the Hover Pin It Button
People have been using Hover Pin It buttons for a while, so why is this big news? Because before it was a more complicated process that likely required the help of a web designer to assist with coding. Now it’s a one- or two-step process depending on whether you are currently using the buttons on your site or not.
Ready to start using these buttons?
It’s a one-step process:
1.) Add the following line of code to the page where you want the button (or buttons) to appear.
<script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”data-pin-hover=”true”></script>
Voila! The button will appear on all images.
Already using Pin It buttons, but want to “upgrade” to the new hover variety?
You’ve got two steps ahead of you:
1.) Look on your page for the old code, which looks like this:
<script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”></script>
2.) Add data-pin-hover=”true” to the script tag, so that it now reads like so:
<script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”data-pin-hover=”true”></script>
Having Problems?
If the buttons aren’t showing up for you, there are many reasons this may be the case:
- Since there’s no “hover” interaction on touch screens, these Pin It buttons won’t function on mobile browsers.
- Images must be at least 80 x 80 pixels in order for the hover buttons to appear.
- Hover buttons won’t appear on CSS background images, images that have the data-pin-no-hover=”true” attribute set, images that have thenopin=”nopin” attribute set, and images whose src attribute starts with data:.
- If you were previously running Pinterest’s asynchronous script loader, you’ll need to add this line: p.setAttribute(‘data-pin-hover’, true);
Learn more in Pinterest’s Developers Guide or their Widget Builder.