Pinterest & Blogging 101: Creating a Pin It Button | Anchors Aweigh

Pages

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.




It will look like this:

<script>
//<![CDATA[
var  bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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!

8 comments :

Karen Koblan said...

I just tried this and I keep getting an error message that says "please restore the backlink..." I have no idea what that means. Any ideas?

Chelsea Phelps said...

Hi Karen! That happened to me the first time I tried. Try pasting the code from one of the other websites I listed. For some reason that can make a difference...no idea why! Also, I am replying on the comments because you are listed as a no-reply blogger. To fix that, follow this tutorial: http://www.anchorsaweighblog.com/2013/06/are-you-no-reply-blogger.html

XOXO
Chelsea
http://www.anchorsaweighblog.com

Bailey @ Becoming Bailey said...

Thank you Chelsea! I've been wondering how to do it and I tried Googling it myself and didn't have very good luck. Your tutorial was SO easy to use! :)

Susannah said...

This is an AWESOME tutorial and it's really going to help so many bloggers!!! :-)

Amie said...

Thanks! I didn't know how to do this, so this is very helpful! And hopefully it will be great for my blog too!

mje said...

Great idea, I haven't started blogging about baking yet but I plan to soon!

Lis-ita said...

Great, thank you for sharing! It was very helpful in creating the button but I have WordPress so I have to install differently. But it got me going!

Kirstie Semler said...

I have been trying to figure out how to do this! And it worked! thanks for the awesome tutorial!

LinkWithin

Related Posts Plugin for WordPress, Blogger...