14 July 2012

Add Pinterest "Pin It" Button with Counter to Blogger

Advertisements

Now all we know that we can use Pinterest Pin It button to promote our blog same as Facebook's Like button. So most of you are desperate to add these 'Pint It' buttons to your blog.

Step 1

Go to your Blogger Edit HTML page and click on Expand Widget Templates.

Press CTRL F and look for
<data:post.body/>

Step 2

Now paste any one of the following code BELOW  <data:post.body/>

Vertical Pin It Button

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; 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>

Horizontal Pin It Button

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</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>

Save your template.

If you want to place the Pin It button just below the Post titles the paste above code just ABOVE <data:post.body/>

Related Posts

7 comments

July 20, 2012 at 8:21 PM

I can't find . Should I be using a certain template or something??

July 20, 2012 at 11:50 PM

Hi Tammy

You can add Step 2 code below your post footer as follows.

In your template look for

footer-line

You will get following code. It may vary depending upon the template you are using.

<div class='post-footer-line post-footer-line-1'>

Just place Step 2 code BELOW above footer-line code.

July 21, 2012 at 3:48 PM

Thank you so much. That worked!

August 15, 2012 at 12:49 PM

Is there a way to scoot it to the right just a little bit so it lines up with my photo? My blog is here:

http://www.thetwobiteclub.blogspot.com

August 15, 2012 at 9:19 PM

It's delicious!

It's possible dear. Just change the value at

style='margin-left:-93px;

from Horizontal Pin It Button code

May 4, 2013 at 5:23 AM

Hi,
When I open Edit HTML page, there's no option to "Expand Widget Templates." I have just started my blog (literally- about a week ago)- have there been changes to blogger since this post? I see "Jump to Widget", "Edit Template", "Format Template". Also, when I click on CTRL F, nothing happens. Any advice you can offer would be greatly appreciated!
Thanks!
Karli at creatingathoughtfulclassroom@gmail.com

May 10, 2013 at 12:29 AM

Yeah Blogger now removed this. Dont worry.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More