Every single Blogger blog I have seen with a custom Pin It button uses the code from Bloggersentral. It's great code, if you want a custom button that perfectly matches your blog. Its one small downfall is that it doesn't use the image title or alt text when it creates a pin. So you end up with a pin that might only have the post title (or in some cases, only PART of the post title) in the pin description. This is bad. B.A.D. But there's an easy fix!
- Upload your image to your blog post.
- Click on the image, then click properties.
- Enter a title and alt text for your image. The title is what will show up on your blog when someone hovers over your image. The alt text is what will show up in the pin description. (I often use the same thing for the alt text that I use for the search description in my sidebar.)
- Click OK.
Here's how to do it:
Rule #1 is to always, always, ALWAYS back up your blog template before you go messing around with it! That way if you mess up, you can fix it!
Find your current Pin It button code and delete it.In Blogger, click on Template, then click Edit HTML. (Don't worry, you CAN do this!)
Click inside the HTML code box and click Ctrl+F or Cmd+F to open a search box. Search for bloggersentral, and you should find code that looks almost exactly like this:
var bs_pinButtonURL = "http://YOUR-PIN-BUTTON-URL.png";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
Highlight this entire section of code and delete it.
Add the Pin It button code directly from Pinterest.Search in your code for </body> and past the code below directly above it. (Hit enter if you need to add a blank line to do this.)
For a rectangular Pin It button use this code:
<script async="true" defer="true" data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>
For a round Pin It button, use this code:
<script async="true" defer="true" data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>
Hit save, and view your blog to make sure it is working! If your new Pin It button works fine, but something else is broken (like maybe a Facebook pop-out Tab on the side or a slideshow), it could be that you deleted the jquery code that is shared by several different widgets. All you need to do is search for </head> and paste this line of code right above it:
Is it the cutest Pin It button, no. Can you customize it? No. And here's the thing, Pinterest doesn't really want you customizing the button. They want their branding out there, not yours. But it works, and it allows you to enter Alt Text so that your pin descriptions are exactly how you want them, no matter who pins from your blog!
For more tech tips & tutorials just for bloggers, check out my Tips for Bloggers board on Pinterest!