Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot

Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Đối với Blogspot Blogger đã cung cấp cho người dùng hai hệ thống comment đó là comment blogger và comment Google+ rất thuận tiện trong việc quản lý và rất có lợi cho seo.
Trong xu thế mạng xã hội Facebook đang phát triển rầm rộ thì nhiều người muốn blogspot của mình có thể kết nối trực tiếp với facebook với tiện ích comment facebook qua khách truy cập có tài khoản facebook và comment cũng xuất hiện trên dòng thời gian của khách giúp blogspot quảng bá tới nhiều người hơn trên facebook.
Facebook cung cấp cho chúng ta 2 hệ thống Comment đó là:
- Comment Facebook không thể quản lý.
- Comment Facebook được quản lý từ facebook thông qua tài khoản APP đăng ký với facebook.
Với loại comments này bạn có thể kích hoạt chức năng post ảnh(đính kèm photo) với plugin hỗ trợ của nó mà bạn không cần phải đưa thêm gì vào trong mẫu.
Dưới đây sẽ hướng dẫn các bạn cài đặt 2 loại comment này.

1- Comment Facebook không quản lý
Để chèn Comment Facebook không thể quản lý các bạn cần qua các bước sau:
+ Cách 1
A- Vào chỉnh sửa mẫu chèn trước thẻ </head> đoạn code sau:
<script type='text/javascript'>
      //<![CDATA[
      String.prototype.GetValue=function(e){var t=new RegExp("(^|&)"+e+"=([^&]*)(&|$)");var n=this.substr(this.indexOf("?")+1).match(t);if(n!=null)return unescape(n[2]);return null};var purl=location.href;var cm_form=purl.GetValue("cm_form");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%" data-colorscheme="light" ></div>'
      //]]>
</script>
Trong đó:
Khung Comment màu sáng:light
Khung Comment màu tối:dark
B- Chèn ngay sau thẻ <b:include data='post' name='post'/> đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'> document.write(fbcm); </script>
</b:if>
C- Chèn trước thẻ </body> đoạn code sau:
<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>
+ Cách 2:
Cách này lợi dụng luôn code của comments có quản lý nhưng không có ID vì chưa đăng ký APP.
A- Chèn ngay sau thẻ <b:include data='post' name='post'/> đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" data-href="data:post.canonicalUrl" data-colorscheme="light" data-numposts="5" data-width="100%" />
</b:if>
Trong đó:
data-href: Địa chỉ trang web đặt comment
data-numposts: Số comments được hiển thị, mặc định là 10
data-width: Chiều rộng ô comment (pixels)
B- Chèn trước thẻ </body> đoạn code sau:
<div id='fb-root'></div>
<script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : '@@@',
            xfbml      : true,
            version    : 'v2.7'
          });
        };
        (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>
Vì chưa có ID nên phần ID để trống.
2- Comment Facebook được quản lý từ facebook
Bước 1. Tạo 1 Facebook APP mới
Bạn truy cập vào địa chỉ sau với tài khoản facebook của bạn
https://developers.facebook.com/apps
Click vào nút: + Add a New App
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Điền dầy đủ thông tin:
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Bạn click: Website (Website ô cuối cùng):
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Bạn nhập tên miền blogspot, Facebook sẽ cung cấp cho ta đoạn code. Bạn copy đoạn code này và nhúng vào trước </body> trong mẫu.
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Bước 2. Nhúng Facebook Comment vào Blogspot
Chèn ngay sau thẻ <b:include data='post' name='post'/> (hoặc nơi bạn muốn) đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" data-href="data:post.canonicalUrl" data-colorscheme="light" data-numposts="5" data-width="100%" />
</b:if>
Trong đó:
data-href: Địa chỉ trang web đặt comment
data-numposts: Số comments được hiển thị, mặc định là 10
data-width: Chiều rộng ô comment (pixels)
Ta cũng có thể lấy code facebook comment theo cách mới cung cấp bằng cách truy cập:
https://developers.facebook.com/docs/plugins/comments
Bạn nhập URL blogspot của bạn và bấm nút Get Code
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Facebook sẽ cung cấp cho ta 2 đoạn code như hình
- Code trong phần Step2 bạn dán trước </body>
- Code trong phần Step3 bạn dán ngay sau thẻ <b:include data='post' name='post'/> (hoặc nơi bạn muốn)
Và nhớ để nó trong thẻ điều kiện
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Nội dung đoạn code.
</b:if>
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Và làm theo hướng dẫn để bật chế độ công khai (Bạn có thể bật Chế độ công khai trong Bảng điều khiển ứng dụng.)
Bạn click :Xét duyệt ứng dụng
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Bước 3. Quản lý các Facebook Comments
Truy cập: https://developers.facebook.com/tools/comments
Đây là nơi bạn quản lý các comment trên Blogspot. Bạn có thể ẩn comment, block user,...
Public: liệt kê các bình luận được hiển thị trên blogspot
Hidden: các bình luận đã bị ẩn khỏi trang web (bạn của người bình luận vẫn thấy).
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Khi ai đó bình luận trên blogspot, bạn sẽ nhận được thông báo trên trang Facebook cá nhân của mình.
Sau đó bạn quay trở lại trang web, kéo xuống phần comment. Nếu thấy xuất hiện tab Moderator view là bạn đã có thể quản lý các comment facebook trên blogspot của mình.
Bật tính năng post ảnh đính kèm tại comments facebook của blogspot
Để tích hợp tính năng đính kèm photo(có icon máy ảnh tại góc khung comments) chỉ có với comments có quản lý.
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Bạn vào phần quản lý My apps của mình rồi nhấp vào phần cài đặt(setting) và check vào có đính kèm photo rồi lưu lại.
Cài đặt Comment Facebook cho Blogspot-Comment Facebook for Blogspot
Với những blogspot đã responsive thì nhớ thêm cái này:
@media screen and (max-width:800px){.fb_iframe_widget,.fb_iframe_widget span, .fb_iframe_widget span iframe[style] { min-width: 100% !important; width: 100% !important;}
}
Chúc các bạn cài đặt thành công.
Nhận xét

2 nhận xét :

  1. bạn ơi nếu mình không tìm được dòng này thì làm thế nào tiếp ạ

    Trả lờiXóa
    Trả lời
    1. Ý bạn là dòng nào,mà đã là template trên nền tảng blogger thì đều có.

      Xóa