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:
and others to a file hosted on DropBox:
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
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:
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:
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.