Thêm Fanpage Facebook popup cho web/blog với lightbox (V2)

Hiện thị Fanpage của Facebook ra trước web/blog với lightbox

Bạn có 1 trang fanpage trên facebook đặt trong blog (website) của mình nhưng không phải tất cả mọi người đều có thời gian tìm vị trí để click Like fanpage đó, cách tốt nhất là hãy để chúng hiển thị dạng popup ngay trước blog của bạn với 1 khoảng thời gian định trước kèm theo đó là hiệu ứng lightbox. Trang fanpage sẽ hiện ra, làm tối đi những phần khác trên blog/web của bạn và sẽ trượt xuống khi bạn kéo thanh cuộn, cách này sẽ thu hút sự chú ý của người dùng truy cập click Like cho bạn.

Nếu muốn dạng trượt thì hãy xem bài viết: Facebook likebox dạng trượt với jQuery cho blogger

Các bạn có thể xem Demo

Demo for Post

Ảnh minh họa:

» Bắt đầu thủ thuật

1. Đăng nhập (login) vào tài khoản Blogger
2. Vào phần Template (Mẫu)
3. Chọn chỉnh sửa HTML (Edit HTML) >> Chọn Tiếp tục

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
z-index: 110004;
display: none;
}
#fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ccYCmahTmdU07IJnJcjNTx7F2uBwaf0Ys7wKpQECUfkNuy1586vNo_5PUGkrV41qJmse0jGfRMk4DbwQog2Er0D9h9BokX_pkLpcTxFZ61g1AgX9jK5x3Z00V5N4_NprcjUH6oJM8Eei/s1600/fancybox-namkna-blogspot-com.png');
}
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 110000;
display: none;
}
#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 110001;
outline: none;
display: none;
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border: 3px dashed #ccc;
}
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ccYCmahTmdU07IJnJcjNTx7F2uBwaf0Ys7wKpQECUfkNuy1586vNo_5PUGkrV41qJmse0jGfRMk4DbwQog2Er0D9h9BokX_pkLpcTxFZ61g1AgX9jK5x3Z00V5N4_NprcjUH6oJM8Eei/s1600/fancybox-namkna-blogspot-com.png') -40px 0px;
cursor: pointer;
z-index: 110003;
display: none;
}

5. Chèn tiếp code bên dưới vào trước thẻ </head>

<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/launch.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/scs.js" type="text/javascript"></script>

<script type="text/javascript">/* <![CDATA[ */
var lb_l_ret = {"fb_id":"220761538032225","display_on_post":"1"," show_once":"15","delay":"4000","display_on_page": "","fancybox":"","display_on_homepage":"","faceboo kheader":"","gaevent":"","eam":"","display_on_arch ive":"","hideonlike":""}; /* ]]> */
</script>

- delay":"4000" chính là thời gian hiển thị Fanpage, đơn vị là giây, ở đây 4000 tương ứng là 4giây.
- Bạn thay id 220761538032225 thành ID trang Fanpage của bạn

Lưu ý: Để sử dụng lâu dài các bạn hãy tải các file javarscrip về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.

Cách xác định Id của trang facebook. Các bạn bấm vào Chỉnh sửa trang => Quản trị viên: