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.
<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>
<a data-pin-config='beside' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title'><img alt='Pin It' title='Pin It' border='0' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' /></a>
- Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
- Now search template for <data:post.body/>
- 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/>
- Paste the following script just above </body> tag in your template
- Save the template changes › Done
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.