Hiển thị Popup Facebook Fanbox trước trang chủ

Lần này sẽ là một trải nghiệm mới về Facebook đó là hiển thị 1 hộp popup Fan Box khi người dùng truy cập vào website. Thủ thuật này yêu cầu người dùng phải click "Like" để trở thành fan hoặc người dùng có thể đợi  đủ số giây quy định (tuỳ theo admin thiết lập, thông thường nên giới hạn khoảng 20 giây trở lại) mới có thể được cấp quyền vào xem thông tin trên blog hoặc website. Điều này sẽ giúp bạn gia tăng lượng fan của mình đáng kể đấy nhé ! Một điểm ưu việt nữa làcookie sẽ tự động lưu trữ và nhớ đối với những người đã là fan (nói dễ hiểu là ai click vào rồi thì hộp tiện ích này sẽ không xuất hiện nữa). Thủ thuật kết hợp giữa CSS và Javascript được nén dưới dạng file txt nên tốc độ load dữ liệu khá nhanh.

Live Demo

BẮT ĐẦU THỦ THUẬT:

1. Đăng nhập Blogger.

2. Vào Mẫu => Chỉnh sữa HTML => Tiếp tục => Mở rộng mẫu tiện ích.

3. Thêm code sau vào trước thẻ </body>

<!-- Facebook fan popup box --><style>#fblikepop {background-color: #fff;    display: none;    position: fixed;    top: 200px;    _position: absolute; /* hack for IE 6*/    width: 490px;z-index:778;border: 8px solid rgba(82, 82, 82, .7);-webkit-border-radius: 8px;-moz-border-radius:8px;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: 778;} #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: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;} #fblikepop #actionHolder {    height: 80px;    overflow: hidden;} #fblikepop #buttonArea {    background: #F2F2F2;    border-top: 1px solid #CCCCCC;    padding: 10px;    min-height: 30px;} #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: -30px 0 0 0;    text-align: right;    line-height: 16px;}</style> <script src='http://www.google.com/jsapi'/><script>google.load(&quot;jquery&quot;, &quot;1&quot;);</script> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[
  username="pages/Blog-Giải-Trí-Tổng-Hợp/179578118831562?ref=hl",
  title="Click LIKE to enter or wait for seconds !",
  kakinetworkdotcom01skin="01",
  time="20",
  wait="0",
  lang="en"
 //]]>  </script> <script src='http://tanchau123.googlecode.com/files/fbfan_popup.txt' type='text/javascript'/><script type='text/javascript'>
   //<![CDATA[
  $(document).ready(function(){$().Tanchau123({ closeable: false });});
   //]]>
  </script><!-- end facebook fan popup box -->

* Thay các biến khai báo ở các dòng màu đỏ ở trên lại cho phù hợp với blog - website của bạn.
1. username: pages/Blog-Giải-Trí-Tổng-Hợp/179578118831562?ref=hl
2. kakinetworkdotcom01skin: 01 (bạn có thể chọn 1 trong 4 skin sau bằng cách thay 01 thành02,03,04 tuỳ theo ý thích cá nhân. Người dùng khi click vào 1 trong 4 skin này sẽ được chuyển hướng đến trang Facebook của bạn)

Skin 01

Skin 02

Skin 03

Skin 04

3. time: 20 (sau 20 giây box sẽ biến mất)
4. Bạn cũng có thể thay đổi tiêu đề của box bằng cách thay đổi dòng "Click LIKE to enter or wait for seconds !"

4. Cuối cùng lưu template lại và xem kết quả.
Chúc các bạn thành công !!!