October 2, 2012

How to Add Pinterest Pin It Button to your Blog

I'm not sure why there just isn't a gadget already developed that you can just add to your blog without having to add code and jumping through a dozen hoops to make it actually work.

It took me quite some time to figure this out.  Reading through comments trying to find someone with the same issue as me as to why is this not working?!

So now that I've figured it out, I'm going to make your life so much easier.

Here's really how you do it.


The easiest instructions I found are at these two links.


http://www.julieannart.com/2011/10/how-to-add-pinterest-button-to-all-blog.html

Notes:  When she says to do this:

3. Look for <div class='post-footer'> and paste the code directly after that.
Directly after that means:  not under or below; paste it right after the greater than sign > no spaces, so it should look like this ><

There are several 'post-footer' words in the html code, so you drop the code that's in the link immediately following the <div class='post-footer'> where you see </b:if> just above it.  So it looks like this.


 </b:if>
    <div class='post-footer'><div style='float: right; margin: 4px;'><a href='javascript:void((function(){var%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)})());'><img alt='Pin It' class='aligncenter' src='http://img.photobucket.com/albums/v419/green_tea/pin.jpg'/></a></div>

The second thing I had to figure out was once the Pin It button is there, how do you actually Pin it?  It may seem simple, but when crucial details are left out of a tutorial you're set up to fail.  Again, I had to read through the comments to find someone who was having the same issue as me.  I see the Pin It button but when I click it nothing happens.  I couldn't pin.

Comment question:  I noticed this works great, but you have to be in the individual blog post for the button to show up. Is there a way for the button to show on the main blog page?

Comment answer:  This hack (button with counter) is suitable only for post pages.  You won't see it on homepage as it is designed to only appear on post pages.

You can't Pin it from the homepage of your blog.  You have to click the title heading of the actual blog post that you want to Pin, that takes you into that specific post and then you can Pin from there with no problems.
  This link solved this for me.


http://www.bloggersentral.com/2012/02/add-pinterest-pin-it-button-on-blogger.html
http://pinterest.com/

Tyla





2 comments:

  1. Just went over to the first link you provided. Found the link there to how to do this on the new blogger template. Followed instructions and it works like a charm. Did that on 3 of my blogs. Thanks so much for this! Awesome. I'm thrilled.

    Have also added your blog to my blogroll on my incest/child sexual abuse blog at VIGALAND: COME OUT FROM UNDER Hope you can do same for me and together, we can help other victim/survivors of incest who need to "come out from under".

    ReplyDelete
    Replies
    1. Viga,
      I did add your blog to my blog roll. I will spread it more though, on Twitter, FB, and Pinterest.
      I hope you join my blog as a supporter too.
      I'm glad you were able to add the Pin It to all your blogs so quickly. That means my subtle added hints assisted. I spent 3 days on this.
      Thank you

      Delete

Weigh in. What's your opinion? Start a dialogue. Speak and I'll listen.

The Keyhole to My Mind's Closet

The Keyhole to My Mind's Closet
Blogging = cleaning = healing.

Feed