Hẳn các bạn cũng đã tìm hiểu nhiều trên Google các hướng dẫn Cài đặt comment facebook vào website và quản lý comment, nhưng rất ít người làm được. Nguyên nhân do các hướng dẫn đó là phiên bản Facebook cũ, giờ facebook dùng giao diện mới nên các bạn khó hiểu. Hoặc cũng do người viết viết chưa cụ thể lắm, hoặc người làm cũng chưa làm đúng nên mới không được.
Để các bạn đỡ mất thời gian tìm hiểu ở nhiều web khác để rồi càng loạn lên vì làm không được, mình viết bài này thật chi tiết và dành cho phiên bản facebook update mới nhất. Các bạn cứ làm tỉ mỉ từng bước một như hướng dẫn bên dưới thì chắc chắn sẽ làm được nhé.
Bước 1: Tạo ứng dụng Facebook
Truy cập web https://developers.facebook.com/apps, click vào nút + Add a New App ở bên trên cùng tay phải ==> Click vào Website ==> ở ô input "Choose an existing app or type the name of your new app" nhập vào tên website, ví dụ: sieuthiwebsitedep.com ==> Bấm nút Create New Facebook App ID ==> ô Chọn một Loại click chọn đúng ngành của mình ==> Bấm nút Create App ID để load sang trang khác ==> ở trang mới này bạn cần lưu ý các phần sau:
+ Lưu lại thông số appId (là đoạn chữ số màu đỏ ở đoạn code bên dưới) là dãy số gồm 16 chữ số, appId này sinh ở đoạn mã javascript mà facebook sinh ra, mã này thường có dạng như sau:
<script> window.fbAsyncInit =function(){ FB.init({ appId :'1494289114192390', xfbml :true, version :'v2.3'});};(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/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs);}(document,'script','facebook-jssdk'));</script>
+ nhập vào ô "Tell us about your website" với ô Site URL là tên website, ví dụ nhập: sieuthiwebsitedep.com, ô Mobile Site URL là link web mobile (có thể bỏ trống) ==> Bấm nút Tiếp (Lưu ý phải nhớ mã appId ở trên nhé) ==> Như vậy là xong bước 1, các thông tin khác bạn không cần nhập gì thêm và chuyển sang bước 2.
Bước 2: Tại thẻ <html> bạn thêm xmlns:fb='http://www.facebook.com/2008/fbml'
Ví dụ khi thêm xong sẽ có mã như này <html xmlns:fb='http://www.facebook.com/2008/fbml'>
Bước 3: Thêm vào trước thẻ đóng </head> của bạn đoạn code sau:
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID">
Trong đó thì YOUR_APP_ID bạn thay bằng appId của ứng dụng mà mình đã lưu ý các bạn ghi nhớ ở bước 1
Còn thông số YOUR_FACEBOOK_USER_ID là User facebook của bạn, cách lấy thông số này như sau:
+ Ở trang https://www.facebook.com/ (lưu ý là bạn phải đang đăng nhập facebook), click vào nút hình Mũi tên trỏ xuống ở góc trên cùng bên tay phải ==> Click vào Cài đặt (hoặc Settings) ==> Click vào chữ Ứng dụng (hoặc chữ tiếng Anh là Apps) ở cột bên tay trái ==> ở form Đã đăng nhập bằng Facebook sẽ hiển thị các icon ứng dụng mà bạn đã từng sử dụng trên facebook, ở đây bạn di chuột vào icon của một ứng dụng bất kỳ để hiển thị icon hình chiếc Bút ==> Click vào chiếc Bút để chỉnh sửa cài đặt sẽ hiển thị lên một bảng ==> Kéo chuột tìm đến dòng chữ ghi Nhận trợ giúp từ nhà phát triển ứng dụng (hoặc chữ tiếng anh là Get Help From App Developers) bạn để ý ngay bên dưới dòng chữ này sẽ có dòng chữ User ID 100001437606101 thì dòng chữ 100001437606101 chính là YOUR_FACEBOOK_USER_ID.
Như vậy sau khi có appID và User ID thì các bạn thay vào trước thẻ đóng </head> và được đoạn mã như sau:
<meta property="fb:app_id" content="1494289114192390" />
<meta property="fb:admins" content="100001437606101">
* Lưu ý: Bạn phải thay bằng các thông số của bạn chứ không phải 2 thông số ở trên ví dụ nhé
Bước 4: Thêm vào ngay sau thẻ <body> đoạn code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Trong đó, tương tự như bước trên, bạn thay YOUR_APP_ID bằng appId của bạn vào.
Bước 5: Chèn đoạn code sau vào khu vực mà bạn muốn hiển thị khung Facebook Comment
<div class="fb-comments" data-href="/YOUR_WEBPAGE_HREF" data-width="760" data-num-posts="20"></div>
Trong đó:
+ YOUR_WEBPAGE_HREF là link website
+ data-width: là chiều rộng khung comment, bạn có thể nhập tùy ý số khác
+ data-num-posts: là số comment hiển thị trên một trang, bạn có thể nhập tùy ý số khác
Cuối cùng lưu lại code.
Bước 6: Cài đặt thêm thông tin và Quản lý Comment
Đầu tiên bạn vào liên kết sau: http://developers.facebook.com/tools/comments (Đây cũng sẽ là link để bạn quản lý các Comment từ website của bạn. Bạn có thể thêm ai đó vào blacklist, xóa comment, ban user...)
Click vào chữ Settings bên tay phải để hiển thị lên bảng Cài đặt và nhập vào các thông số sau:
+ ở ô Quản Trị Viên nhập vào nick facebook của người quản trị (thường là tên nick của bạn luôn), có thể nhập vào nick của nhiều người nhé
Các thông số khác bạn tự tìm hiểu thêm nhé. Cuối cùng bấm nút Lưu (Save) để lưu lại.
Vậy là bạn là hoàn thành việc cài đặt công cụ Facebook Comment vào website rồi đó. Giờ khi có một ai đó comment ở một sản phẩm trên web, thì trên trang facebook của bạn sẽ có thông báo có người comment (ở trang facebook click vào icon hình tròn quả cầu sẽ thấy có người comment). Trang quản trị các comment facebook ở website thì bạn vào link này để xem http://developers.facebook.com/tools/comments. Bạn có thể xóa comment hoặc chặn nick của người comment.
Số người đang online: | 71 |
Hôm nay: | 395 |
Hôm qua: | 193 |
Tổng số truy cập: | 550797 |