Simple Blogger Tutorials

Add Pinterest Pin it Button to Blogger (Updated)

Pinterest have launched their sharing buttons, why not have it for Blogger. “Pin it” buttons has counters and comes in three different sizes. But before you add it to Blogger posts, let’s see what you have to do first.

For those who don’t know about it yet, Pinterest allows you to organize and share your interests on a virtual pin board. It has become famous because not only this site is beautiful but also is very easy to share and manage your “pins”. You need to use it to believe it.

Pinterest Pin it button for Blogger

Step 1: Login, go to your blog’s dashboard > Template tab.

Step 2: Click “Edit HTML”, check “Expand Widget Templates” and find </body>. Before it add the below script:

<script type="text/javascript" src='//assets.pinterest.com/js/pinit.js'></script>

Step 3: Find <data:post.body/> and before/after it (or on both places) add the following code after generating it.

Button options

Layout:

(?)


Float:

Show for:

Preview and code

Ajax Loading
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;"> <b:if cond='data:post.firstImageUrl'> <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title'><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It' /></a> <b:else/> <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It' /></a> </b:if> </div>
</b:if>

Step 4: Preview your template whether it has been added correctly or not and then save it.

Attribution

  • I have found out that the Pinterest share buttons will not work if the image file source is not mentioned. So to resolve this, you need to specify a default image source by changing http://your-image.jpg. It can be your blog’s logo or anything. If the button gets the image from the post then it’s good otherwise it will load the default one.
  • Update - Now you can get the actual size of the images after clicking the Pin it button but there's a condition that it should be uploaded from Blogger post editor or should be hosted on Picasa/Google+ album.

Pinterest Follow Buttons

If you are a member of this famous site then you can add follow buttons to your blog to grow audience. It’s very simple, just visit Goodies page and select the type that you want to add, copy the code and paste it into a “HTML/JavaScript” gadget from Layout tab. Here’s an example.

Follow Me on Pinterest

26 comments :

  1. You can use this tutorial to make it float:

    http://www.simplebloggertutorials.com/2010/07/add-floating-share-buttons-like.html

    ReplyDelete
  2. What do mean when you say, "Don't forget to change http://your-image.jpg with your own image file?"

    Do I have to change that bit of code for each image I post?

    Sorry if this is a noob question- I'm pretty new to blogging and code!

    ReplyDelete
  3. No, you have to change http://your-image.jpg only once. It can be your blog logo or any other image that you want.

    Pinterest button works only when image source is mention within the code otherwise it will not pin it. So in my code, if this button fails to get the image source from the post, then a default image will "take place" instead of it.

    ReplyDelete
    Replies
    1. I have tried this but it still doesn't work.

      Delete
    2. Nevermind, now it does. But this is kind of boring, because all the people's curiosity on the blog post when shared will be gone.

      Delete
  4. isn't anywhere in my html, and I can't find anything similar to it. Is there somewhere else I can put the code?

    ReplyDelete
    Replies
    1. Are you talking about <data:post.body/>?

      You will surely find it, just check the option "Expand Template Widget" while editing your template and press Ctrl+F to find that code.

      Delete
    2. Thank you! I somehow forgot to expand it. Is there a way to center the pin it button?

      Delete
    3. Try this, put the above code within div:

      <div style="text-align:center;">
      {Pin it button code goes here}
      </div>

      Delete
  5. i tried it using your directions and it works, however I want this button to be with the other share buttons like what you did with yours. can you show me how to do it? I tried locating the share buttons codes and found it and just added the code you provided but it didn't work, maybe I forgot to do something else?
    hope you can help me out.
    thanks!

    ReplyDelete
  6. Thank you for this post. THis is the ONLY instruction that has worked for me with that extra bit of script in the beginning "body" part. I have seen the rest of the instructions before and it has never worked. Thanks for the complete instructions!!

    ReplyDelete
  7. Hi, the counter seems to work no, BUT it only picks up a very small thumbnail of the images? Pls let me know how I can change that? http://www.blog.birdsparty.com/

    Thanks!!

    ReplyDelete
    Replies
    1. Sorry to say but the image size will be small (72x72px). However, I'll try to solve it but cannot promise anyone.

      Delete
    2. Aw!! Thank you so much!! Look ,forward to it!!

      Delete
    3. Did this ever get fixed? I am having the same problem with only a thumbnail image getting posted.

      Delete
    4. Yes, it's now fixed...

      Delete
  8. So the whole crtl + F thing doesn't seem to work for me...or else I have no idea what I'm looking for what I push those buttons...help?

    ReplyDelete
    Replies
    1. Are you saying that you cannot find <data:post.body/>?

      Delete
  9. This did not work for me. I followed all directions but when I preview the button is not there.

    ReplyDelete
    Replies
    1. Have followed every step correctly?

      Delete
  10. been working on adding it for hours....yours is the only helpful post! Thank you!!!

    ReplyDelete
  11. please can you tell how to "specify a default image source by changing http://your-image.jpg. " I don't understand where to find the image source

    ReplyDelete
    Replies
    1. Use the text field above (under the "Button options") to input the link of a image file, or, find it within the above provided codes. It's easy and I'm sure you can do it too.

      Delete
  12. Hello! I'm trying to add this Pin it button, but I got stuck in the part of "specify a default image source by changing http://your-image.jpg. ". I understand that I have to put the link of an image file within the text field you provided under the "Button options", but what do you mean by a link of an image file? Do I get these from Flickr? Or photobucket? Or where? How do I find the link of an image file on my blog?

    Thank you soso much for the help!

    ReplyDelete
    Replies
    1. It is the direct link of the image where you have uploaded it. It can be from Flickr, Picasa/Google+ or from any other website...

      Delete

Don't SPAM! Read comment policy.

Like