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





The Keyhole to My Mind's Closet

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