Thêm widget thống kê số lượng like fanpage và share blog update tự động cho blogspot

Hầu hết các tiện ích thống kê về số lượng like Fanpage 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ẻ

Demo

Để 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

Code:

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

Code:

<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/AVvXsEh3dG5lYxPaLqa1cPydQoHgXkn2_8gcI3hDYUQkL8kiBO6KfObD-kOHfxroTycuT6RbmBsqs4CobRjrpwZUxG8pC1I7POoYNIptZunnfQ7pfOYNXvYHXvdnvr4H1L0Vi2s1OBTmUMgRFhPK/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/AVvXsEij9cBONhdRwP2Oo7qQKxLH1hkjToy1WcATr2a7x2lP8jx3hWQhpNqIsuWGd0Xwl96jcbn-sCJOzQyzLEhY3qZf7T1rxoi5llair_f340g9t-ZgcvJZnR-anlgzlV5vzwscolBxJ89ch2MZ/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: