How to Add jQuery Social Followers Count Plugin in Blogger

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

Wali Khan Commented:

Faizan, actually this widget and similar you already published on your blog would be better if they would have an auto increment function.. but without that it is just headache to update them when followers are increased.. 

Let me know if I'm wrong!

That’s what our Founder Syed Faizan Ali Replied to the above comment.

Syed Faizan Ali Replied:
Well, you are quite right that we have widget similar to the one which we have shared today. However, it has more elegant look.

Coming back to point, Well to make it auto update we have to use API of Different Social Websites. Which is indeed a difficult TASK. Nonetheless, we would try to create a auto Updating Social Networking widget.

Since, Blogger is not flexible enough. That why we always prefer custom. Self updating widgets.

After viewing this gadget, everyone would think that what is uniqueness in this thing? There are tons of same gadgets available on different nooks and corners of the web. However, this gadget has the functionality which other does not have. It updates the followers count on automation plus an elegant design. What else you want? 

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="https://mybloggerlab.googlecode.com/files/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="http://2.bp.blogspot.com/-LSaY_atjCVw/UPWYrXSZv2I/AAAAAAAALsE/-4JPGY6ufn8/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="http://2.bp.blogspot.com/-LSaY_atjCVw/UPWYrXSZv2I/AAAAAAAALsE/-4JPGY6ufn8/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="http://3.bp.blogspot.com/-7F9W8J-JBIQ/UPWYqZ5duWI/AAAAAAAALr8/oj-JEBob98I/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="http://3.bp.blogspot.com/-7F9W8J-JBIQ/UPWYqZ5duWI/AAAAAAAALr8/oj-JEBob98I/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="https://mybloggerlab.googlecode.com/files/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. 

From the Editor's Desk:

Combining the API with the Gadget was an uphill task. Our team did a lot of hard work altogether and the outcome was simply outstanding. We would surely thank our Reader who suggested us to work over such a significant gadget. What are your thoughts about the innovation? Yeah, we know WordPress already has it but what about Blogger huh?. Take a lot care till then, Peace, Blessings and Happy Socializing.
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!

8 comments

January 15, 2013 at 11:21 AM

awesome work, keep it up, pakistan need developers like you

January 15, 2013 at 10:23 PM

Good work keep it up

www.pokharatech.com

January 16, 2013 at 12:59 AM

well nice widget, good work, can we resize it?

January 17, 2013 at 1:58 AM

amazing widget buddy keep it up..
nice work..

http://www.innovativs.com

January 18, 2013 at 1:44 AM

I Like Your Widget. Please Confir. Can I Use This on WordPress ?

http://www.howtowords.com

January 18, 2013 at 1:47 AM

I Like Your Widget. Please Confir. Can I Use This on WordPress ?

http://www.howtowords.com

January 28, 2013 at 11:01 AM

wow, like this widget

July 30, 2014 at 5:29 AM

I installed this on Kawartha Lakes Mums welcome page, but it's not displaying any results. Does it have to be in the side bar to function?

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.