Sunday, August 5, 2012

How to add pInterest button to Blogger posts

I got this easily done by referring to Bloggers Sentral's tutorial.

Only two simple steps:

Step 1
Locate the <data:post.body/> code in the HTML template.

Step 2
Copy and paste the code below just after the  <data:post.body/> tag.
You can change the "count-layout" attribute to either horizontal, vertical or none (no count)

<!-- Pinterest Start -->

<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&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='' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;src&#39;,&#39;; + Math.random()*99999999);
<!-- Pinterest button End -->
Pin It

1 comment:

  1. This doesn't appear to work in some Awesome Inc. templates. People have mentioned the problem on bloggersentral as well, but gotten no reply. Can you think of an explanation? It works on your blog and you use Awesome Inc., but I've followed the directions exactly and nothing appears.

    A thought: I notice you have many buttons below your posts (stumbleupon, reddit et cetera). Do some Awesome Inc. templates prevent this in their code? I'd love to have all these buttons. I'm certain it would improve my traffic, and I'd be very happy to return the favour. My blog is quite popular and I'd love for you to do a guest post, whether or not you find a work-around. My blog is mostly read by aspirant/indie writers. Lots of them use blogger and these limitations are absolutely ridiculous. I'm sure they'd all like to learn a work-around or two.