In case you are unfamiliar, Pinterest is an online pinboard that allows
users to share images they find over the web -by “pinning” them on their
boards. The pinned image is linked to the original webpage or blog
post location, giving users the chance to visit the source directly.
A Pin It button is what Like button is to Facebook or Tweet button
is to Twitter, as it allows users to share your posts without having to
leave your blog. It also displays how many times a blog post has been
shared.
Now let's see how to add this Printerest Pin It button to blogger.
How To Add Pinterest Pin It Button With Counter To Blogger?
1. Go to
Blogger Dashboard >
Template >
Edit HTML.
2. Back up your template.
3. Check the
Expand Widget Templates checkbox.
4. Search
(Ctrl + F) for the following code tag in your HTML.
<data:post.body/>
Note:
There are two instances of the tag present in your template. Locate the the first (from top) one.
5. Copy and paste the following code immediately below/after it:
<!-- Pinterest Button Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest Button End -->
6. Save.
Button configuration:
- You can customize the layout
of Pin It button & counter by changing the value of count-layout
attribute in step 5. Refer to the table below for the available types
and their settings.
Button type
|
count-layout value
|
margin-left (in line 5) value
|
 |
vertical
|
-46px
|
 |
horizontal
|
-93px
|
 |
none
|
-46px
|
Button repositioning:
The steps above positioned the button on bottom left of each post. You can change the position if you wish:
- Position it on top of post
Place the button code before <data:post.body/>, instead of after.
- Position it on the right
Change the float in the code from left to right.
