Thêm nút Like cho Thread Comment

bài viết trước đây mình có hướng dẫn tạo nút Like cho những nhận xét. Tuy nhiên nó có nhược điểm là nếu bài viết càng nhiều nhận xét thì tốc độ tải trang càng chậm theo, và đó là dành cho phiên bản nhận xét cũ của Blogger. Trong bài viết này mình sẽ hướng dẫn tạo nút Like cho nhận xét ở phiên bản Thread Comment mới. Vẫn được sử dụng tiện ích Star Ratings "cây nhà lá vườn" của Blogger tuy nhiên không gây xung đột với tiện ích này ở phần đánh giá bài viết, chỉ tải về khi đưa chuột vào nút Like do đó không làm chậm blog.

like comment


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF-_RlwBfR9gpWJvdRF_oTMHIUoOCfgoYqdMoXiM_MyZp83AYh0kpXg2qjhqz0-GDi1zGx8bCHFFi4Q7UXRz_j6QNJgTYGKTYRYuRURoJj-PKtRfdiUEedKrnIfaHh2fJXYObEqk8G8o/s10/like.png) no-repeat}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:
var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây:
var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.
<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Mang về blog và hãy bấm Like cho nhận xét mà bạn thích nhé!

Hướng dẫn thủ thuật Blogger, Blogspot

53

Nhận xét
1

Tuyệt, cảm ơn nhiều, để mình thử xem nào :D

Reply Xóa nhận xét
3

Trang của cậu die rồi, chỉnh DNS lại đi cậu...

Reply Xóa nhận xét
2

oh. chuẩn quá. like mạnh nào anh em

Reply Xóa nhận xét
4

cho mình hỏi ngoài lề 1 chút là có cách nào sắp xếp comment mới nhất lên trên không và cách phân trang cho comment. Nhiều comment mới trên blog của mình nhưng nó toàn xếp dưới trong khi lượng comment lại nhiều kéo mãi mới xuống dưới được. Duy và mọi người có thể giúp mình không. Cảm ơn mọi người

Reply Xóa nhận xét
5

Quá tuyệt , điều mà nhiều người mong đợi ảnh hưởng từ Facebook :D
Cái này cũng tiện , nhiều người vào xem nhưng lười comment thì like 1 cái cho nhanh

Reply Xóa nhận xét
6

Blog anh chưa thêm vào à!

Reply Xóa nhận xét
Nặc danh 19/12/12 00:30
7

Phạm Duy toàn có hàng ngon không ak, thủ thuật này rất hay! :D

Reply Xóa nhận xét
9

Cá nhân HHV thấy cái này khá hay nhưng vẫn bị lấn cấn...

Phải để cho người khác thấy số lượng đánh giá thì sự đánh giá đó mới có ý nghĩa

Duy hy sinh việc hiển thị số lượng người like để tăng tốc độ tải trang. Việc này vô tình làm ẩn đi hết tất cả các like trước đây khiến cho việc đánh giá mất đi ý nghĩa của nó.

Reply Xóa nhận xét
11

Nhược điểm của nó là muốn xem có bao nhiêu đánh giá cho nhận xét đó thì phải move chuột vào nút like. Đành chịu vậy vì Blogger dùng iframe chứ k phải js hay xml nào cả :(

Reply Xóa nhận xét
10

Khi bấm like nó giật giật sao ý nhễ!?

Reply Xóa nhận xét
17

Sinh nhật vui vẻ nha duy

Reply Xóa nhận xét
19

Giáng sinh đến rồi :)
Chúc bác có 1 mùa giáng sinh vui vẻ bên gia đình và người thân ^^!

Reply Xóa nhận xét
20

các bác cho hỏi tí. like cái cmt này có lợi gì cho seo ko nhỉ?

Reply Xóa nhận xét
21

K có lợi gì cho SEO cả :D

Reply Xóa nhận xét
22

