How to Add a Pinterest Button on Blogspot to Share Posts?

3

Pinterest is very-very popular nowadays to share images and blog posts. On many blogs, you have seen the Pinterest button to share images which have links of a blog post on Pinterest. Many writers have created a Pinterest button in different ways and effects. In this article, I will cover how to add a Pinterest button on Blogspot which has share behavior like Twitter tweet button. Button near your blog post will able to share post thumbnail only if a post has an image, post title, and post permalink. For this purpose, I have modified or customize Pinterest default button available on Pinterest goodies. You can see the button in action on this blog.

pinterest share button

Original  Pinterest button:

<a data-pin-config="beside" href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Customized Pinterest button:

<a data-pin-config='beside' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title'><img alt='Pin It'  title='Pin It' border='0' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' /></a>

How to add a Pinterest button on Blogspot?

  1. Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
  2. Now search template for <data:post.body/>
  3. If you want to add a Pinterest button above post then insert the code above <data:post.body/> or if you want to add a Pinterest button below post then insert the code below <data:post.body/>
  4. Paste the following script just above </body> tag in your template
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
  5. Save the template changes › Done

Conclusion:

After completing all steps explained above you can see a Pinterest button on your blog that works perfectly for each post on your home page and show count per post.

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.