Monday, March 12, 2012

Add a “Pin it” button to your blog posts or footer!

pinterest

Pinterest is an amazing website. It can be used to share inspiration and ideas on a global scale. It saves us the hassle of sorting through the junk that regular image searches provide. Want to see pictures of cute shoes? Type it in to pinterest and believe me, you will find lots and lots of really cute shoes.
Pinterest can also be used, as I'm sure most of you are aware, to promote your blog and shop by leading Pinterest users back to your site through their pins. The more people "repin" your images, the more new people will find their way on over to you. This can be a great way to grow your traffic if you do it right! The best way to do this would be to add a "pin it" button to your individual blog posts. This makes it easy and convenient for readers to pin your stuff. After trying and failing several times with the code that Pinterest provides, I finally found a working code (for blogger platforms) through BloggerSentral.  I'll first show you their easy way to put the "pin it" button at the bottom of your posts (but it only shows up when you're directly inside a post's page and is not visible from the home page) and then I'll show you my own imperfect but effective workaround for putting it in your post footer. (visible from everywhere on your blog.)  It involves a bit of geeking out with HTML code, but I promise it’s not as scary as it looks!

HOW TO ADD THE "PIN IT" BUTTON TO YOUR POST PAGES: 

1. Go to Design > Edit HTML from your blogger dashboard. You may want to download a copy of your saved template now, just in case anything goes awry.
2. Make sure the "Expand Widget Templates" box on the right top corner of the HTML window is checked.
3. Press CTRL+F and type in the following tag in the search window <data:post.body/> to find it within the HTML. Make sure you find the FIRST one of these tags, as it may appear repetitively throughout your code.
4. Place the following code directly below the tag:

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest button End –>
pinteresttutorial

Then hit “save template” and voila!

pinterest pin-it button horizontal
 This is what it will look like in the bottom center of your post pages. If you would like it aligned on the bottom right or left,  go to line 3 of the code and replace text-align: center with  text-align: left or  text-align: right 
That's it! Remember, you can only see this button in your post's pages, meaning it will not appear when you hit preview. Save your changes and then click on an individual post to see if it works. 

HOW TO ADD THE PINTEREST BUTTON TO YOUR FOOTER

I loved how simple it was to install the button to the end of my posts using the code above, but I wasn't happy with the fact that people who were just browsing on my homepage wouldn't see it. Thus, I began experimenting with ways to display it in my post footer. This is certainly more complicated (if you know of a more simple way, PLEASE let me know) but it works! 


1. Go to Design > Edit HTML in your blogger dashboard 
2. Make sure the "Expand Widget Templates" box is checked
3. Using CTRL + F, search for the </head> tag
4. Copy this code right before it:
<script type='text/javascript'>
function pinit() {
    var e= document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);
    document.body.appendChild(e);
};
</script>
pinteresttutorial2

5. Then, use CTRL + F to search for the tag <div class='post-footer'>
6. Copy the following code just below it: 

<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>
pinteresttutorial3
7.  Next you are going to go to the CSS section of your code. Look for the bit of CSS
that looks like this: 
/* Content
----------------------------------------------- */

Just below that, paste this in it: 
.pin_it_button {
    overflow: visible;
    width: 51px;
    height: 26px;
    margin-right: 1px;
    font: normal normal normal 11px/normal Arial, sans-serif;
    background-color: transparent !important;
    background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
    color: #CD1F1F !important;
    background-position: 0px 0px !important;
    background-repeat: no-repeat no-repeat !important;
    cursor: pointer;
}


.pin_it_button:hover {
    background-position: 0px -27px !important;
}
pinteresttutorial4
Save. AND YOU'RE DONE! I hope this was useful for someone and I apologize that the second way is more complicated, I’m really not an expert. If you have any problems or questions please leave a comment and I'll try to help you the best that I can! 


Happy Pinning! 

13 comments:

Maria said...

Ooh! Love this! I would totally add it to my blog if I got on pinterest more! And I've read a few different side to the legal issues that they've been having lately...

Danavee said...

I JUST DID IT! You are GOOOODDD! Thanks so much!!!

Madeline Grace said...

Love this! Thank you Daryl! I was wondering how people got the button on theirs! <3

Miss Samantha said...

this is really helpful -- thanks for sharing :) xx

Amy said...

ah thank YOU! I love pinterest tooooo! :) Just added it! youre the best!

Alyx said...

Bahaha, Mike was going to do this exact tutorial on his blog because I was putting a pin it button up on mine a couple nights ago! I'll have to tell him that there's no need!

Carolina said...

Thanks so much! I was trying to figure out a way that I could do this, and you helped me figure it out!!! :]

alex butts said...

And pinned - because I have a growing Pinterest blog to do board. DANKEEE!

Missy | Literal Mom said...

I love Pinterest too! Great tutorial! Thanks for your well wishes on my SITS day!

Polly Bland said...

thanks for the tip! I've been thinking about doing this lately! Maybe now I actually WILL! haha.

Hope you are well and enjoying Spring, my dear!

also.. you should come enter my giveaway!

love, polly :D

the littlest polly
Paulie Antiques

MKBurr said...
This comment has been removed by the author.
MKBurr said...

Nevamind... I skipped the first code thing and did the footer code instead, did what I wanted. Thanks Daryl!

Anonymous said...

thanks for share.

LinkWithin

Related Posts Plugin for WordPress, Blogger...