Saturday, 22 June 2013

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.  
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://facebookchatfun.googlecode.com/files/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('#shared').mblsocialcount({
'service':'facebook',
'countof':'shares',
'query':'http://www.facebookchatfun.blogspot.com',
'callback':'formatCount'
});
$('#tweets').mblsocialcount({
'service':'twitter',
'countof':'tweets',
'query':'facebookchatfun',
'callback':'formatCount'
                }); 
$('#fblikes').mblsocialcount({
'service':'facebook',
'countof':'likes',
'query':'facebookchatfun',
'callback':'formatCount'
                });   
$('#followers').mblsocialcount({
'service':'twitter',
'countof':'followers',
'query':'facebookchatfun',
'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/usamaniazi786" target="_blank" rel="nofollow">
<div class="box">
    <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5X6NyA7TsR2eKUQuS_zsrMGUPudIR9d32BVxx0hXpkHkZXszr4nPkjUz86IHBGNoRwPX7Kc8dwYfOuM_17E4NckhHH7tMQeNePHFPEdTfAB94AeC_ZiRzPtP7LHzetUBxsQpxJxORoE/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/AVvXsEiS5X6NyA7TsR2eKUQuS_zsrMGUPudIR9d32BVxx0hXpkHkZXszr4nPkjUz86IHBGNoRwPX7Kc8dwYfOuM_17E4NckhHH7tMQeNePHFPEdTfAB94AeC_ZiRzPtP7LHzetUBxsQpxJxORoE/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/care4utricks" target="_blank" rel="nofollow">
<div class="box">
     <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7m572qHPDCfcY2UatgnrEEV9fVRXvDY0ow6hyphenhyphenfHYoqp4Y-kDAyq-Q8T5oX2NxHGiVRf1_aAV0xDuGezWSQMSlCLth2fBO7LQ8qG1l6SwXu9U-fivKMsRKUmWnUcrqOkRCjcI1YV2x0U/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://facebookchatfun.blogspot.com" target="_blank" rel="nofollow">
<div class="box">
     <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7m572qHPDCfcY2UatgnrEEV9fVRXvDY0ow6hyphenhyphenfHYoqp4Y-kDAyq-Q8T5oX2NxHGiVRf1_aAV0xDuGezWSQMSlCLth2fBO7LQ8qG1l6SwXu9U-fivKMsRKUmWnUcrqOkRCjcI1YV2x0U/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 http://twitter.com/care4utricks with your Twitter username.
  • Replace http://twitter.com/care4utricks with your Twitter fan page URL.
For Facebook Share/Likes:
  • Replace http://facebook.com/usamaniazi786 with your Facebook Fan username.
  • Replace http://facebook.com/usamaniazi786 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.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)