Pinterest - Adding a Pin It Button To Wordpress or Blogger

Pin It

Pinterest is a new player on the scene in the social network space.  The website has exploded and is becoming a huge player. 

Pinterest is a virtual pinboard. Pinterest allows users to organize and share images and video found across the web.  Users can search for and browse pinboards created by other people to discover what other people are pinning. 

The Pinterest Pin It functionality allows you to Pin anything that catches your eye: cool pictures, great articles, or fun finds!  A Pin (basically a bookmark) can be added by visiting a website by clicking a Pin It button.  The Pin It buttons are similar to a Like for Facebook or a Tweet This for Twitter.  Each pin added using the Pin It button links back to the site it came from.

Those who don't have a Pinterest account, should get on board.  There is one Caveat, you have to be invited.  To get invited just log into the Pinterest website

To add a Pin It button to Wordpress simply add the Plugin Pinterest Plugin.   I have found this plugin to be one of the better ones out there.

To add a Pin It button to Blogger right now you need to modify the Template file.   The following code will work.

1. Open your Blogger dashboard
2. Click on Design-->HTML (Remember to back up your template)
3. Click the Expand Widget Templates check box
4. Look for the following data tag <data:post.body/>
   
   Note: If you add the code below the tag, the Pin It button will appear below the post. If you add the code above the tag, the Pin It button will appear above the post.

<!-- Pinterest Code Begin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    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>  
</b:if> 
<!-- Pinterest Code End -->