Has Your Pin It Pinterest Hover Button Suddenly Stopped Working?

how to fix custom pinterest share hover button 2016 blogger platform tutorial

I recently noticed that all of a sudden the "Pin It" button that appeared when you hovered over my blog pictures disappeared. I admit I haven't been very good at sharing my own content on social media lately, so who knows how long ago it stopped working. I decided to create this guide for any fellow bloggers who might also be experiencing this. It is really easy to fix so you (and your readers) can go back to sharing your pictures on Pinterest in no time!


I tried my best to explain this in the simplest terms possible. If you have prior web coding experience or basic HTML knowledge, this will be super easy to understand. If you don't have any coding knowledge or don't care about the why/how's, don't worry, you can still follow this tutorial and fix your Pinterest hover button. I've included screenshots and an easy step-by-step guide so you can fix this in less than 10 minutes. :)

Why did my Pinterest Hover Button stop working?

(if you don't care about the why's or how's, skip down to How to Fix)

Basically, someone at some point posted a tutorial on how to get a Custom Pinterest Hover button on your blog images. Nearly every blog out there reposted this same method on their own site verbatum. If you search for tutorials on Google, you will find the exact same code in hundreds of sites. Over and over. This code worked perfectly fine, except now it doesn't. 

When I first implemented it on my blog (years ago), I just copied and pasted it mindlessly. Since noticing it was no longer working on my blog, I decided to take a closer look at it. The problem is really simple. The part of the code that is highlighted in the picture below is linking you to the full script that enables you to have a Pinterest hover button. 


Most tutorials you find on Google are linking to the exact same file (bs_pinOnHoverv1_min.js)! Some link to a file hosted on Google:
http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js
and others to a file hosted on DropBox:
https://dl.dropbox.com/s/jyzhf51ccqf7t9b/bs_pinOnHoverv1_min.js

The problem? Tons of people are using the same code and direct linking to the same file! Instead of telling you to upload the javascript file yourself or implement the full javascript code into your own blog, these tutorials were all telling you to hotlink to the same file. Over time, that caused a lot of bandwidth usage and both files were taken down:
So, if you were also using the same code as me (the one shown above), then that's why your Pinterest hover button isn't working anymore. Your code is linking to a file that no longer exists. 

Why is it wrong to link to files directly this way?

1. It's rude. 
You are using someone else's bandwith by direct linking a script that is hosted on an outside server. You wouldn't "hotlink" images on your website so you shouldn't do it with script either. (To learn more about hotlinking, visit this site or do a quick Google search). Hosting isn't free so you are basically stealing bandwidth. And yes, there are places where you can host files for free (such as DropBox) but they offer limited bandwidth. And if a lot of people are also using that same link, it may get taken down (such as in this case).

2. You will most likely run into problems and features in your website may will eventually stop working. 
Since you are not hosting the code yourself, you are vulnerable to changes made to the script by whoever is hosting it. The script can get changed, deleted, the host's server may be down unexpectedly or so many people may be direct linking the file that it may cause an overload of traffic, (again, as was the case with the Pinterest hover script.)

How to fix your Custom Pinterest Hover Button

Include the complete javascript code in your blog's template styling

Technically, this is bad practice when it comes to web coding. You shouldn't "hard code" and put all your styling into the main HTML pages. Your CSS (visual styling) and Javascript (functionality) coding should be housed separately. However, the particularity of the free Blogger platform is that you can't upload .css or .js files. You can only upload images and videos and have limited customizability for your HTML coding. If your blog was a self-hosted Wordpress, then it would be a whole different story.

So, it's not the "best" way to do it when it comes to proper web coding, but it's pretty much your best option if you're using the Blogger platform. Don't worry, though, the code will work just fine if you implement it this way!

Note: Before making any changes to your template, back it up first just in case anything goes wrong! Go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file to your computer.


Step 1: On the Blogger platform, go to Template > Edit HTML

Step 2: Find the code for the Custom Pinterest Hover Button

You can use the shortcut Ctrl + F (or Command + F on Apple computers) and search for something like "pinButton". The code should be somewhere right before your body tag ends (before "</ body>").

You should find a code that looks like this:


The first part of the code is fine. Leave your code as it is. If you recall when you first implemented this into your blog, where it says "YOUR PINTEREST BUTTON URL" you will have the address to your desired Share on Pinterest image. On the line below that, you have the orientation of the button-- whether it's centered, on the left or on the right corner of your images when you hover over them. 

On the second part where it says "URL DIRECT LINKING TO THE SCRIPT" you will probably find either this:
http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js
or this:
https://dl.dropbox.com/s/jyzhf51ccqf7t9b/bs_pinOnHoverv1_min.js

These are the expired addresses that are making your code fail. You might even have a different address than those two. If your Pinterest hover button has suddenly stopped working, odds are you probably may have another address that is also outdated.

Step 3: Replace Your Code and Save Your Template


To fix the problem, replace this part of the code:



With this:



Then click "Save Template".

Your custom Share on Pinterest hover button for images should be working fine now!


I hope this was helpful to you. If you have any questions feel free to comment below and I will do my best to help you. Remember, this is a solution for blogs on the Blogger platform

xx Coco

2 comments

  1. Thanks for sharing this awesome tutorial I have to say on Wordpress its so easy just download a plugin

    Candice | Beauty Candy Loves

    ReplyDelete
    Replies
    1. I regret so much not starting on Wordpress. It's so much superior in terms of customizability and performance. Blogger is a super simple platform, which is great and I thought that was best, but it's very limiting.
      Thanks for stopping by!

      Delete

Thank you so much for your comments, I love reading them and checking out new blogs. However, please refrain from posting spam (follow for follow, giveaways, ads, etc.) Thanks for stopping by!

Follow @thebeautymilk on Instagram

Licencia Creative Commons

The Beauty Milk is licensed under a Licencia Creative Commons AtribuciĆ³n-NoComercial-SinDerivadas 3.0 Puerto Rico.
This website utilizes SkimLinks as of 2013. Read Privacy Policy. View Credits.