Pinterest & Blogging 101: Creating a Pin It Button

I decided to create a little mini-series on how to maximize your blog through Pinterest for all you fellow bloggers out there, particularly new bloggers. I never really realized how great Pinterest could be for my blog until I took a chance and decided to pin some of my recipes. I've been blogging for a year now, and let's look at my top 3 posts of all time, according to pageviews:

1. 3 Ingredient Crockpot Pulled Pork Sliders
2. Crockpot Cocktail Weenies
3. Crescent Sausage Breakfast Casserole

Each one of these posts has over 2000+ pageviews and counting, all because I decided to pin them to Pinterest. That may not be many pageviews for some bloggers, but it's pretty high for me! Pinterest can do a lot for your blog, especially if you like to post recipes, DIY ideas, cleaning and organization tips, etc. Last week I talked about how to verify your website on Pinterest. Today, let's talk about the "Pin It" button.

This is something I just recently did to my blog, but it was such a simple change that can help you bloggers out a lot. Installing a hovering "Pin It" button will allow readers to pin your content on the spot. People like convenience, and people, this is convenient. I like the hovering option so the button isn't so in your face and blatantly slapped across every picture. It's cleaner and less invasive.

How To Create & Install a Customized Hovering "Pin It" Button 

Step 1: Save this image to your computer

If you are happy with this image and want to use it for your hovering "Pin It" button, skip to step 6. To change the color, proceed to step 2.

Step 2: Upload a blank swatch of the color you want to use to www.picmonkey.com. You can Google the color or the HTML color code if you know it. The grey I use on my blog is #636363.

Step 3: Once you upload your color swatch, crop it into a perfect square. Next, select "Frames" and "Rounded Corners". Slide the "Corner Radius" button all the way to the right and select "Transparent Corners". You should now have a perfect circle.

Step 4: Go to "Basic Edits" and click "Resize". Make sure you select "Keep Proportions" and change the dimensions to 75x75. 

Step 5: Go to "Overlays" and select "Your Own". Upload the "P" that you saved in step 1. Use the color picker to choose what you want your "P" to look like. Move and resize your "P" to your satisfaction, and then save the image to your computer. 

Note: I opted for the words "PIN IT" instead of the "P" symbol. If you want to do this too, just insert the text into your cropped, circular color swatch. This is what mine looks like: 

Step 6: Once you've saved your button, upload it to the photo sharing site you use (I use photobucket). Copy the direct link. Next, copy the code from the scrolling text box, and place the direct link of your image in the yellow highlighted portion of the code below.

<script> //<![CDATA[ var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMezy3dzZAbSwT9BzwjEcV4-4LPenXXt6Mq7lDXPccnKeCoWxFlK7PWcda3IO9IRXIIfOwDhYO2BHT7y8xpegOpffzy9heMe-b1eGU_Jr5SCfiVTfbFa0yeklnBJ20NRmFYj8ngtHpAkt/s1600/pinterestx1_72.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>

It will look like this:

<script>
//<![CDATA[
var  bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMezy3dzZAbSwT9BzwjEcV4-4LPenXXt6Mq7lDXPccnKeCoWxFlK7PWcda3IO9IRXIIfOwDhYO2BHT7y8xpegOpffzy9heMe-b1eGU_Jr5SCfiVTfbFa0yeklnBJ20NRmFYj8ngtHpAkt/s1600/pinterestx1_72.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>

Step 7: Go to your blogger dashboard and click "Template". Select "Edit HTML". Control F or Command F to find <body> near the end of your template. Paste the code above <body>.

Note: Before making any HTML changes, I recommend backing up your blog template, just in case. 

Step 8: Click "Save Template" and go look at your blog!

If for some reason it doesn't work, try pasting the code from either this webpage or this webpage. The codes are almost identical on each site, but sometimes depending on where you copy and paste the code from can make the button work or not work. I'm not going to pretend to know why, but try the other websites if the above code doesn't work!

Step 9 (optional): The "Pin It" image will by default appear in the center of your image. If you prefer that it appears in a corner instead (I chose the bottom right corner), find this line of code that you pasted:
var bs_pinButtonPos = "center"; 
and replace "center" with one of these options: topleft, topright, bottomleft, or bottomright.

I hope this helps! Having a hovering "Pin It" image can do wonders for your blog! Stay tuned as I wrap up this mini-series next week with my favorite Pinterest tips and tricks!