Navbar

March 21, 2012

Blogger how-to: add a 'Pin it' button to your posts


Pinterest is gaining so much popularity these days! It's a fun way to create online pinboards to classify all the lovely things you see on the Internet, but it's also a great way to promote your blog. Wordpress already offers the possibility to add a 'Pin it' button to posts, but Blogger is not offering it yet. However, I've got a quick and easy way to add this button to your template. I found the button's code on Spice Up Your Blog, but the following trick is all mine. Since SUYB only shows you how to insert it at the bottom of the post, I spent a whole hour messing with HTML to find a way to make the button appear next to the other social media icons. To simplify your life, here's how I did it ;)

1. Go to Blogger > Design > Edit HTML

2. Click the Expand widget templates box

3. PLEASE, PLEASE, PLEASE BACKUP YOUR TEMPLATE. And I mean it. I am not responsible for any damage you might do to your blog while attempting this, so keep a backup just in case you mess up. I always backup my template before playing with HTML and every blogger should make it an habit, too.

4. Ready? Press CTRL + F or Cmd +F and search for <div class='post-share-buttons goog-inline-block'>

5. Found it? Copy and paste the following code just below it:

<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;'/>
<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>

6. Preview the modifications, scroll down and see if the button is at the right place. The post footer should look like this:


7. Save, enjoy and start pinning! I hope you enjoyed this little tutorial!

Here's my Pinterest page. Feel free to leave me a comment below with the link to yours! I'm always on the prowl for awesome new boards to follow :)


13 comments:

  1. Thanks so much for the help!

    Melissa
    www.lovebugliving.com
    http://pinterest.com/mhufford/

    ReplyDelete
  2. The 'Pin it' button is totally perfect!

    here's my collection of pins: http://pinterest.com/abbyabbyabby/

    ReplyDelete
  3. This is a great tutorial - thanks!

    ReplyDelete
  4. Thank you so much! This was exactly what I needed and written so I could understand it!

    ReplyDelete
  5. Thankyou so much for posting this.

    I kept seeing these pinit buttons popping up on a few blogs and wondered how to get it on mine. I gave my blog designer your link and she did it for me (because I'm a complete idiot) with html.

    I linked back to your how to on my blogpost:

    http://www.balmainbeauty.com/2012/04/notd-u-i-by-mua-cosmetics-020412.html

    It was very helpful and so nice of you to share the how to :)

    Cheers,

    Karen

    ReplyDelete
  6. so easy to do! thanks!
    http://bisozozo.blogspot.com/

    ReplyDelete
  7. Thank you very much Noemie for posting this, it's exactly what I was looking for! I've added my Pin button to the share icons (on Bloggger) but they don't seem to line up. I see yours are the same - the Pin & the Google+ are just a little bit higher than the rest of the icons. Do you know how to fix that? Also, I coded my width to 63 to allow for the Pin count, it was tucked behind at 43. Thanks again!

    ReplyDelete
    Replies
    1. Hi! Are you using Firefox? I noticed that the buttons are perfectly aligned when viewed in Firefox, but the Google+ and Pinterest ones are slightly higher in Safari. Unfortunately, I don't know how to fix this...

      Delete
  8. This is fab!! Added it to my blog straight away :D. Thanks for sharing.

    http://pinterest.com/kieraab/

    http://artisticfascination.blogspot.co.uk/

    ReplyDelete
  9. I was also wondering where you got the twitter, Facebook, pinterest, etc buttons from on your side bar from? I follow another blog with the same ones & I absolutely love them but haven't been able to find them anywhere online..? If you could let me know that'd be super helpful :D. Thanks!

    http://artisticfascination.blogspot.co.uk/

    ReplyDelete
    Replies
    1. I made my social media buttons myself, but feel free to steal them and change the colours to fit your blog's design ;) hehe :D

      Delete
    2. Thanks :D after lots of messing about with html I've managed it!

      http://artisticfascination.blogspot.co.uk

      Delete
  10. Easiest tut I've found but one thing....the pinit and the google + are a tad higher. They are in the same location but jump up a little. Not sure why. I've left it there so in case you'd like to take a look?

    http://www.mypricelessfishers.com

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
Web Statistics