Adbox
ads

Ads

ads
ads

Blog Archive

Translate

LightBlog

Chèn Comment FaceBook cho Blogger Blogspot 2017

Đề nghị đọc kỹ các bước để tránh sai xót dẫn đến không thực hiện được.

Bước 1: Tạo app facebook


Lưu ý: Với những tài khoản facebook chưa veryfi (xác thực) thì sẽ hiện "Register as a Developer" , bạn nào chưa xác thực thì tiến hành xác thực tài khoản nhé. Nếu tài khoản đã xác thực tiếp tục,
  • Bấm vào My Apps
  • Chọn Add a new app
  • Nhập mã bảo vệ, ta đã tạo xong app.
  • Copy App ID


Bước 2: Thêm code trên blogspot


  • Truy cập vào bloger.com
  • Bấm vào chủ đề
  • Bấm chỉnh HTLM (bên phải của tuỳ chỉnh)
  • Bấm Ctr + F( nếu macbook command + F)
  • Gõ </body> => Xuất hiện đoạn code trong thẻ.
  • Thêm đoạn code sau và trước thẻ </body>

Đoạn code:
<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/sdk.js#xfbml=1&amp;version=v2.3&amp;appId=Mã ứng dụng";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Lưu ý: Trước thẻ nha các bạn.
  • Thây thế mã ứng dụng bằng mã đã copy APP ID đã copy ở bước 1.

Bước 3: Xác định vị trí chèn bình luận (comment) bằng facebook

Thông thường chúng ta sẽ chèn ở cuối bài viết, đơn giản vì khi độc giả đọc xong thấy nội dung hay sẽ trong tâm mắt mà tiện tay chia sẽ. Đây là tính năng trải nghiệm người dùng hay còn gọi là UX (User Experience). Trong bước này, chúng ta có hai cách để thực hiện.

Cách 1: chèn dưới thẻ <b:include data='post' name='post'/>


  • Bấm Ctr + F (mac command+f)
  • <b:include data='post' name='post'/> xong enter
  •  Thêm đoạn code sau “ngay dưới” thẻ <b:include data='post' name='post'/>

Đoạn code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if>

Lưu ý: Dưới thẻ nha các bạn. 

Cách 2: Thêm code dưới thẻ </div> 


  • Bấm Ctr + F (mac command+f)
  • <div class='post-footer'> xong enter
  • Thêm đoạn code sau “ngay dưới” thẻ </div>

Đoạn code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if>

Ghi chú:
  • data-colorscheme="light": màu của khung bình luận, facebook cung cấp 2 giao diện là light (màu sang) & dark (màu tối)
  • data-numposts="5": Số bình luận được hiển thị ra (Publiced)
  • data-width="640" : kích thước chiều ngang của khung bình luận

Bước 4: Bước quan trọng vô cùng
Bấm lưu để bloger bắt đầu triển khai trên website thực tế.

Bước 5: Quản lý Facebook Comment
-       Chọn ứng dụng của bạn để quản lý các bình luận đăng nhập từ facebook trên trang blog của bạn.
Lưu ý: Mọi thắc mắc vui lòng comment bên dưới này nhé.

Nguyễn Tuấn




Không có nhận xét nào:

Đăng nhận xét

LightBlog
Adbox