Thứ Tư, 15 tháng 10, 2014

Hướng dẫn tạo tạo like box Facebook chuẩn HTML 5 cho Blogspot, libox facebook đẹp cho blogspot.
Bài viết này mình hướng dẫn tạo like box Facebook chuẩn HTML 5 cho Blogspot khắc phục được những lỗi bởi like box thường gặp.
1. Đăng nhập vào blog của bạn.
2. Vào phần mẫu (template) => Chọn Chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code khai báo bên dưới vào trước thẻ <body>.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
4. Lưu mẫu của bạn lại và tiến hành bước tiếp theo nha.
5. Vào phần Bố cục (Layout) => Tạo thêm một tiện ích HTML/Javascripts rồi dán đoạn code bên dưới vào phần nội dung của tiện ích bạn vừa tạo được.
<div class = "fb-like-box" data-href = "http://www.facebook.com/o0ohongdesigno0o" data-width = "290" data-show-faces = "true" data-stream = "false" data-header = "false"></div>
Tùy chỉnh:
  • Thay thế http://www.facebook.com/o0ohongdesigno0o thành URL trang fanpage của bạn trên facebook (lưu ý không phải trang cá nhân nha).
  • data-width = "290" là chiều rộng của tiện ích này
  • data-show-faces = "true"  là hiển thị avantar ảnh của những người theo dõi fanpage của bạn trên facebook. Bạn có thể sửa true thành false nếu không muốn hiển thị ảnh của những người theo dõi.
  • data-stream = "false" Hiển thị thêm những bài viết mới nhất của bạn trên danh sách ảnh những người theo dõi bạn.
  • data-header = "false" hiển thị phần header của tiện ích chính là dòng chữ Tìm tôi trên facebook (Find Us on Facebook) 
  • Cuối cùng bước này khá quan trọng. Như đa biết vừa rồi ta thêm một tiện íchHTML/Javascripts do vậy ta phải xóa đi đoạn code liên quan đến lỗi của tiện ích này như trong mục 4 của bài viết Hướng dẫn thiết kế XML blogspot chuẩn HTML5 (W3C).
6. Lưu mẫu  của bạn lại và quay trở lại w3c để check kiểm tra xem những lỗi wec ban đầu đã biến mất chưa nha.

0 nhận xét:

Đăng nhận xét