Tech Tutorial : How to Add Pin It Button to Blogger?

I have realised that I just cannot do a tech tutorial post on tuesday, you see, I just don't realise when Sunday turns into Wednesday! Hence, another Techno thursday tutorial for you!

Please note: You don't need an account on Pinterest to add the pin button to your blog, but you will need an account on Pinterest if you want to Pin any content.Also, I am not sure if the code given below will work on WordPress platform since I have not tried but you are free to try it and do tell me the result.

 
Although, Pinterest has been in existence for quite some time,I recently got an invite to Pinterest thanks to my ahem!  very influential friend who blogs here. Pinterest is like facebook and twitter rolled into one in terms of usage, you get to create your own pin boards which have pictures and you can post something about the picture (Twitter-effect!) and you can like them or repin  them and the format is very similar to Facebook.

Please note that the code written below and the code mentioned on Pinterest's site are two different codes and the Pin It Button will pin the images if you use the code below. The code below works, I know because I use the same code and if you want to test, you can click on my Pin It button and test it!



 Why do you need Pinterest in your life??
Because you can just get the pin button for your browser and it will pin anything you like while giving credit to whoever owns that image and all you have to is hit the "Pin" button.How cool is that, right?

A page from pinterest.

Since then, I have been struggling to make the pin button work for my blog. You see the link that Pintrest people have specified on their page generates a pop-up window which doesn't have any images.I tried various permuations and combinations of the code and I have finally found a combination which works!


How to add Pin It Button to Your blog?

1. Choose the "Template" option from your dashboard.
2. Click on Edit HTML.
3. Click on Proceed.
4. Tick on the box "Expand widget template".
5. Now, select the whole code and save it in a text file  on your computer aka take backup, just in case, you know.
6. In the code, you need to find, <data:post.body/>
7. When you find it, you need to select all the  code  written below and paste it on top of  <data:post.body/>

8. 
   <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>

   
   
   
9. Click Save template and you're done!!!
10. Without closing the window in which you edited the template, check whether the "Pin It" button is working.It should be working fine now!

Note: If you want to revert the changes, just select the code that you saved in a text file and use it to replace the *whole* of the code in the template editor. You can also revert to the default code by clicking on the blue link Revert widget templates to default  but then all your edits will be lost!

Also, do you think I should start another blog for technical post like these and maybe I will write about monetizing blog as well???