Add Pinterest Follow Me & Pin It Button To Blogger

Advertisements
According to official source, Pinterest is becoming the latest trend in social media. Pinterest have attracted millions of audience just under the nose of top rated social networking websites like Facebook, Google Plus, Twitter and etc. And just like other social networking platform, every one is rushing towards registering there account on Pinterest to discover what the buzz is all about. The biggest reason behind the success of Pinterest is its uniqueness. Instead of writing boring content it uses images and videos. It allows users to Pin any featured image or video to there virtual pinboard. Users who are your friends or followers can like or even repin your shared content to there Pinboard. You can arrange your pins under specific pinboards (categorize) according to your need.

So currently Pinterest is an ideal point for publisher who wants to promote there blog or website. Therefore it has become the next most vital traffic source for blogger to boost their blogs traffic. Adding Pinterest “Pin It” And “Follow Me” to blogger could make big difference in your traffic. But if you had tried Pinterest Goodies (Gadgets) then surly you have not been amused from its simple HTML and JavaScript code with no dynamics attach to it. Since its new so, they don’t have any developer’s page from where we can obtain important information. Therefore we have to depend upon the WordPress plug-in to split out the codes for (Blogger) BlogSpot Blogs. Remember: The code is so delicate that if you try some thing extra ordinary then it will stop working.

Don’t know what Pinterest is, how to Get Started and Important Tips then don’t forget to read out these.

Adding PINTEREST “Pin It” Buttons To Blogger:

So to insert a follow me button you don’t need any extra working like adding CSS to template. All you need to do is to place simple HTML coding any where in your blog i.e. In your Sidebar, Header, Below post and etc. Just paste the following code where you want to display Pinterest Follow me Button.

Style No: 1
follow-me-on-pinterest-button.png (169×28)
<a href="http://pinterest.com/fosterzone/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>

Style No: 2
pinterest-button.png (80×28)
<a href="http://pinterest.com/fosterzone/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a>

Style No: 3
big-p-button.png (60×60)
<a href="http://pinterest.com/fosterzone/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a>

Style No: 4
small-p-button.png (16×16)
<a href="http://pinterest.com/fosterzone/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a>

Remember:Don't forgot to replace fosterzone with your Pinterest Username

Adding PINTEREST “Pin It” Buttons To Blogger:

Remember: As I have mentioned above don’t try to edit the coding just do as directed. If you try to do some change then the scripts will not work. So to insert Pinterest “Pin It” Buttons to Blogger .
  • 1.Simply Go To Blogger.com >> Your Blog >>
  • 2.Now Go To Template >> (Your Can Backup Your Template, in case any thing went wrong)
  • 3.Now Click on Edit HTML >> Proceed
  • 4.Click the box named “Expend the Widget” (It is on the top left of your template coding)
  • 5.Now Search for the Following Code in your template
<data:post.body/>
Now it’s up to you where you want to place your widget. If you want to place Pin It button just under your post title then just paste the following code before <data:post.body/> (above)  

But if you want to place it at the end of your post then paste the following code after <data:post.body/> (below) 

  • 6.Now Paste the Following Codes below or above <data:post.body/> (according to your choice)
Code For Horizontal Buttons:
<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 For Vertical Buttons:

<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> 
  • 7.Now save your template by pressing Save Template button and all done :) 

How Pin it button Works:

When you will click on any Pin it button a new window will pop'd out. Now from here you can select any post that you want to pin. The visitor can pin one image at a time. If the visitor don't want to pin any image then he can click the Blue Cancel Bar at the top to cancel pinning.


If history proofs it self true again, we might see a down fall in the active users at Pinterest. But we don't need to worry about it until we are receiving traffic from Pinterest. So that's how you can insert Pinterest "PIN IT" and "Follow Me" button in blogger.So guys that is it for now if you feel any difficulties feel free to ask. Till then peace, blessings and happy pinning.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

10 comments

April 19, 2012 at 1:29 PM

Thanks, but my question is why are so many people are using this template?
:P

Editorial Team MOD
April 19, 2012 at 1:32 PM

@John
Thanks For Liking The Post, And as far as template is concern It is only Live Here at MBL and At MyBloggerTricks.com Other then that all the templates are with different Style Sheets But the template's HTML structure is Same. Thanks Again Pal Keep In Touch. Peace

May 7, 2012 at 6:16 AM

hello friends ,iam used this trick..nice share...


http://ngecamp.blogspot.com

Editorial Team MOD
May 7, 2012 at 9:38 AM

@Ngecamp Business
Thanks Pal For Liking The Widget. Peace

June 6, 2012 at 12:51 AM

easy to apply ,,,thanks

June 13, 2012 at 5:37 AM

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ffmpeg hosting| html5 server

June 15, 2012 at 3:32 AM

hey, i am also using a awesome pinterest bot named Pindominator which i bought from www.pindominator.com at cheap price, and i am sure that pindominator is better than this product.,check it out..direct contact at their skype support team - facedominatorsupport (skype name), they are also giving trial version for three days.

July 18, 2012 at 9:10 PM

Everyone explains that i have to find this but i really didn't find that in the html editor in blogger, I've just find "posts"... so i really don't know what to do...
fcaamenabar (at) gmail (dot) com

July 18, 2012 at 9:11 PM

Find this: < data : post . body / >

Editorial Team MOD
July 19, 2012 at 12:43 AM

@Fran Amenábar Ch.
Brother This might Happened due to your Custom Blogger Template, Would you Please send your Template so we can easily resolve this issue. Contact us @ contact.mybloggerlab.com . Peace and Blssings

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.