Add Pinterest Follow Me & Pin It Button To Blogger

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/babycatering/"><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

<a href="http://pinterest.com/babycatering/"><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

<a href="http://pinterest.com/babycatering/"><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

<a href="http://pinterest.com/babycatering/"><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 babycatering 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='"http://pinterest.com/pin/create/button/?url=" + 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('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>

Code For Vertical Buttons:

<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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('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>

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.