Wednesday, August 7, 2013

Who doesn't care about social activities? If you’re alert about social networks, definitely you should know about Pinterest. Pinterest concede you to pin (share) your favorite images with others. Now you can add Pinterest default ‘Pin it’ button to your blogger blog. By adding Pinterest pin it button inside of your blog posts or even homepage, You allows your readers to share images in your site directly with their friends without having to leave your blog. Once anyone click on Pin it button, a pop up window with all images on particular page will open. Then he/she can choose what image(s) should be pinned to their board (See image below).

Pinterest-Pin-it




How to add Pinterest Pin it button to Blogger post pages


Like adding twitter tweet button to your blog, you can add Pinterest Pin it button to blogger post pages simply.

1: Sign in to your Blogger account.
2: Go to Dashboard >> Template and Backup your template.
3: Then click on "Edit HTML" button. Find below HTML code in your template using shortcut keys, Ctrl+f.

<data:posy.body/>

4: Now you will see similar two codes are appearing on your template.
Add below code just above (before) of first <data:post.body/> code in your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
        </b:if>

If you want to display Pin it button on homepage and post pages, just remove above blue color two lines from your template.

Demo:-



5: Save your Template.

You can see Pinterest Pin it button appears just below of post title.If you remove above blue color code,it will appear both homepage and post pages below of post title.

Enjoy!




Subscribe to Pro Blog Tricks Newsltter and receive Updates directly to your Mail box.

I take your privacy very seriously

6 comments:

  1. This worked great once I figured out "posy" was supposed to be"post" Thanks for sharing this.

    ReplyDelete
    Replies
    1. how can i pinned my popular post on top of blogger page????
      need your help.
      i want to pinned one post top of my blog...

      Delete
    2. Neelkamal, Follow above steps and add the Pinterest pin it button's code above of the <data:posy.body/> code,which will display pin it button top of the blogger page.

      If you want more help,just leave it here Neelkamal. I will help you.

      Delete
  2. Hi guys I try to follow you but I couldn't find the on blogger.
    I don't know how to do it.

    ReplyDelete

Comments posted on Pro Blog Tricks are moderated and will be approved only if they are on-topic and not abusive. Avoid including website URLs in your comments.

 
TEMPLATE ERROR: Invalid data reference mobile: No dictionary named: '' in: ['blog', 'skin', 'view']