INSTALLING THE RIGHT PIN IT BUTTON FOR YOUR BLOGGER
If you’re on Blogger, and you have a cute, custom Pin It button that perfectly matches your design, chances are, you’re NOT using the best Pin It button for your blog! Whether you hired a designer or did it yourself, it’s likely that in our quest for beautiful blogs, we (because I am guilty too!) chose form over function. Today, I’m here to show you how to fix that!
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.
By using the official Pin It button from Pinterest, every time someone clicks to pin from your page, the title and alt text that you entered will automatically pop into the description for the pin! This give YOU control over your pin descriptions and can increase your pin’s visibility.
Here’s how to replace your Pinterest Save Button
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:
<script>
//<![CDATA[
var bs_pinButtonURL = "http://YOUR-PIN-BUTTON-URL.png";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// 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.
</script>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 and paste this line of code right above it:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>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!