How to Add Followers Count Plugin in Blogger?

Followers Count

Demo

Tiếng Việt

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. Today in this article, we will learn How to add automatic jQuery Social Follower Count Plugin for Blogger.

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, Joomla 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.

.tvlsocial-container{font-size:13px;color:#666;font-family:arial,sans-serif;line-height:25px}
.tvlsocial-container a,.tvlsocial-container a:visited{color:#45BAF5;text-decoration:none}
.count{font-weight:bold}
.row{position:relative;width:320px;margin:20px 0;height:100px}
.col_4{float:left;margin-right:15px;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;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)}
.orange_tvl{background-color:#ff8736;background-image:-moz-linear-gradient(top,#fab484,#fc7b23);background-image:-ms-linear-gradient(top,#fab484,#fc7b23);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fab484),to(#fc7b23));background-image:-webkit-linear-gradient(top,#fab484,#fc7b23);background-image:-o-linear-gradient(top,#fab484,#fc7b23);background-image:linear-gradient(top,#fab484,#fc7b23);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fab484',endColorstr='#fc7b23');border-color:#fc7b23;color:#fff;text-shadow:0 1px 1px rgba(60,60,60,0.75)}
#mycontent{display:none}

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>
$(document).ready(function(){
$('#shared').tvlsocialcount({
'service':'facebook',
'countof':'shares',
'query':'http://www.trollvl.com',
'callback':'formatCount'
});
$('#fblikes').tvlsocialcount({
'service':'facebook',
'countof':'likes',
'query':'giaitri123vn',
'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="tvlsocial-container">
<div class="row">
<div class="col_4">
<a href="http://www.facebook.com/giaitri123vn" target="_blank" rel="nofollow"><div class="box">
<div class="cell_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6YJY_Xh2N7SuyurArv3-DM6UmwfiR6Q65Ki910pZeGkP0uhSywK27sr8AfIEaWCeVCfunuDxmFSi-8TrWpcweVIVE4jwGrkkuB6Ho8KqMi4yzJF7XikfcpmFLHvVXfLKBGdWzfpMrt0M/s320/facebook-icon.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.trollvl.com" target="_blank" rel="nofollow"><div class="box">
<div class="cell_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-jQqq2YDtHdx3fdCyjBCz8x4h5DThhIKta-b8vPW3dKTH0K5e9pIxBueMbMY3MAKvERx3GoO52GwpI4xYXFkwdI709p68BZnjJbP0q35DaHFL7bNFz42jMuzs0Xr078EKjWN1ih6dZxe/s1600/icon-blogger.png" class="icon"/></div>
<div class="cell_2">
<span id="shared" class="count"></span></div>
<div class="cell_3 orange_tvl">
Shares</div>
</div>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="https://googledrive.com/host/0Bz_65BAr9KCZb2Fha1JwZkR0Nms"></script>

Customization:

For Facebook Likes:

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

For Blog Shares:

• Replace http://www.trollvl.com with your URL.
• Replace http://www.trollvl.com with your URL

English

Hầu hết các tiện ích thống kê về số lượng like Fan page và lượt chia sẻ blog lên Facebook đang được chia sẻ đều phải cập nhật bằng phương pháp thủ công. Mỗi khi có sự thay đổi về số lượng like và chia sẻ bạn lại phải thay đổi, như vậy thật phiền phức và mất thời gian. Nhưng trong bài viết này, chúng ta sẽ tìm hiểu làm thế nào để thêm công cụ tự động cập nhật số lượng like và chia sẻ

Để thêm widget này vào blog bạn chỉ việc làm theo các bước hướng dẫn đơn giản bên dưới. Ngoài ra, bạn cũng có thể áp dụng cho WordPress, Joomla and etc
Vào Blogger.com >> Mẫu >> Chỉnh sửa HTML

Trong Template bạn tìm ]]></b:skin> và dán trước nó đoạn CSS bên dưới

.tvlsocial-container{font-size:13px;color:#666;font-family:arial,sans-serif;line-height:25px}
.tvlsocial-container a,.tvlsocial-container a:visited{color:#45BAF5;text-decoration:none}
.count{font-weight:bold}
.row{position:relative;width:320px;margin:20px 0;height:100px}
.col_4{float:left;margin-right:15px;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;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)}
.orange_tvl{background-color:#ff8736;background-image:-moz-linear-gradient(top,#fab484,#fc7b23);background-image:-ms-linear-gradient(top,#fab484,#fc7b23);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fab484),to(#fc7b23));background-image:-webkit-linear-gradient(top,#fab484,#fc7b23);background-image:-o-linear-gradient(top,#fab484,#fc7b23);background-image:linear-gradient(top,#fab484,#fc7b23);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fab484',endColorstr='#fc7b23');border-color:#fc7b23;color:#fff;text-shadow:0 1px 1px rgba(60,60,60,0.75)}
#mycontent{display:none}

Làm cách nào để thêm widget sau vào blog?

Blogger >> Bố cục >> Thêm tiện ích HTML/Javascript.
Dán đoạn code bên dưới vào khung soạn thảo.

<script>
$(document).ready(function(){
$('#shared').tvlsocialcount({
'service':'facebook',
'countof':'shares',
'query':'http://www.trollvl.com',
'callback':'formatCount'
});
$('#fblikes').tvlsocialcount({
'service':'facebook',
'countof':'likes',
'query':'giaitri123vn',
'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="tvlsocial-container">
<div class="row">
<div class="col_4">
<a href="http://www.facebook.com/giaitri123vn" target="_blank" rel="nofollow"><div class="box">
<div class="cell_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6YJY_Xh2N7SuyurArv3-DM6UmwfiR6Q65Ki910pZeGkP0uhSywK27sr8AfIEaWCeVCfunuDxmFSi-8TrWpcweVIVE4jwGrkkuB6Ho8KqMi4yzJF7XikfcpmFLHvVXfLKBGdWzfpMrt0M/s320/facebook-icon.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.trollvl.com" target="_blank" rel="nofollow"><div class="box">
<div class="cell_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-jQqq2YDtHdx3fdCyjBCz8x4h5DThhIKta-b8vPW3dKTH0K5e9pIxBueMbMY3MAKvERx3GoO52GwpI4xYXFkwdI709p68BZnjJbP0q35DaHFL7bNFz42jMuzs0Xr078EKjWN1ih6dZxe/s1600/icon-blogger.png" class="icon"/></div>
<div class="cell_2">
<span id="shared" class="count"></span></div>
<div class="cell_3 orange_tvl">
Shares</div>
</div>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="https://googledrive.com/host/0Bz_65BAr9KCZb2Fha1JwZkR0Nms"></script>

Tùy chỉnh:

Facebook Likes:

• Thay đổi  giaitri123vn  thành username trang Fanpage của bạn.
• Thay đổi  http://www.facebook.com/giaitri123vn thành link trang Fanpage của bạn

Blog Shares:

• Thay đổi  http://www.trollvl.com thành link blog của bạn.
• Thay đổi  http://www.trollvl.com thành link blog của bạn

mybloggerlab

Edit by TrollVL.Com