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.

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 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, so that's what I'll show you here.

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:

var bs_pinButtonURL = "";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
<script src='' type='text/javascript'/>
<script id='bs_pinOnHover' src='' type='text/javascript'>
// This Pinterest Hover Button is brought to you by
// Visit for details.
// Feel free to use and share, but please keep this notice intact.

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

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="//"></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="//"></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='' type='text/javascript'></script>

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.


  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!

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


Thanks for leaving a comment :)