Add Pinterest Pin It Button for Your Blogger Posts

Have you ever heard about Pinterest? If you are interested in social media, you may already know about it. It is the new addition to social network list and becoming more popular on the social web. But if you are not a person in alert, I'd like to include briefing about Pinterest here. Pinterest is a place where you can share and manage online images or videos found on the web. It allows you to create virtual pinboards to categorize content you found and uploaded. These content you uploaded or added to your pinboards will called as pins once after they added to your virtual pinboards.

How It Works?

Pinterest allows people to follow either someone's pinboards or that particular user with his all pinboards to get their pin updates. When you share links on Pinterest, it will always crawl for images or videos on particular link and if it does not contain any of it, you won't be able to pin it. If you wanna get more familiar, just think about people creating pinboards in real world to plan their weddings. People who are using Pinterest will always eager to share inspiring images or videos on their pinboards. So once people found your interesting images or videos, they will start pinning your content too. That's how Pinterest can help bloggers to drive traffic to their sites. So if you have got useful content with images or videos, why don't you let readers pin your content without leaving your blog?

Let Users Pin Your Content

For webmasters, Pinterest now offers pin it button for websites. It will help your readers to pin content just by clicking the button right from your page. So your readers will able to pin your posts and pages to their pinboards without leaving your site. As it is a virtual pinboard exist online, Pinterest will always do crawling for images or videos when someone share a link to their pinboards. Therefore if your posts or pages contain images or videos, you are ready to be pinned. But if you don't have images or videos on your posts, Pinterest button still allows you to specify external image or video to be shared when users pin your content.

Problem on Blogger

But the main problem is, you can't just implement Pin it button on your site. Pin it button does not crawl implemented page automatically as the Pin it bookmarklet do and you need to configure it individually. So official Pin it button always needs to specify exact URL of post and URL of the image or video on the page. But when it comes to Blogger, you can't edit each and every page to add Pin it button individually. So you can't make use of official Pin it button in Blogger. Eventhough you are able to edit your pages and configure Pin it button individually, it will a waste of time if you have many number of pages on your site. But here you will find an alternative way to pin your content which derived from Pinterest Pin it bookmarklet. So Blogger users still able to let their readers to pin content from their blogs. However it has no associated button count. Interested? Let's implement it in your blog.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button.

5. Search for following tag within your template

<data:post.body/>

6. Now add below button code snippet just after <data:post.body/> tag.

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='https://sites.google.com/site/mayuradocs/PinIt.png' alt='Pinterest Pin It!' /></a>
</b:if>

Color Indication Information:

   - Pin it Button Image URL

Here you can replace current image URL with your own Pin it button image URL.

I have listed image URLs for default and compact buttons below to select your preferred one.

Default

https://sites.google.com/site/mayuradocs/PinIt.png

Compact

https://sites.google.com/site/mayuradocs/PinItCompact.png

7. Now save your template and check your individual posts for Pinterest pin it button.

Credits: This Pin it button is a simple idea which derived from Pin it bookmarklet. But I would like to give credit to Ari Krzyzek for initiating this idea, eventhough I changed coding for Blogger platform.

Enjoy :-)