How to Add jQuery Social Followers Count Plugin in Blogger ~ MileStone

How to Add jQuery Social Followers Count Plugin in Blogger

Are you bored of updating your Social Follower’s count manually in your Widgets? Every now and then lots of visitors arrive on your website. Thus, few of them become your social followers by either liking your Facebook fan page or following your site on twitter. This is the reason, why your Social Followers count almost changes on a daily basis. Therefore, it gets too annoying to update your social Followers count manually in your social subscription widgets.

In the past, we have shared a lot of Social Subscriptions gadgets,

but they never update the subscribers count on automation. However, finally MBL developers are able to develop a widget that updates the followers count on automation. Today in this article, we will learn How to add automatic jQuery Social Follower Count Plugin for Blogger.

Few months ago a user left a comment on MBL suggesting us to create a widget that automatically updates the followers count.

How to Install jQuery Social Count Plugin in Blogger?

The instructions mentioned below are extremely straightforward, and would take less than 2 minutes to complete the integration. Remember: This widget has the flexibility to work on any kind of platform that supports HTML. Therefore, we can also use it on WordPress, Jhoomla and etc.

Go to Blogger.com >> Template >> Edit HTML >> Proceed.

In the Template coding search for]]></b:skin> and just above it paste the following CSS coding. There is no need to do any customization in the CSS coding. Therefore, keep it as it is.

/*--- MBL jQuery Social Follower Count Plugin --- */

.mblsocial-container{

font-size: 13px;

color: #666;

font-family: arial,sans-serif;

line-height: 25px;}

.mblsocial-container a,.mblsocial-container a:visited

{color:#45BAF5;

text-decoration: none;}

.count

{font-weight:bold;}

.row{

position: relative;

width: 320px;

margin: 20px 0px;

height: 100px;

}

.col_4{

width: 155px;

float: left;

margin: auto;

text-align: center;

}

.box{

width: 130px;

height: 100px;

margin: auto;

border: 1px solid #E5E7EB;

background: #F1F3F8;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius:3px;

}

.cell_1{

width: 30px;

height: 80px;

position: relative;

float: left;

margin: auto;

}

.cell_2{

font-size: 30px;

height: 80px;

width: 80px;

text-align: center;

line-height: 80px;

font-family: arial, sans-serif;

font-smooth: always;

position: relative;

margin: auto;

color: #333;

}

.cell_3{

height: 20px;

width: 132px;

float: left;

margin: auto;

line-height: 20px;

font-size: 12px;

color: #999;

background: #ccc;

margin-left: -1px;

-webkit-border-bottom-right-radius: 3px;

-webkit-border-bottom-left-radius: 3px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 3px;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px;

}

.icon{

width: 40px;

height: 40px;

margin-top: 17px;

border: none;

}

