Chủ Nhật, 25 tháng 9, 2016

Hướng dẫn tích hợp Disqus vào Blogger

Hướng dẫn tích hợp Disqus vào Blogger
Disqus là một trong những hệ thống bình luận phổ biến nhất hiện nay, đặc biệt là hoàn toàn miễn phí. Nhờ giao diện đẹp và nhiều tính năng Disqus đang được tin dùng bởi hàng triệu website trên thế giới dù lớn hay nhỏ. Bài viết này sẽ hướng dẫn cách tích hợp hệ thống bình luận comment Disqus vào Blogger.


Đăng ký sử dụng Disqus

Điều đầu tiên là cần phải có tài khoản Disqus, nếu chưa có thì vào trang sau để đăng ký: Sign up Disqus

Tạo Disqus cho blog

Đăng nhập vào Disqus, sau đó tạo một Disqus mới theo đường dẫn này:
Hướng dẫn tích hợp Disqus vào Blogger
Nhập đầy đủ thông tin rồi bấm Next.
Tích hợp Disqus vừa tạo vào Blogger:

Cách 1: Theo hướng dẫn của Disqus

1.1 Chọn platform

Sau khi đăng ký xong thì Disqus hiện ra một loạt các nền tảng Blog để ta lựa chọn, tất nhiên bài viết này nói về Blogger nên ta sẽ chọn Blogger rồi :)
Hướng dẫn tích hợp Disqus vào Blogger
Trong trường hợp Disqus không hiện ra bảng này thì bạn truy cập vào địa chỉ https://***.disqus.com/admin/settings/install/  , trong đó *** là tên của Disqus bạn đã tạo, ví dụ của mình là https://upsot.disqus.com/admin/settings/install/

1.2 Thêm vào Blog

Ở trang tiếp theo chọn mục số 1 : Add *** to Blogger site:
Hướng dẫn tích hợp Disqus vào Blogger

1.3 Thêm Widget Disqus vào Blog

Tiếp theo, Chọn đúng Blog bạn muốn tích hợp Disqus (trong trường hợp bạn có nhiều Blog), sau  đó nhấp Add Widget :
Hướng dẫn tích hợp Disqus vào Blogger
Qua bước này là Disqus đã được tích hợp vào Blogger rồi, nhưng chưa xong đâu :)

1.4 Chuyển tất cả nhận xét cũ qua Disqus

Để Disqus nhận tất cả những nhận xét trước đây của Blogger thì bạn cần quay lại bước 1.2, và chọn mục số 2: Import your existing Blogger comments into Disqus.
Tại đây các bạn chỉ quan tâm đến phần Sync New Comments, các bạn chọn Enable syncing, các bạn cấp quyền truy cập và chọn đúng blog của mình bước này giúp Blogger và Disqus tự động đồng bộ các nhận xét với nhau:
Hướng dẫn tích hợp Disqus vào Blogger
Sau đó quay trở lại bước 1.2, chọn mục số 3 là bước cuối cùng để Disqus tương thích với IE
Hướng dẫn tích hợp Disqus vào Blogger

1.5 Ẩn comment cũ

Chèn đoạn code sau vào trước thẻ ]]></b:skin> hoặc </style>
#comments {display:none;}
Xong, như vậy là đã hoàn thành việc tích hợp Disqus vào Blogger rồi

Cách 2: Thêm code thủ công

Làm theo cách này thì hệ thống comment của bạn sẽ tương thích chuẩn HTML5

2.1 Tìm shortname Disqus :

- Ở bước 1.1 bên trên, bạn chọn Universal Code, Trang mới hiện ra, bạn chú ý vào khung code bên dưới:
Hướng dẫn tích hợp Disqus vào Blogger
Kéo thanh cuộn xuống và tìm đoạn code có dạng:
 s.src = '//***.disqus.com/embed.js';
Trong đó *** chính là shortname, ví dụ site mình là upsot
- Hoặc bạn cũng có thể tìm  shortname bằng cách:
Làm bước 1.1, 1.2 ở trên, đến bước 3 thì bấm vào Edit template, một đoạn code xổ ra:
Hướng dẫn tích hợp Disqus vào Blogger
Ta dễ dàng thấy shortname trong dòng code:
 var disqus_shortname = '***';
*** chính là shortname Disqus

2.2 Thêm Disqus vào Template

Vào chỉnh sửa Template, sau dó copy đoạn code:
             <script type='text/javascript'>
                var disqus_shortname = &quot;upsot&quot;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
                    (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                })();
                </script>
Và dán xuống phía dưới đoạn:
  <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
Bạn nhớ thay upsot bằng shortname Disqus tìm được bên trên 
- Chèn đoạn code sau vào trước thẻ ]]></b:skin> hoặc </style>
#comments {display:none;}

Cách 3: Chèn code thủ công

cách này khác cách trên là sẽ không cần dùng javascript mặc định của Disqus

3.1 Tìm shortname Disqus :

Làm như bước 2.1

3.2 Thêm Disqus vào Template

Vào chỉnh sửa Template, copy đoạn code:
            <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>
Và dán nó bên dưới đoạn code trong Template có dạng:
            <b:includable id='comments' var='post'>
            ..............
            ..............
            </b:includable>
Sau đó copy đoạn code bên dưới và dán lên trên thẻ </body> :
<script type='text/javascript'>
var disqus_shortname = &quot;upsot&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
</b:if>
Lưu ý là thay upsot bằng shortname của bạn
- Copy đoạn code:
<b:include data='post' name='disqus-comment'/>
và dán nó phía dưới đoạn code có dạng sau:
            <b:includable id='comments' var='post'>
             <div class='comments' id='comments'>
- Chèn đoạn code sau vào trước thẻ ]]></b:skin> hoặc </style>
#comments {display:none;}
- Như vậy cơ bản là xong, cuối cùng để hiển thị số lượng comment Disqus ngoài trang chủ ta làm như sau:  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"' title='Comments Count'/>
<!--Disqus Comment Count End-->
Xong rồi lưu template.

0 nhận xét

Đăng nhận xét