Mình cũng mới xây dựng blog, có 1 số khó khăn, bạn hỗ trợ cho mình 1 chút được không,nếu được thì không biết có thể liên lạc với bạn như thế nào

Reply Xóa nhận xét
23

Cuối năm nên mình rất bận, qua Tết mình sẽ support thường xuyên hơn.

Reply Xóa nhận xét
24

Cái này dùng tiện ích mặc định của blogger nên load cũng khá nhanh

Reply Xóa nhận xét
25

Mình chuyển sang dùng disqus luôn rồi, hệ thống đánh giá của nó khá hoàn thiện

Reply Xóa nhận xét
26

Disqus, tốc độ load trang của bạn không ỗn lắm thì phải ?

Reply Xóa nhận xét
27

Tốc độ tải rất ổn cậu à... :) thứ nào cũng có điểm mạnh điểm yếu hết. Vấn đề là mình chọn lựa thôi...

Reply Xóa nhận xét
34

Đúng là hệ thống của dis khá hay nhưng mình vẫn thích hệ thống comment của blogger hơn, tốc độ mình thấy khá tốt hơn tuy nhiên nếu nó cho tùy chỉnh số comment ở mỗi trang nữa là rất ok.

Reply Xóa nhận xét
28

nhìn bắt mắt quá!

Reply Xóa nhận xét
29

Anh Duy Phạm, em muốn hỏi anh một số vấn đề về tốc độ tải trang và thời gian tải trang của Duy Pham Blog và Noct Blog.
Cụ thể là em thấy noct blog và duy pham blog có thời gian tải thấp dung lượng trang thấp (35kB) còn noct blog thì dung lượng cao (135kB) nhưng thời gian tải trang thấp.
Vì sao lại như vậy hả anh?

Reply Xóa nhận xét
30

Dung lượng blog của mình nhỏ nhưng cái recent comment lại thực hiện request tới feed nhiều lần, có ít nhất 7 request và nhiều nhất là 12. Những lần request tới feed này gây tốn thời gian nhưng bù lại thì recent comment có thêm nhiều tính năng :D

Reply Xóa nhận xét
31

Vậy làm sao để trang có tốc độ tải cao hả anh?
Trang của em thấp lắm khoảng 2-3,5kb/s còn trang của anh thì 7kb/s là chuyện bình thường.
Tại sao thế hả anh?

Reply Xóa nhận xét
32

Tối ưu HTML và js, cái này nói thì chung chung lắm nên mình k biết phải nói từ đâu. Loại bỏ những widget gây nặng và k quan trọng, bạn vào trang gtmetrix.com để test xem cần tối ưu những gì nữa.

Reply Xóa nhận xét
33

Anh Duy cho em hỏi là anh đặt mấy cái css trong thẻ style hay trong b:skin vậy?
Với lại mấy cái đoạn mã js thì anh đặt trong thẻ head hay cả trong thẻ body nữa? theo anh thì mình nên đặt chúng ở đâu là hợp lí nhất hả anh?

Reply Xóa nhận xét
35

Xin pép bác Duy nha
1. Hạn chế widget nặng như dùng file flash, ko dùng tiện ich google custome search của blog, tiện ích người theo dõi load cũng mất rất nhiều time nếu nhjều người then dõi đó.
2. Gjảm request thì nén ảnh bằng CSS Spriter => cái này khó và khá phức tạp đòi hỏi photoshop chuẩn để tất cả trong 1 và am hjểu về CSS.
Nếu ko hiểu về cái này hãy thay backgroup bằng mã màu thay vì hjnh ảnh. Với hình ả ko thể bỏ thì nén xuống.
3. Chèn thẳng javascript vào template. Xoá bỏ phần chú thích trong file javascript cũng gjảm tương đối kb đó.
4. Gộp các thuộc tính Css trùng nhau làm 1.
5. Xoá styleship cái nay bác duy gjới thjệu rùi đó search đi.
6. Nếu có thể thì dùng các tiện ích ko có javascript như: auto readmore no javascript, menu with css.
7. Loại bỏ các thành phần XML trong template ko dùng đến. => phần này nếu ko hjểu thì đừng xoá bỏ lung tung ko là đi đó.
8...
9...
Bạn tìm hjểu dần nha.

