Adding a Pin It Button to Your Blog

Last month, one of my favorite bloggers, Kaitlyn, did a tutorial about how to add a Pin It button to your blog so when you hover the cursor over any picture in any post, the pin it button would appear.

Well, I followed all the steps to add this button, including creating my own personal pin it button. After I added the HTML to my blog, saved it and closed the html editor and I got a pop up that said "Pin It On Hover Button:Please restore the backlink"

So I tried again and again.  I tried adding a space before, then after, then the location of the code, and on and on.  I couldn't figure it out.  So I emailed Kaitlyn.  Come to find out, I couldn't add the Pin It button because I use a Dynamic View blogger template :(

So I went to my good friend google and searched for a way to do it if you used Dynamic View.  I came across these directions.  The code appears to be the exact same one that Kaitlyn had but it worked on my blog!

Here is how I created and added a Hovering Pin It Button to my dynamic view blogger template :)

First, I created a custom Pin It button using Kaitlyn's instructions.

Begin by saving this image to your computer.

Go to PicMonkey.com and upload a blank swatch of the background you want to use.  I went to the Pantone website and chose Orchid Pink

Once you upload it, crop it into a perfect square using the dimensions of 75 x 75. Then select "Frames" and "Rounded Corners".
Slide the "Corner Radius" knob all the way to the right & click "Transparent Corners". This should give you a perfect circle.
Go to "Overlays" & click "Your Own". Upload the "P" that you saved above. Use the colorpicker to choose what you would like your "P" to look like.  I used a nearly white color.
Move and resize your "P" until you are satisfied, and then save the image as a .png on your computer.
Here is what mine looks like:

Once you save it, upload it to the photo sharing website you use.  I use Photobucket but a list of other photo sharing websites can be found here. Now, go to your Blogger dashboard and click Template which should be along the left hand side of the screen.  Then click edit HTML.  
Locate the code ' </body> ' (it should be near the end of the code, use Control + F if you can't find it).

Paste the code below directly above </body> - Do not add any extra lines between the end of the code and </body>

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-HfUSaJfr7t4/UNVXY5qwP9I/AAAAAAAAHyA/amPXEMKhKJM/s1600/pinterest-icon+(2).png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://lordhtml.opendrive.com/files/MV81OTY2MjE0X01Rcmg5/pin.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href='http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html'>Pin It button on image hover</a></div>

If you created a custom pin it button, paste the direct link in the highlighted spot in the code.  Make sure to leave the quotation marks.

So my code looked like this:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://i1282.photobucket.com/albums/a534/Carolinafirefly/Pinitbutton_zpsf9f26880.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://lordhtml.opendrive.com/files/MV81OTY2MjE0X01Rcmg5/pin.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href='http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html'>Pin It button on image hover</a></div>
</body>

There you have it!  Complete directions for creating you own Hovering Pin It Button if you use Dynamic Views blogger template.  

If you end up having a problem with the code from this post, I suggest going to the post linked above and copy the code from there.  I don't know why but copying code from one website worked and one didn't even though the code appeared to me to be the same.  I'm sure there is extra code in there somewhere but I'm not fluent in computer code so I can't tell you why.

Thanks to Kaitlyn, google and Lord HTML for helping me bring you this post :)