Add a Pinterest Pin Button to Your Blog

Earlier today Pinterest posted about their new buttons. This included a bit of code to create a PinIt button that will initiate a pin for a specific image. That got me thinking.... how great would it be to have a button that I could put on my blog that would behave just like the bookmarklet and initiate a pin where the user can still pick what image they are interested in pinning? This would be great for encouraging others to pin your creations, and help spread the word about your blog.

Now, there may already be an easier way to do this. I am certainly no expert at Pinterest (or Blogger for that matter). But here is the little bit of code I used in Blogger to embed the happy little Pinterest button you an see in the lower right of this post. Fell free to swipe this, or to point out any existing official code from Pinterest itself to do this.

First, you need to be in "Edit HTML" mode to edit the HTML of your blog's template directly. I suggest backing up your template before making any changes. You may need to check "Expand Widget Templates" depending on where you put the button. 
Add this piece of Javascript right before the </head> tag:

<script type='text/javascript'>
function pinit() {
    var e= document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);
    document.body.appendChild(e);
};
</script>

Next, add this line where you want the button to appear on your blog. I added mine to the post footer.

<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>

Lastly, add this to the CSS to make your button pretty. You may also want to modify or add to this CSS to get the button positioned just how you like it where you decide to put it. UPDATE: This code goes at the end of the CSS section. If you're not sure what part that is, try searching for '/* Footer' without the quotes. Pasting it right after the block of code it is a part of should work fine. If you don't have a Footer section, try search for '/* Content' instead. The new code being added is in bold below.


/* Footer
----------------------------------------------- */

.pin_it_button {
    overflow: visible;
    width: 51px;
    height: 26px;
    margin-right: 1px;
    font: normal normal normal 11px/normal Arial, sans-serif;
    background-color: transparent !important;
    background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
    color: #CD1F1F !important;
    background-position: 0px 0px !important;
    background-repeat: no-repeat no-repeat !important;
    cursor: pointer;
}


.pin_it_button:hover {
    background-position: 0px -27px !important;
}

It's by no means perfect, and is just the result of me messing around for a little bit, but I hope that this is useful to someone.

UPDATE: I've had some inquiries on where to insert the button code to get it to look exactly like mine. I will try to give enough detail to mimic mine below, but all the code you need to have for the button to work is above. This is strictly to get your footer layout to mimic my own.


Just to be clear, I'm about to describe where to put the 2nd bit of code from above.


Do a search for '<!-- quickedit pencil -->' without the quotes. You should see a bit of code that looks like below:


  <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>


We are going to insert some code in between the second and third lines of this section. You should change the above block to look like this:


<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>


      <span class='post-icons' style='float: right;'>
          <a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>
      </span> 
      
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>

The new code is in bold, the rest of the difference is just spacing to make it easier to read.


I hope this helps. If you have any questions, don't hesitate to leave a comment - they're emailed straight to me. :)

** UPDATE 6/11/12 - Due to the high volume of traffic to this post, I can no longer help troubleshoot each person's individual issues attempting to add this button - each problem takes a long time to troubleshoot, and I just can't afford to take that much time away from my family any longer. It has worked for 100s of people - these instructions do work. If you are having issues, please double and triple check you followed each step precisely. One common gotchya is extra characters from people copy-and-pasting straight from my blog - so if it's not working you may also want to try typing in each section of code yourself. Also check for any typos.

<3 Kelsey