Reply Xóa nhận xét
36

Anh Duy cho em hỏi về cái vụ tab jquery với, blog của em đây: http://ceewave.blogspot.com
Khi mà các em chưa chèn widget html thì nó bình thường, bây giờ em chèn vào html widget thì nó lại khô nghoạt động nữa, các tab không ẩn được. Anh giúp em giải quyết với

Reply Xóa nhận xét
37

Chào Duy!
Bạn có thể hướng dẫn mình tạo dòng "Cancel reply".

Reply Xóa nhận xét
38

Mình làm rồi nhưng không thấy hiện ra nút "Like " đó bạn ơi ! Các bước chỉnh code đều chính xác mà.

Reply Xóa nhận xét
39

Chưa có code đó trong temp của bạn, chú ý là ở bước 2 đoạn mã (function() { giờ đây có tới 3 cái, chọn cái thứ 3 nhé.

Reply Xóa nhận xét
40

Trong temp của blog mình có tới 4 cái lận bạn ơi ! Vậy mình sẽ thay ở cái thứ mấy?

Reply Xóa nhận xét
41

Mà thôi Duy ơi! Mình thử đủ cách hết rồi không thành công,chắc là do đụng code ,nhà mình cài thủ thuật tùm lum giờ không biết đâu mà chỉnh sửa.Cám ơn.

Reply Xóa nhận xét
42

Nhận xét này đã bị quản trị viên blog xóa.

Reply
43

Cam on anh Duy. hay lam

Reply Xóa nhận xét
44

Blogger mới cho phép chèn Google + làm comment rồi, dần hệ thống comment cũ sẽ bỏ đi hết.

Reply Xóa nhận xét
45

Nó cũng giống như hệ thống comment của Facebook vậy, hoạt động nhiều bên mạng xh thì nên dùng. Còn hệ thống comment cũ thì vẫn giữ nguyên thôi.

Reply Xóa nhận xét
47

Duy oi! Bạn có thể xem lại giúp mình được không, mình làm đúng nội dung hướng dẫn nhưng không Like được, mỗi lần rê chuột vào nó lại dựt dựt hoi khó chịu.

Rất mong nhận được sự giúp đỡ.

Reply Xóa nhận xét
48

anh ơi cho em hỏi, muốn tăng khoảng cách giữa dòng trên và dòng dưới của tiêu đề bài viết trong blogspot phải làm như thế nào hả anh?
ví dụ như ở bài viết này http://www.vietsoft.org/2013/06/ngam-mau-thiet-ke-tuyet-ep-ve-hh.html tên của bài viết bị kít quá.
mong anh chỉ giúp em ạ.

Reply Xóa nhận xét
49

Có liên quan tới like của FB ko ban?

Reply Xóa nhận xét
Nặc danh 21/7/13 23:31
50

I want to try it.I like this artikel.

Reply Xóa nhận xét
51

Sao không có ai nghiên cứu thêm và nâng cấp những tiện ích hay như thế này nhỉ!

Reply Xóa nhận xét
52

Cảm ơn chia sẽ của bạn, nhưng mình không thể vừa chèn đánh số thứ tự coment và nút like vào một lúc nhĩ. Mình cần cái giong như bản demo của bạn. mình chỉ chèn được code dánh số thứ tự thôi à. blog mình là: quangvanhai.blogspot.com

Reply Xóa nhận xét
53

Thủ thuật này, hiện giờ hình như không còn dùng được nữa phải không bạn Duy nhỉ?

Reply Xóa nhận xét

Đăng nhận xét

Cancel