6/26/15
Tạo Facebook Like Box chuẩn HTML5 cho blogspot
Hiện nay chuẩn HTML5 được rất nhiều người chú ý. Tất cả các tiện ích đều hướng tới chuẩn này nhằm tối ưu và tăng thứ hạng trang của bạn trong mắt công cụ tìm kiếm. Tuy nhiên khi chuẩn hóa theo HTML5 có nhiều tiện ích không sử dụng được như tiện ích người theo dõi, facebook like box,... Khi áp dụng những thủ thuật này phát sinh rất nhiều lỗi liên quan đến HTMl5 (bạn có thể kiểm tra nó tại W3C)
Bài viết này mính sẽ hướng dẫn các bạn tạo một tiện ích facebook like box chuẩn hóa HTML5 (W3C). Sau đây là cách thực hiện.
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>
<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 = "https://www.facebook.com/pages/KTVOnline/310465702402877?ref=ts &fref=t" data-colorscheme="light" data-width = "280" data-show-faces = "true" data-stream = "false" data-header = "false"></div>
Tùy chỉnh:
Thay thế https://www.facebook.com/pages/KTVOnline/310465702402877? 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ị avatar ả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 ích HTML/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.
SHARE THIS POST
Author: Hamedledam
Subscribe to:
Post Comments (Atom)
0 comments: Bài đăng của bạn! Quy định comments▼
XIN LƯU Ý:
Comments spam sẽ bị xóa ngay. Bạn có thể để lại link blog. Liên kết blog vui lòng liên hệ...
» Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục
» Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư
» Hãy viết bằng tiếng Việt có dấu để mọi người có thể đọc!
» Để viết chữ in đậm hãy sử dụng thẻ chữ in đậm