Installing Pinterest Pin and Follow Button.

Pinterest is somewhat like a Facebook share where visitor share the image by pinning.Pinterest button is only for Image not for content so the blog which don't have image is useless but the Blog where Image is main Part Pinterest button is useful.If you want to add Pinterest button then add it like this.

Adding it in Blogger.

At main Zone.

To add Pinterest in Main zone i.e Below post title or post content follow this.

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back up your Blog.
3. Find this line
4. Add the code as your wish from below 3 options.Choose any one.(If you add the pin button above the line then pin button will appear below post title if you add below the like pin button will appear below post content)
   For Vertical pin Button
   

   <a class='pin-it-button' count-layout='vertical' 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:-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>

   
   For Horizontal Button
   

   <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;'/>
   <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 Basic Button(Without Counter)
   

   <a class='pin-it-button' count-layout='none' 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:-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>

5. Click on Save Template.

At Widget.

If you add Pinterest button in widget counter will get disable however if you want to add as widget do this.

1. Go to Blogger Dashboard>Layout
2. Click on Add a Gadget
3. Add this code in content box.

   <!-- pin button starts -->
   <a href='javascript:void(run_pinmarklet())'><img src="http://1.bp.blogspot.com/-23y099Vbp3Q/T37s7t46kLI/AAAAAAAAA3I/wf1RsdcL5q8/s1600/pinbloggerrounder.png" style='margin:0; padding:0; border:none;'/></a>
   <script type='text/javascript'>
   function run_pinmarklet() {
     var e=document.createElement('script');
     e.setAttribute('type','text/javascript');
     e.setAttribute('charset','UTF-8');
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
     document.body.appendChild(e);
   }
   </script>
   <!-- Bloggerrounder.blogspot.com -->

4. The code is not original.We have just made a image and applied JavaScript.However it works.
5. Click on Save Template.

Pinterest Follow Button.

Follow Button Types	Follow Button Code.
	<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>
	<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/pinterest-button.png" width="78" height="26" alt="Follow Me on Pinterest" /></a>
	<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/big-p-button.png" width="61" height="61" alt="Follow Me on Pinterest" /></a>
	<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a>

• Where,
  1. Replace username with your own.
  2. You can use it any where as it works on other platform too.

1. In Blogger.
   • Go to Blogger Dashboard>Layout
   • Click on add gadget
   • Select HTML/JavaScript
   • Paste the Pinterest Follow button code.
   • Click on Save
2. In Wordpress
   • Go to WordPress dashboard>Appearance>Available widget.
   • Drag text widget to sidebar
   • In content box paste the code.
   • Click on Save.

That's all.Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.