How to Add jQuery Social Followers Count Plugin inwards Blogger

Are you lot bored of updating your Social Follower’s count manually inwards your Widgets? Every instantly together with and then lots of visitors brand it on your website. Thus, few of them locomote your social followers past times either liking your Facebook fan page or next your site on twitter. This is the reason, why your Social Followers count almost changes on a daily basis. Therefore, it gets equally good annoying to update your social Followers count manually inwards your social subscription widgets. In the past, nosotros direct hold shared a lot of Social Subscriptions gadgets, but they never update the subscribers count on automation. However, endure MBL developers are able to educate a widget that updates the followers count on automation. Today inwards this article, nosotros volition larn How to add together automatic jQuery Social Follower Count Plugin for Blogger.


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

Wali Khan Commented:

Faizan, truly this widget together with similar you lot already published on your spider web log would live ameliorate if they would direct hold an auto increment function.. but without that it is exactly 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 higher upward comment.

Syed Faizan Ali Replied:
Well, you lot are quite correct that nosotros direct hold widget similar to the ane which nosotros direct hold shared today. However, it has to a greater extent than elegant look.

Coming dorsum to point, Well to brand it auto update nosotros direct hold to job API of Different Social Websites. Which is indeed a hard TASK. Nonetheless, nosotros would endeavour to practise a auto Updating Social Networking widget.

Since, Blogger is non flexible enough. That why nosotros e’er prefer custom. Self updating widgets.

After viewing this gadget, everyone would intend that what is uniqueness inwards this thing? There are tons of same gadgets available on dissimilar nooks together with corners of the web. However, this gadget has the functionality which other does non have. It updates the followers count on automation addition an elegant design. What else you lot want? 

How to Install  jQuery Social Count Plugin inwards Blogger?

The instructions mentioned below are extremely straightforward, together with would direct hold less than 2 minutes to consummate the integration. Remember: This widget has the flexibility to piece of work on whatever form of platform that supports HTML. Therefore, nosotros tin also job it on WordPress, Jhoomla together with etc. 
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
In the Template coding search for]]></b:skin> together with exactly higher upward it glue the next CSS coding. There is no demand to practise whatever customization inwards the CSS coding. Therefore, maintain it equally 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 company #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 company #E5E7EB;
background: #F1F3F8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}

That’s All Save the Template past times Pressing “Save Template” Button together with continue to the side past times side step.

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

  • Go to Blogger.com >> Layout >> Add a Gadget.
  • From the listing select Add HTML/JavaScript.
  • Now inwards the HTML Box glue the next 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’:’omelto.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’
                });               
            });
role 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=”omelto.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=”omelto.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 take away the credit link. Anyone who take away the link, together with then it could destroy his Blog maliciously. Therefore, maintain the credit links intact. If you lot failed to practise so, together with then nosotros would non concur whatever responsibleness because legal activeness would live taken against him. However, if anyone desire to buy a Legal licence together with then he tin contact us. 

From the Editor’s Desk:

Combining the API alongside the Gadget was an uphill task. Our squad did a lot of hard piece of work altogether together with the outcome was exactly outstanding. We would for certain give thank you lot our Reader who suggested us to piece of work over such a pregnant gadget. What are your thoughts nigh the innovation? Yeah, nosotros know WordPress already has it but what nigh Blogger huh?. Take a lot assist till then, Peace, Blessings together with Happy Socializing.


Sumber http://www.mybloggerlab.com