Add Pinterest Counter Button To Blogger

 

As I got busy with studies, a new social networking niche boosted in numbers and strength so dramatically that it has now become the social media network of 2012 with over 10.4 Million registered users and 50 million blog posts featuring Pinterest including MBT. 

Daily Pinterest users have increased by more than 145 percent since the beginning of 2012. More than one-fifth of Facebook users are on Pinterest every singly day (which equals more than 2,000,000 FB users).

It therefore becomes the next important referral traffic source for bloggers to increase traffic to their blogs through Pinterest follow buttons and Pin it count buttons. For me honestly debugging the Pinterest code was the most difficult task. Pinterest Goodies Page provides a simple HTML code with a JavaScript link and it contains no dynamic variables/parameters that may work in blogger or wordpress based blogs. They don't have a developers page from where one could fetch relevant information. Thus we had to rely on forums and Wordpress plugins to rip out a code for BlogSpot blogs. This code is so sensitive that if you try to make the slightest change to it, it would not work. 

Dont know how to use pinterest watch this:

What is Pinterest? How to promote your blogs with it?

Adding the "Pin it" button

Please don't edit the code below and neither add it inside Tables or div sections because the JavaScript is not well scripted and is sensitive to slightest of change in styling. Use it as given. I will publish fresh posts on how to add it to sharing widget below post titles and to the floating share widget.

1. Go To Blogger > Template
2. Backup/restore your template
3. Click the Edit HTML button
4. Click Proceed
5. Click the box "Expand Widget Templates"
6. Search for this code:  

  Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code

<data:post.body/>

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code  

   Now if you wish to add the count button below post titles then you will have to paste the coming codes just above the code in step#6 otherwise if you wish to display the button at the bottom of posts then add the coming codes just below step#6 code.
      7.  Paste the following code below or above (depending on your choice of location) the code in step#6

For horizontal count Use this code:




Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<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>

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 


For Vertical count Use this code:

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<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>

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 

      8.   Save your template and you are all done!

How it works?

Upon clicking the pin it now button, a window will open that contains important thumbnail images on that specific blog post. The visitor will pin just one image and then he will be asked to add it to his Pin boards and share it on his Pinterest account. If suppose the visitor does not want to pin any image then he can simply click the Cancel Pin button to go back to the blog post.

Need help?

Follow this easy tutorial and let me know if you needed any further assistance. We have tried to add all necessary codes to make things work. the variable data:post.url is only included and we did not included one for thumbnails because it is more wise to let the visitor choose a thumbnail of his choice rather forcing him to select one that you automatically provide.  Have fun exploring this new social media bird and we will make sure to educate you with its proper use. Do not forget to Pin this post! :)

Thank me Later (: