How to Add a Custom Pin It Pinterest Button To Your Blog Photos

How to Add a Custom Pin It Pinterest Button To Your Blog Photos


Pinterest is so undervalued I think when it comes to promoting your Blog but if you use it correctly and to your advantage it’s a great way to reach a wider audience. This Tutorial will show you how to add a custom Pin It button to your Blog enabling readers and yourself to Pin images directly to Pinterest. I have created a few Pin It buttons for you to use or you can create your own it is entirely up to you. 

The end goal is that when people hover over your images in your blog post area it will look something like this:

How to Add a Custom Pin It Pinterest Button To Your Blog Photos

This Tutorial is 100% customisable as you can change the Pin It button image and it’s alignment on the blog photo to however you prefer.

1. You will either now need to create your own ‘Pin It’ button or choose a design from the ones I have created below. The designs below will appear on a transparent background. (If you would like your own custom design contact me on Twitter for prices – @neesharees)

Free Pinterest Pin It Buttons in Monochrome

White Heart – Download

Black Heart – Download

White Circle – Download

Black Circle – Download
White Rectangle – Download
Black Rectangle – Download

2. Now you need to upload your chosen ‘Pin It’ button to an image hosting website. I find Photobucket does the job just fine. If you are using my designs you can just them direct from my photobucket account using the Direct option under Share Links to the right of the image.

3. Go to your Blogger Account > Template > Edit HTML

4. Click Ctrl & F and a search bar will pop up, Type into the search bar </body>

5. Directly above the </body> tag you will need to copy and paste in the following code:

function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,”s”+size+”-c”);
var thumbnails = blogGadget.getElementsByTagName(“img”);
for(var i=0;i

6. To use your own custom button you will need to replace the URL in the 3rd line of code to the URL of the button you have uploaded.

7. To change the alignment of the Pin It button you will need to edit the 5th line down where it says ‘center’ you can change this to any of the following if you would prefer:
‘topleft’
‘topright’
‘bottomleft’
‘bottomright’

8. That’s it. You’re done. Now click ‘Save’ and view your Blog to make sure the code is working.

If you found this Tutorial helpful please don’t forget to comment and share. Happy Pinning!

Instagram | Bloglovin’ | Twitter | Pinterest

Follow:
Share:

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *