Book Reviews

Book Reviews
Book Reviews

Clipart

Clipart
Clip Art

Social Icons

Social Icons
Social Icons

Adding a Pinterest Hover Button to Blogger

This tutorial for Blogger blogs will show you how to fix a disappearing custom pinterest hover button AND how to install an official pinterest hover button. GradeONEderfulDesigns.com

Have you noticed your custom Pinterest hover button is missing? If you have a Blogger blog then go have a look! Is it still there?


I just realized today that the ones I installed on my custom designs have stopped working. In fact, they've completely disappeared!

After a whole lot of research I now know how to fix things, but to be honest, I'm not really sure why the problem is there to begin with.

Before I give you the directions and code you'll need, I'd like to point out that using the official Pinterest button, rather than a custom button, is a better way to go.

I know, I know, everyone wants their hover button to match their pretty blog design (I'm totally like that, too!) but it's much better to go with the official button.
 

Why Should I Use the Official Pinterest Hover Button?

When you upload your images you should always add a title and alt text (read this post to learn how and why). When someone hovers their mouse over your image the title will show up. And when they pin it, your alt text will automatically show up in the pin's description.

That's a very good thing. More people are likely to repin your image when you have a great description, which in turn drives more traffic to your blog.

But here's the catch: With the custom button your alt text will NOT show up in your pin description. Can you see my sad face?

So...having forewarned you, I'll give you directions for adding the official pinterest hover button AND the fix for the custom button.
 

How to Add the Official Pinterest Hover Button

1. Back up your blog (see this post to find out how to do that).

2. Click on "Edit HTML".

3. Click anywhere on the code and then press "Command F" or "Control F" to open a search box.

4. In the search box type "</body>" (not the quote marks).

5. Right above "</body>" you'll probably find the most commonly used code for custom pinterest hover buttons and that's the one by BloggerSentral. It looks like this:


<script>
//<![CDATA[
var bs_pinButtonURL = "https://1.bp.blogspot.com/-7qYc7AdlP38/Vt-xu6omyDI/AAAAAAAA6iw/rxtwh_z2c-8/s1600/Pin.png";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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>



If it doesn't show up above the closing body tag, then search for "bloggersentral.com"

6. Once you find the code, delete it all.

7. To add a round button add the following code just above "</body>":

<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 preview to make sure your blog looks fine (you won't see the button yet) and then save.

8. To add a rectangular 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>

Hit preview to make sure your blog looks fine (you won't see the button yet) and then save.

9. View your blog and check your images to make sure everything is working properly.

Pinterest Button Not Showing Up?

Then trying pasting the following code right above your closing head tag "</head>" (don't include the quotes):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

If you LOVE your custom button and want to keep it, then read on.

How to Add a Custom Pinterest Hover Button

1. Follow steps 1 - 6 up above.

2. Go to Georgia Lou Studios, scroll down, and copy the code "For All Templates Except Phoebe and Hayden". Thank you to those great gals for figuring this out!

3. Paste the code above "</body>".

4. Don't forget to replace

"http://3.bp.blogspot.com/-zLhq96zYiuc/VCxR6pWcgsI/AAAAAAAAAZc/mmx3OzWeKko/s1600/pin_it.png"

with the url of your own custom button.

 5. Preview, make sure everything is fine, save and view.

That's it, my friends! If I designed your blog and you'd like me to do one of these fixes for you, just send me an email (no charge :).

If I didn't design your blog for you, but you'd like some help, let me know and I'll pop it in for you ($5).

Looking for more Blogger tutorials? I've got lots!


Visit Grade ONEderful's profile on Pinterest.

2 comments

  1. I love your tips! Thank you! I had noticed my PinIt button was gone. I will have to add this to my to do list!

    ReplyDelete
    Replies
    1. Thanks, Lori!
      Yeah, it was weird when they started to disappear, but it's an easy fix.

      Delete

Thanks for leaving a comment :)