12/8/13

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

Đăng bởi Admin | 12/8/13 | 0 nhận xét


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 DemoHiện thị Fanpage của Facebook ra trước web/blog với lightbox


Ảnh minh họa:

Hiện thị Fanpage của Facebook ra trước web/blog với lightbox» 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/AVvXsEgYFJyZU5l15O9FSqKKFkCFe-gnwckZtDvsheHsRQW79WhQanS2Hj-Ji6NO_KQts-PPgF3TYYwpF0FXnNzMZoXy6B0EBCPNN_fD577EkmpfoSM4kMB138ddGUMQxuB97rwho8OGarvwvy_i/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/AVvXsEgYFJyZU5l15O9FSqKKFkCFe-gnwckZtDvsheHsRQW79WhQanS2Hj-Ji6NO_KQts-PPgF3TYYwpF0FXnNzMZoXy6B0EBCPNN_fD577EkmpfoSM4kMB138ddGUMQxuB97rwho8OGarvwvy_i/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:
Các xác định ID Fanpage của Facebook ra trước web/blog với lightbox
- Khi đó các bạn được URL có dạng như sau:
Các xác định ID Fanpage của Facebook ra trước web/blog với lightbox
https://www.facebook.com/pages/edit/?id=220761538032225&sk=admin
Phần màu đỏ chính là id bạn cần
Chúc bạn thành công!.Hiện thị Fanpage của Facebook ra trước web/blog với lightbox

Xem thêm:

Tạo hộp Facebook PopUp like box tự đóng theo thời gian

                                                                                                                   Nguồn: Namkna
                                                                                                                   Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva