Như các bạn đã biết hiện nay chuẩn HTML5 được rất nhiều SEOer 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).
- Thông thường khi chèn một facebook like box vào trong trang của mình, các bạn sẽ dùng đoạn code sau:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnamkna.blogspot&width=290&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:258px;" allowTransparency="true"></iframe>
Nếu kiểm tra sau khi chèn đoạn code trên bạn sẽ thấy nó phát sinh thêm những lỗi như bên dưới:
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>.
<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/namkna.blogspot" data-width = "290" data-show-faces = "true" data-stream = "false" data-header = "false"></div>
Tùy chỉnh:
- Thay thế http://www.facebook.com/namkna.blogspot 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