.facebook-blue{

background-color: #5074BF;

background-image: -moz-linear-gradient(top, #88AEFC, #3B5998);

background-image: -ms-linear-gradient(top, #88AEFC, #3B5998);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88AEFC), to(#3B5998));

background-image: -webkit-linear-gradient(top, #88AEFC, #3B5998);

background-image: -o-linear-gradient(top, #88AEFC, #3B5998);

background-image: linear-gradient(top, #88AEFC, #3B5998);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88AEFC', endColorstr='#3B5998');

border-color: #23487E;

color: #fff;

text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);

}

.twitter-blue{

background-color: #44B8F2;

background-image: -moz-linear-gradient(top, #96DCFF, #2BA6E3);

background-image: -ms-linear-gradient(top, #96DCFF, #2BA6E3);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96DCFF), to(#2BA6E3));

background-image: -webkit-linear-gradient(top, #96DCFF, #2BA6E3);

background-image: -o-linear-gradient(top, #96DCFF, #2BA6E3);

background-image: linear-gradient(top, #96DCFF, #2BA6E3);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96DCFF', endColorstr='#2BA6E3');

border-color: #149BDE;

color: #fff;

text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);

}

.green {

background-color: #41AD2B;

background-image: -moz-linear-gradient(top, #4FDE33, #368F24);

background-image: -ms-linear-gradient(top, #4FDE33, #368F24);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4FDE33), to(#368F24));

background-image: -webkit-linear-gradient(top, #4FDE33, #368F24);

background-image: -o-linear-gradient(top, #4FDE33, #368F24);

background-image: linear-gradient(top, #4FDE33, #368F24);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4FDE33', endColorstr='#368F24');

border-color: #1B7808;

color: #fff;

text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);

}

.black {

background-color: #333;

background-image: -moz-linear-gradient(top, #666, #000);

background-image: -ms-linear-gradient(top, #666, #000);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000));

background-image: -webkit-linear-gradient(top, #666, #000);

background-image: -o-linear-gradient(top, #666, #000);

background-image: linear-gradient(top, #666, #000);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');

border-color: #000;

color: #fff;

text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);

}

#mycontent{

color:#a1a1a1;

text-align:center;

line-height: 1.9;

width:310px;

border: 1px solid #E5E7EB;

background: #F1F3F8;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius:3px;

}

That's All Save the Template by Pressing "Save Template" Button and proceed to the next step.

How to add Automatic jQuery Social Follower Count Plugin for Blogger?

Go to Blogger.com >> Layout >> Add a Gadget.
From the list select Add HTML/JavaScript.
Now in the HTML Box paste the following coding.

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>

<script>

$(document).ready(function(){

$('#shared').mblsocialcount({

'service':'facebook',

'countof':'shares',

'query':'http://www.mybloggerlab.com',

'callback':'formatCount'

});

$('#tweets').mblsocialcount({

'service':'twitter',

'countof':'tweets',

'query':'mybloggerlab',

'callback':'formatCount'

});

$('#fblikes').mblsocialcount({

'service':'facebook',

'countof':'likes',

'query':'mybloggerlab',

'callback':'formatCount'

});

$('#followers').mblsocialcount({

'service':'twitter',

'countof':'followers',

'query':'mybloggerlab',

'callback':'formatCount'

});

});

function formatCount(element,count)

{var display_count='';

count=parseInt(count,10);

if(count>1000000)

{count=count/1000000;

count=count.toFixed(1);

display_count=count+'m';}

else if(count>1000)

{count=count/1000;

count=count.toFixed(1);

display_count=count+'k';}

else{display_count=count;}

element.html(display_count);}

</script>

<div class="mblsocial-container">

<div class="row">

<div class="col_4">

<a href="http://www.facebook.com/mybloggerlab" target="_blank" rel="nofollow">

<div class="box">

<div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrW14sQaKAAxrFSHdHlykJ_Lo8UghTrslMzQkD4UynFz4TakNujLWRAivkMps3FpshKBPdkTSdpQkf1D1IAiHrQy9-9O4h7rj864AYRllO92fVT01KqiUkpDG3xzObdoDg-FE-RAfYPE/s100/facebook.png" class="icon"/></div>

<div class="cell_2"><span id="fblikes" class="count"></span></div>

<div class="cell_3 facebook-blue">Likes</div>

</div>

</a>

</div>

<div class="col_4">

<a href="http://www.mybloggerlab.com" target="_blank" rel="nofollow">

<div class="box">

<div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrW14sQaKAAxrFSHdHlykJ_Lo8UghTrslMzQkD4UynFz4TakNujLWRAivkMps3FpshKBPdkTSdpQkf1D1IAiHrQy9-9O4h7rj864AYRllO92fVT01KqiUkpDG3xzObdoDg-FE-RAfYPE/s100/facebook.png" class="icon"/></div>

<div class="cell_2"><span id="shared" class="count"></span></div>

<div class="cell_3 green">Shares</div>

</div>

</a>

</div>

   </div>

<div class="row">

<div class="col_4">

<a href="http://www.twitter.com/mybloggerlab" target="_blank" rel="nofollow">

<div class="box">

<div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8Ty0xYoaDRZ3q-hIjdiAWzCLUTIPouf8KE4lpq_d3329N0NkcZu7Be1NKeFhsfJYJWLw5LkRl2V5ZiVPgsJND9W_Zz_0E3jHzs7CaIyzL6mvZcNEv5yLPeeTQhemt6tgsZjEK2F00U0/s100/twitter.png" class="icon"/></div>

<div class="cell_2"><span id="followers" class="count"></span></div>

<div class="cell_3 twitter-blue">Followers</div>

</div>

</a>

</div>





<div class="col_4">

<a href="http://www.twitter.com/mybloggerlab" target="_blank" rel="nofollow">

<div class="box">

<div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8Ty0xYoaDRZ3q-hIjdiAWzCLUTIPouf8KE4lpq_d3329N0NkcZu7Be1NKeFhsfJYJWLw5LkRl2V5ZiVPgsJND9W_Zz_0E3jHzs7CaIyzL6mvZcNEv5yLPeeTQhemt6tgsZjEK2F00U0/s100/twitter.png" class="icon"/></div>

<div class="cell_2"><span id="tweets" class="count"></span></div>

<div class="cell_3 black">Tweets</div>

</div>

</a>

</div>

   </div>

<div id="mycontent">Created By <a href="http://www.mybloggerlab.com">MyBloggerLab.com</a>

</div>

</div>



<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialcount.js"></script>

Customization:

For Twitter Share/Follow:

Replace mybloggerlab with your Twitter username.
Replace http://www.twitter.com/mybloggerlab with your Twitter fan page URL.

For Facebook Share/Likes:

Replace mybloggerlab with your Facebook Fan username.
Replace http://www.facebook.com/mybloggerlab with your Facebook fan fage URL

ATTENTION: Don't remove the credit link. Anyone who remove the link, then it could destroy his Blog maliciously. Therefore, keep the credit links intact. If you failed to do so, then we would not hold any responsibility because legal action would be taken against him. However, if anyone want to purchase a Legal licence then he can contact us.

MileStone