How to add your own custom Pin-It Button to your Blog

Hey Guys!
So I wanted to add a Pin-It button to my blog images, and I wasn't sure how, and then I figured out how, but I didn't want to use the ones that Pinterest provides (I'm such a rebel, I know), so I tried to find a tutorial on how to add your own custom pin-it button and it was actually kind of hard to find this tutorial!  And then the one I did end up finding wasn't  really that great, so here I am, making my own tutorial for you guys!  I hope you guys find this helpful!
Step 1- Create your pin it button using whichever photo editing site you choose. (I have some at the bottom of this post that you can use for free if you choose.)
Step 2- Copy the image url of your pin-it button.
Step 3- Go to your blog's template, and click "edit HTML".   Scroll down until you find the </body> tag.  Once you find it, insert the following code just above it:

var custom_pinit_button = "YOUR IMAGE URL";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> 
// Visit helplogger.blogspot.com for more widgets and tricks.

Replace YOUR IMAGE URL with the actual url of your image.

And there you go!  It's really pretty simple once you figure it out :)
Here are a few simple but different pin it buttons for you guys to use if you want to ;)

Hope you guys found this helpful!  If you have any questions or problems feel free to comment! 

No comments:

Post a Comment