Tạo Facebook Like Box hiệu ứng Popup với bộ đếm thời gian ~ Tin Học

Facebook Like Box là một plugin của mạng xã hội Facebook, cho phép người chủ Page có thể thu hút và giành nhiều like từ những nguồn website khác nhau về cho Page của mình. Nếu bạn có page trên Facebook và muốn có thật nhiều người like cho page của mình thì plugin này thật sự hữu ích.

Hôm nay mình sẽ chia sẻ với các bạn một thủ thuật để chèn plugin này vào cho các trang blogspot của bạn, điều đặc biệt là Facebook Like Box sẽ xuất hiện dưới dạng hộp thoại (Pop up ) và tự động xuất hiện theo thời gian được ấn định.
Các bạn lần lượt làm theo các bước sau đây :

Bước 1 : Đăng nhập vào blogger, vào phần Thiết kế (Design ) -> Chỉnh sửa HTML ( Edit Html) chọn Mở rộng tiện ích (Expand Widgets)

Bước 2 : Tìm đoạn code sau trong template :
</body>

Bước 3 : Copy và Dán đoạn code sau ngay trên:

<style>#fblikepop {    background-color: #fff;

display: none;

position: fixed;

top: 200px;

_position: absolute;

/* hack for IE 6*/

width: 450px;

border: 10px solid #6F6F6F;

z-index: 200;

-moz-border-radius: 9px;

-webkit-border-radius: 9px;

margin: 0pt;

padding: 0pt;

color: #333333;

text-align: left;

font-family: arial,sans-serif;

font-size: 13px;

}#fblikepop body {

background: #fff none repeat scroll 0%;

line-height: 1;

margin: 0pt;

height: 100%;

}

.fbflush {

cursor: pointer;

font-size: 11px !important;

color: #FFF !important;

text-decoration: none !important;

border: 0 !important;

}

#fblikebg {

display: none;

position: fixed;

_position: absolute;

/* hack for IE 6*/

height: 100%;

width: 100%;

top: 0;

left: 0;

background: #000000;

z-index: 100;

}#fblikepop #closeable {

float: right;

margin: 7px 15px 0 0;

}#fblikepop h1 {

background: #6D84B4 none repeat scroll 0 0;

border-top: 1px solid #3B5998;

border-left: 1px solid #3B5998;

border-right: 1px solid #3B5998;

color: #FFFFFF !important;

font-size: 14px !important;

font-weight: normal !important;

padding: 5px !important;

margin: 0 !important;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;

}#fblikepop #actionHolder {

height: 30px;

overflow: hidden;

}#fblikepop #buttonArea {

background: #F2F2F2;

border-top: 1px solid #CCCCCC;

padding: 10px;

min-height: 50px;

}#fblikepop #buttonArea a {

color: #999999 !important;

text-decoration: none !important;

border: 0 !important;

font-size: 10px !important;

}#fblikepop #buttonArea a:hover {

color: #333 !important;

text-decoration: none !important;

border: 0 !important;

}#fblikepop #popupMessage {

font-size: 12px !important;

font-weight: normal !important;

line-height: 22px;

padding: 8px;

background: #fff !important;

}#fblikepop #counter-display {

float: right;

font-size: 11px !important;

font-weight: normal !important;

margin: 5px 0 0 0;

text-align: right;

line-height: 16px;

}</style>

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">

//<![CDATA[

kakinetworkdotcom01username="thuthuatwebhay",

kakinetworkdotcom01title="Join us at Facebook!",

kakinetworkdotcom01skin="04",

kakinetworkdotcom01time="20",

kakinetworkdotcom01wait="0",

kakinetworkdotcom01lang="en"

//]]>

</script>

<script type="text/javascript" src="http://www.thuthuatweb.net/download/popup-with-timer-codez.js"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});

//]]>

</script>

Các bạn nhớ là phải thay đổi một số thứ quan trọng sau vào đoạn code:
– Thay thế thuthuatwebhay bằng Facebook username của bạn
– Thời gian được ấn định là 20 giây và bạn có thể thay đổi bao nhiêu tùy thích ở mục kakinetworkdotcom01time
– widget sẽ xuất hiện ngay lập tức khi khách viếng vào website của bạn, nếu bạn muốn nó xuất hiện sau một phút hoặc nhiều hơn thì chỉnh sửa ở phần kakinetworkdotcom01wait

Hy vọng với thủ thuật này sẽ giúp các bạn có thêm nhiều lựa chọn cho việc tích hợp các plugin Facebook vào web của mình. Chúc các bạn thành công !