Ngoài cách chèn các nút like Facebook vào website để tăng tính tương tác với những người dùng trên mạng xã hội thì chúng ta còn có một việc nữa để tận dụng sức mạnh của Facebook đó là sử dụng hệ thống comment của Facebook vào website để cho người khác có thể comment bài viết bằng tài khoản Facebook. Vậy ưu điểm của cách này là gì?
Tích hợp comment facebook vào blogger/blogspot là trào lưu khá rộ cho các site lấy mạng xã hội facebook SEO làm chính và được một số bạn hướng dẫn khá rõ ràng cách chèn vào template blogspot. Nhưng ít bạn đề cập đến vấn đề responsive và chuẩn HTML5 cho comment facebook.
Tích hợp responsive comment facebook cho blogspot chuẩn HTML5
Chèn comment facebook cho blogspot như thế nào ? Các bước tích hợp responsive comment facebook cho blogger chuẩn HTML5 ? Đó là vấn đề cần nhắc đến bài này .
Đầu tiên các bạn đăng nhập vào tài khoản blogger của bạn chọn Mẫu >> Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin>
thêm đoạn CSS bên dưới lên trước nó .
CSS Responsive comment facebook
@media only screen and (max-width: 767px) {
.fb-comments {
width: 100% !important;
}
.fb-comments iframe[style] {
width: 100% !important;
}
.fb-like-box {
width: 100% !important;
}
.fb-like-box iframe[style] {
width: 100% !important;
}
.fb-comments span {
width: 100% !important;
}
.fb-comments iframe span[style] {
width: 100% !important;
}
.fb-like-box span {
width: 100% !important;
}
.fb-like-box iframe span[style] {
width: 100% !important;
}
}Sau khi thêm CSS xong chúng ta tìm đến thẻ </head>thêm Javascript bên dưới lên trước nó.
Javascript comment facebook
<script type='text/javascript'>Tiếp tục chúng ta tìm đến thẻ </body>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="10" data-width="100%">
</div>
';
//]]>
</script>
và thêm đoạn Code ngôn ngữ facebook bên dưới lên trước nó
Code ngôn ngữ facebook
<div id='fb-root'/>Để hiển thị comment facebook chúng ta tìm đến thẻ
<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>
<b:include data='post' name='post'/>
và thêm đoạn mã bên dưới sau nó.
<b:if cond='data:blog.pageType == "item"'>Để quản lý facebook chúng ta cần thêm thẻ meta
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
<meta content='App ID' property='fb:app_id'/>
dưới thẻ <head>
Để có App ID các bạn truy cập trang https://developers.facebook.com/apps
Click vào Add a new app rồi làm theo
Khi tạo xong 1 app ta sẽ có Id App
Ngoài ra các bạn có thể quản lí xem nhưng ai đã comment trong blog của mình thông qua note trên Facebook
Để hiện thông báo ta thêm đoạn code sau vào ngay sau đoạn code bên trên
<meta content='Admin ID' property='fb:admins'/>
Adim ID kia chính là ID fb Admin(người nhận thông báo)
Cách lấy ID FB thì có rất nhiều cách
-các bạn truy cập link http://graph.facebook.com/ sau đó điền url trang các nhân fb của bạn vào phía sau /
Ví dụ Link Fb của mình là https://www.facebook.com/anhcuong.hd93 cái chúng ta cần lấy là anhcuong.hd93 và điền ngay sau link bên trên ta đc
Coppy ID FB đó thay thế chỗ Admin ID trong code trên
Lưu ý:
-Nếu các bạn chưa biết cách tạo App ID để quản lý facebook và ưu nhược điểm của nó thì các bạn xem bài này
-data-num-posts="10" Số 10 là số lượng comment hiển thị.
Bước cuối cùng lưu lại và test kết quả tìm được .Chúc các bạn thành công !
Nguồn:http://www.tuanphan.info/
Không có nhận xét nào:
Đăng nhận xét