Thêm bình luận Facebook vào Blogspot

Hiện nay sự phát triển của Facebook mang chúng ta đến gần nhau hơn, giới trẻ bây giờ có thể không có một địa chỉ email của Google nhưng đa số họ đều có một tài khoảng Facebook.

Blogspot là một sản phẩm của Google vì thế chức năng bình luận có sẳn trong blog chắt chắn là của họ và nếu không có một địa chỉ Gmail hay chưa đăng nhập vào hệ thống của Google thì chúng ta không thể nào bình luận được các bài đăng trên Blog.

Và chắt hẳn bạn đã từng thấy các website khác có nhúng phần bình luận của Faebook trực tiếp vào bài viết của họ và nếu bạn đang đăng nhập Facebook bạn có thể comment ngay với chính tên của bạn mà không cần thêm bất cứ một bước xác nhận hay đăng ký nào khác.

Vì lý do đó mà hôm nay, mình sẽ hướng dẫn các bạn làm cách nào để nhúng comment của Facebook vào blog của mình theo cách mình làm với blog này.

Demo: bạn xem trực tiếp ở blog này nhé

Bước 1: Bạn vào trang quản lý tổng thể -> Mẫu -> Click vào "Chỉnh sửa HTML"

 

Bạn sẽ thấy một trang chỉnh sửa code như dưới đây

Bước 2: Bạn phải Ctrl + F để tìm thẻ đóng </head>

Chèn đoạn code dưới đây vào trước thẻ "</head>".

<script type='text/javascript'>
//<![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="8" data-width="766"></div>';
//]]>
</script>

Lưu ý: Các bạn có thể thay tùy ý các thông số dưới đây

• data-num-posts="8": Số bình luận được phép hiển thị, nếu nhiều hơn thì tự động gộp lại.
• data-width="766px": Chiều rộng của khung bình luận Facebook.

Bước 3: Ấn tổ hợp phím Ctrl F, tìm </body>

Chèn đoạn code bên dưới và trước thẻ "</body>".

<div id='fb-root'/> <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>

Như vậy là đã xong phần cơ bản. 
Bước 4: Bây giờ chúng ta chèn khung comment vào nơi muốn hiển thị

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> document.write(fbcm); </script> </b:if>

Thông thường ta sẽ chèn nó vào cuối bài viết. Các bạn Ctrl F, tìm dòng <b:include data='post' name='post'/>
Copy và dán đoạn code bên trên vào phía dưới dòng vừa tìm được(Nếu không được các bạn chèn đoạn mã này vào phía sau dòng <b:include data='post' name='post'/>
 nhé)

Lưu ý: Một số mẫu template (giao diện) có nhiều hơn một dòng <b:include data='post' name='post'/>, các bạn chọn dòng đầu tiên tìm được nha, sau đó lưu lại, nếu thấy không được thì ta chọn dòng khác :D

Bước 5: Save và xem thành quả

Chúc các bạn thành công