Tích hợp hệ thống Disqus Comment vào Blogspot
Phan Nhật Chánh - Official website

Tích hợp hệ thống Disqus Comment vào Blogspot

   Jul 20, 2014   
Báo lỗi bài viết×
Disqus là hệ thống bình luận dễ dàng tích hợp hầu hết với bất kỳ nền tảng website nào. Việc tích hợp Disqus vào blog của bạn sẽ chỉ mất vài phút. Ưu điểm của Disqus hoàn toàn miễn phí và rất chuyên nghiệp.

Disqus Comment System for Blogger, tich hop disqus cho blogger, tich hop disqus vao blogspot, huong dan tich hop disqus vao blogspot, tich hop disqus vao blogger, cach tich hop disqus vao blogger, lam the nao de tich hop comment disqus vao blogspot, hien thi luot comment cho blogspot, dem luot comment cho blogger, hien thi comment moi nhat cho blogger, recent comment blogger, disqus comment counter

Hệ thống này là thực sự tuyệt vời và nó là 1 hệ thống comment rất chuyên nghiệp cho tất cả các các trang web. Nó có thể tích hợp vào bất kỳ loại web nào và tôi đã thấy nhiều trang web phổ biến cũng đang sử dụng hệ thống này như CNN, The Next Web,...

Với các tính năng tuyệt vời của nó, ta có thể tích hợp vào các trang blog / trang web của mình một cách dễ dàng. Trong bài này tôi sẻ hướng dẫn bạn làm thế nào để:
Tích hợp Comment Disqus vào Blogspot
Hiển thị lượt comments ngoài trang chủ
Hiển thị comment mới nhất

Một số nét đặt trưng của hệ thống bình luận Disqus:

  • Giao diện được thiết kế chuyên nghiệp, đẹp mắt. Với giao diện bắt mắt sẽ thu hút được nhiều đọc giả của bạn. Dể dàng quản lý bình luận của bạn bằng cách tạo một tài khoản Disqus.
  • Một trong những tính năng nỗi bật của nó là, bạn có thể bình luận bằng cách đăng nhập để bình luận từ các trang mạng xã hội như Facebook, Google+, Twitter. Tuy nhiên, nếu bạn không muốn sử dụng các tài khoản để bình luận, bạn cũng có thể bình luận dưới dạng là khách khách truy cập.
  • Một tính năng tuyệt vời là nó cho phép trả lời từng comment (threaded comments) sẽ giúp bạn trong việc thảo luận dễ dàng hơn. Bạn cũng có thể trả lời nhiều lần trên một bình luận. 
  • Cho phép đánh giá bình luận, Có lựa chọn yêu thích ở phía trên nếu bạn yêu thích một bình luận nào đó bạn có thể bấm vào nó.
  • Cho phép sắp xếp comment theo ngày, tháng, xếp hạng
  • Có thể chia sẻ các bình luận lên mạng xã hội.
  • Chỉnh sửa và Xóa bình luận: Nếu bạn đã đăng sai 1 bình luận, bạn có thể chỉnh sửa và xóa nó.
  • Kiểm duyệt nhận xét: Bạn cũng có thể bật tính năng kiểm duyệt mỗi bình luận do độc giả của bạn gửi lên.
  • SPAM: Bạn sẽ được an toàn bởi hệ thống chóng SPAM, nó có thể tự động phát hiện những bình luận cố tình SPAM và không được hiển thị.
  • Tối ưu với các công cụ tìm kiếm. Đặc biệt với hệ thống server luôn trong trạng thái tốt nhất nên bình luận của bạn sẽ được cập nhật cũng như load cực nhanh.
  • Và nhiều tính năng khác nửa...

Tích hợp Disqus vào Blogspot như thế nào?

Bước 1: Add a gadget
- Chọn Layout và  Add a gadget trong sidebar


- Thêm HTML/JavaScript


- Nhập  tiêu đề  là Disqus và nội dung  Ví dụ:

- Save lại.

Bước 2:  Thêm mã Disqus vào Template
- Vào Template chọn Edit HTML
- Tìm dòng: <b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>
Nếu muốn tích hợp luôn vào giao diện mobile thì bạn thêm mobile="yes"  sau khi thêm nó sẽ như thế này: 
<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>
-Tìm đoạn code sau và xóa nó đi:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

- Thay thế bằng:
<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = 'EXAMPLE';
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";

if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}

var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#comments {display:none;}
</style>

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement('script');
bloggerjs.type = 'text/javascript';
bloggerjs.async = true;
bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();

</script>
</b:if>
<style type='text/css'>
.post-comment-link { visibility: hidden; }
</style>

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement('script');
bloggerjs.type = 'text/javascript';
bloggerjs.async = true;
bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();

</script>
</b:includable>

Save Template lại và xem kết quả
Như vậy là bạn đã tích hợp Disqus vào Blogger rồi. Và để có thể quản lý nội dung bình luận thì bạn phải tạo một tài khoản trên Disqus

Tạo tài khoản Disqus

Truy cập vào Disqus theo địa chỉ : https://disqus.com/. Tại trang chủ bấm vào Add Disqus to Your Site
và điền các thông tin để đăng ký 1 tài khoản bình thường

Sau khi đăng ký xong tài khoản của Disqus. Vào Setting



Sau đó di chuyển xuống Site Identity bạn sẻ thấy Shortname


Copy và điền nó vào shortname ở đoạn code phía trên (shortname ở trên là EXAMPLE thay thế nó bằng shortname của bạn) để quản lý comment. Vậy là xong!

Hiển thị lượt comments ngoài trang chủ

- Vào Template => Edit HTML tìm </body> và thêm đoạn code dưới đây vào trước nó (sửa lại shortname của bạn)
<script type="text/javascript">
var disqus_shortname = 'example'; //sửa lại shortname của bạn

(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

- Tìm  <div class='post-header-line-1'/> (1 template có thể có hơn 1 dòng này) và thêm đoạn code vào dưới nó
<!-- Disqus Comment Count Start-->
<a class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'/>
<!--Disqus Comment Count End-->
- Lưu Template lại

Hiển thị comments mới nhất

- Tiếp theo vào Layout bấm Add a Gadget mới chọn HTML/Javascript và thêm đoạn code dưới đây
<div id="dsq-recentcoment" class="dsq-widget">
<script type="text/javascript" src="http://_Disqus_Shortname_Cua_Ban.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=150&hide_mods=0"></script>
</div>

hien thi comment moi nhat disqus, Recent comments Disqus, comment moi nhat cho disqus, Thêm Disqus Recent Comments cho Blogger, comments gan day tu disqus, tien ich comment gan day cua disqus

Ở đây mình hướng dẫn các bạn tích hợp nó bằng cách thủ công. Ngoài cách này, bạn có thể tích hợp theo các bước hướng dẫn của https://disqus.com

Tôi nghĩ rằng đây là một hệ thống bình luận tuyệt vời cho blog của bạn. Nếu bạn yêu thích nó, bạn có thể cài đặt ngay bây giờ, vì nó có đầy đủ các tính năng cho một hệ thống bình luận chuyên nghiệp.
Xem thêm tài liệu hướng dẫn tại đây

2 comments: