Thư viện

Trải nghiệm

Thứ Bảy, tháng 9 03, 2011

Thêm nút Like cho comments Blogger

Chẳng còn gì nhanh chóng hơn 1 click Like để thay lời cảm ơn cho comment bạn thích mà đôi khi viết ra thì thấy cụt lủn, không viết thì "thâm tâm day dứt". Ngoài Hiển thị Xếp hạng theo Dấu sao (Star Ratings) hẳn bạn biết có 1 tiện ích đánh giá bài viết với nhiều lựa chọn hơn đó là Phản ứng (Reactions). Bài viết này sẽ giúp bạn đưa tiện ích đó vào đánh giá từng comment.

Chia sẻ:
Thêm nút Like cho comments Blogger
Google vừa bổ xung Google +1 vào Blogger và có vẻ như nút +1 này nhanh chóng chiếm được cảm tình của đông đảo Blogspotter. Google +1 thực hiện chức năng đánh giá cho bài viết, trang tĩnh, trang chủ hoặc trang lưu trữ, vậy còn comments? Chúng ta đều biết đến nút Like nổi tiếng đã trở thành thương hiệu của Facebook, thậm chí họ còn đăng ký bản quyền cho nó.
Hoặc không kể đâu xa, "người đóng thế" Disqus cũng có 2 lựa chọn Like và Dislike trong comments. Chẳng còn gì nhanh chóng hơn 1 click Like để thay lời cảm ơn cho comment bạn thích mà đôi khi viết ra thì thấy cụt lủn, không viết thì "thâm tâm day dứt". Ngoài Hiển thị Xếp hạng theo Dấu sao (Star Ratings) hẳn bạn biết có 1 tiện ích đánh giá bài viết với nhiều lựa chọn hơn đó là Phản ứng (Reactions). Bài viết này sẽ giúp bạn đưa tiện ích đó vào đánh giá từng comment.
Tìm trong template thẻ <data:comment.body/>. Sẽ có 2 thẻ như vậy, thẻ đầu tiên để hiển thị thông báo comment đã bị xóa và chắc hẳn bạn không muốn thêm nút Like cho nội dung này, hãy chọn thẻ <data:comment.body/> thứ 2 và thêm vào sau nó đoạn mã dưới đây:
<b:if cond='data:top.showReactions'>
 <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl + data:comment.id' frameborder='0' name='reactions' scrolling='no'/>
</b:if>
Sau khi lưu template lại bạn quay về Thiết kếPhần tử trang chọn Chỉnh sửa widget Blog Posts và đánh dấu vào lựa chọn Phản ứng. Tại đây chọn Chỉnh sửa và thêm những lựa chọn phản ứng mà bạn muốn ngăn cách nhau bởi dấu phẩy rồi lưu lại.
Thêm nút Like cho comments Blogger
Bạn chỉ muốn sử dụng Phản ứng cho comments nhưng Phản ứng sau khi bật thì đang hiển thị cả trên bài viết? Hãy tìm đoạn mã dưới đây trong template và xóa nó đi.
<span class='reaction-buttons'>
  <b:if cond='data:top.showReactions'>
    <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
      <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
        <span class='reactions-label'>
        <data:top.reactionsLabel/></span>&#160;</td>
      <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
     </tr></table>
  </b:if>
</span>

Lưu ý!
Mình không sử dụng thẻ <data:top.reactionsLabel/> là chữ Phản ứng: vì thấy không cần thiết. Những nút Phản ứng được đặt dưới nội dung comment, tùy sở thích mà bạn có thể đặt ở ví trí khác.
  • Ưu điểm là có thêm lựa chọn đánh giá cho từng comment để khuyến khích những comment chất lượng. Tuy nhiên nhược điểm sẽ làm giảm tốc độ blog đi đôi chút khi duyệt bài viết.

Chúc thành công!
Theo: Duyphamblog

6 nhận xét:

  1. @ www.ketnoitre63.tk: Bạn chú ý Copy Code cho đúng nếu sai một chữ cũng không được đâu. Một số Blog chỉ cần thực hiện 2 bước đầu thôi
    Chúc thành công!

    Trả lờiXóa
  2. Namkha có thể hướng dẫn về cách chèn các biểu tượng phản ứng cho bài viết trên Blogspot như trên Zing Me được không? Các biểu tượng như Đồng Cảm, Tặng Hoa, Trứng Thối,...

    Trả lờiXóa
    Trả lời
    1. Bạn có thể lựa chọn tại đây nha. Có rất nhiều cách đó: XEM NGAY

      Xóa
  3. mình muốn tạo nút like zing me giống trong mp3 trên blogspot có cách nào ko bạn

    Trả lờiXóa