--> Add Pinterest "Pin It" Counter Button To Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Add Pinterest "Pin It" 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 ...

pinterest pin it button for bloggerAs 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 shows how crazily this new social media platform is emerging amongst the already existing giants like Facebook, twitter, Google Plus and LinkedIn.

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.

You can see the demo live on our blog just below post titles. We have added a horizontal count button that increments whenever a post is pinned. You don't need to worry about the correct featured thumbnail selection because we are using a custom JavaScript code that will offer your visitors with a wide variety of images to choose from to bookmark/pin your blog post.

Don't forget to read these delicious tips and tutorials!

pinterest counters and buttons

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:

<data:post.body/>

   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:

horizontal pin it

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

For Vertical count Use this 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>

      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.

cancel pin

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! :) Peace and blessings pals.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Add Pinterest "Pin It" Counter Button To Blogger
Add Pinterest "Pin It" Counter Button To Blogger
http://lh6.ggpht.com/--EVw9Vs6Zfs/T4XS5-OVHvI/AAAAAAAAGSE/a4Sdvf0BzRc/image%25255B27%25255D.png?imgmax=800
http://lh6.ggpht.com/--EVw9Vs6Zfs/T4XS5-OVHvI/AAAAAAAAGSE/a4Sdvf0BzRc/s72-c/image%25255B27%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/04/add-pinterest-it-counter-button-to.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/04/add-pinterest-it-counter-button-to.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy