I tried quite a few codes available on the net, and this one seemed to work well, the rest are either outdated and not working, or if the button works the image doesn't show up, so don't waste your time trying them out. The steps to add the Pin it button, with or without counter, to your blogger posts are mentioned below.
<data:post.body/>Now paste the below code after it, if you want the button to appear on top of the post then insert this code above '<data:post.body/>' -
<!-- Pinterest button Start by BloggerSentral.com -->In case the Pinterest script in the above code appears twice in your template, then delete this line from the code -
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>
<!-- Pinterest button End -->
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
Also the Pin it button can be aligned to 'right', 'center' or 'left' in the above code, change this part -
text-align: left;'
Save the changes and the Pin it button should appear in your blog posts. Once readers click on 'Pin It', they get to select which image to pin, if there are multiple images in your post.
Share this Blogger Template:
0 Response to "Add Pinterest 'Pin It' Button to Blogger Posts"
Post a Comment