Loading post navigation ...
 
 

Pro page

39
Nhận xét

Recent comments với ảnh đại diện

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Như đã thông báo, hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật hoàn toàn mới. Đó là thủ thuật hiển thị các nhận xét mới nhất cho blog (hoặc 1 bài viết nào đó), điểm nổi bật ở thủ thuật lần này là sẽ hiển thị ảnh profile của người comment (đối với tài khoản blogger), và sẽ hiện thị avatar đại diện cho những người thuộc nhóm khác như : wordpress, AOL, ... Ngoài ra đối với những bạn comment với tài khoản blogger mà chưa add hình đại diện thì cũng sẽ hiển thị chung 1 ảnh đại diện.


Thủ thuật này đã được thay thế bằng thủ thuật mới 
--> xem ở đây
Trước kia mình cũng tường giới thiệu việc tạo ảnh đại diện cho các comment của các bài viết. Và sau này khi blogger đã include ảnh đại diện vào phần comment của bài viết thì thủ thuật đó đã không còn cần thiết nữa. Và lần này cũng vậy, khi mà blogger chưa include ảnh đại diện vào feed của comment thì mình giới thiệu cho các bạn thủ thuật này. Nếu sau này blogger có include thêm ảnh đại diện vào phần comment thì có lẽ thủ thuật này sẽ không còn cần thiết, bởi vì chắc chắn việc lấy ảnh profile theo thủ thuật này sẽ chậm hơn nhiều so với lấy ảnh trực tiếp từ feed.

Ý tưởng thủ thuật này mình cũng đã nghĩ tới từ lâu, nhưng lúc đó chưa biết cách làm như thế nào, gần đây mình có đọc comment của 1 bạn trên blog mình nói là hiện tại chưa có ai viết thủ thuật tạo ảnh đại diện cho tiện ích các nhận xét mới nhất (recent comments) và hy vọng mình có thể giới thiệu thủ thuật này cho mọi người. Và điều này thôi thúc mình suy nghĩ cách để lấy ảnh profile của blogger. Thông tin duy nhất trong feed comment để có thể lấy ảnh profile của blogger là chỉ có link profile của tác giả. Và mình đã cố suy nghĩ làm sao để lấy ảnh từ link profile này, sau 1 khoảng thời gian dài mò mẫm, test đi test lại thì mình đã thực hiện được điều mình muốn. Nói thật nếu như rành 1 chút về javascript và php thì có lẽ mình đã không tốn nhiều thời gian để thực hiện thủ thuật này.

Và đây là demo của thủ thuật:
- DEMO 1 : xem comment mới nhất của cả blog.
- DEMO 2 : xem comment mới nhất của 1 bài viết.

Hình ảnh minh họa 
và 1 số ảnh avatar đại diện cho các nhóm comment.


Thủ thuật này do phải lấy ảnh profile của blogger nên sẽ load lâu hơn thủ thuật cũ (không có ảnh đại diện), vì thế mình có lời khuyên nho nhỏ cho các bạn sử dụng thủ thuật này là nên để nó load sau cùng. Làm vậy ta sẽ có cảm giác blog không bị chậm. Để nó load nhanh hơn thì gần như là không khả thi, còn việc muốn nó hiển thị khi blog được load xong hết (tức là vị trí đặt tùy ý, không cần đặt ở cuối trang) thì mình hiện thời chưa test được. Khi nào test được mình sẽ update thủ thuật sau.

Và đây là code của thủ thuật :
- các bạn tạo 1 widget HTML/javascript rồi dán code bên dưới vào :
<style type="text/css">
#rcommentfd {width:300px;}
img.rcav-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
td div.rcav-content {font-size:12px!important;}
div.rcav-content .rcav-author {background:url(http://lh4.googleusercontent.com/-H1sj0v33hIU/TgNJoS2D-6I/AAAAAAAAB1I/sUpra9uRIb4/rc-avatar-bg.png) no-repeat bottom left;padding-bottom:11px;}
div.rcav-content .rcav-sum {background:#efefef;padding:5px;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
</style>

<script type="text/javascript">
ava_mode = "single";
var cm_num = 5;
var cm_desc = 30;
var homepage = "http://www.fandung.com";
postID = "6268184133967397100";

var cm_ava = new Array();
cm_ava['openid'] = "http://lh6.googleusercontent.com/-uf0uxbEp4Zs/TgNJppowi6I/AAAAAAAAB1c/qmkdGd12iJY/openid.png";
cm_ava['livej'] = "http://lh4.googleusercontent.com/-ncOJFLxjHTc/TgNJpWhHBVI/AAAAAAAAB1Y/bg87urldP3k/livej.png";
cm_ava['wp'] = "http://lh3.googleusercontent.com/-pI1VhTlH9ss/TgNJot558TI/AAAAAAAAB1E/A469MiNkEVg/wp.png";
cm_ava['typepad'] = "http://lh4.googleusercontent.com/-QEKJ1rr4D2o/TgNJoZSTvII/AAAAAAAAB1A/ml5MtgyRfhE/typepad.png";
cm_ava['aim'] = "http://lh4.googleusercontent.com/-CY3WnoiAnk8/TgNJokYOjeI/AAAAAAAAB1M/a_56pS5vvG8/aim.png";
cm_ava['url'] = "http://lh5.googleusercontent.com/-lz5ikgnJDZw/TgNJoPiZ00I/AAAAAAAAB08/qLvloo_HaHo/url.png";
cm_ava['anon'] = "http://lh4.googleusercontent.com/-u-xJmUDbxGI/TgNJpJS8hEI/AAAAAAAAB1U/sC51rFWinQE/guest.png";

</script>
<script src="http://data.fandung.com/blog/demo/rcomment-avatar/recent-comment-avatar.js" type="text/javascript"></script>


Sau đây là 1 vài lưu ý:
- thủ thuật có 2 chế độ hiển thị, ở code mẫu ở trên là chế độ hiển thị comment cho 1 bài viết, lưu ý là phải thay đổi lại dòng code postID = "6268184133967397100"; cho đúng với số ID của bài viết mà bạn muốn hiển thị comment (có thể xem ở đây để lấy số ID của bài viết). Nếu muốn hiển thị comment cho cả blog thì các bạn thay đổi dòng code này ava_mode = "single"; thành ava_mode = "all";
- biến var cm_desc = 30; : là số chữ hiển thị (lưu ý là chữ chứ không phải ký tự).
- biến var cm_num = 5; : là số comment sẽ hiển thị.

Chúc các bạn thành công.


Enter your mail address:

39

Pika Rock

thủ thuật này quá hay đi anh, nhưng em thấy vẫn bị lỗi font utf8 , sẽ ngâm cứu và áp dụng

Mèo Blog

mang về dùng ngay cho nóng! e cảm ơn a DŨng nhiều

Jack

thủ thuật hay đó nhưng bị lỗi font rồi, thanks nhé... :)

Phan Dũng

à, lỗi font là do thẻ meta trong file demo của mình thôi, đã fix

Duy Pham

Híc, hay thì hay thật nhưng nó load ì ạch ghê ~x(. Với feed chuyển hướng sang feedburner thì nó k hoạt động. Mình thử decode file widgets.js của blogger để tìm hiểu cách load avatar mà k ngốn nổi mớ js của nó.

Phan Dũng

đúng rồi, load hơi ì ặch. Đây là 1 nhược điểm của thủ thuật. ko biết sau này có khắc phục được ko

Phan Dũng

sao demo vẫn bị lỗi font nhỉ, có khi nào do feed của mình ko nhỉ, hay do host của mình, chài ...

Duy Pham

Demo k có tag charset=UTF-8 mà FD nên lỗi font TV

Administrator

bị lổi font rùi bác d ơi

Noct

Thủ thuật này hay quá, nhưng feed chuyển sang feedburner rồi thì không hoạt động ?

Tốc độ không phải là vấn đề đối với mình :)

Nguyễn Đức

Lỗi không thu nhỏ hình ảnh

Phan Dũng

@Nguyễn Đức : lỗi ko thu nhỏ hình ảnh gì bạn, ảnh đại diện đó hả. Nếu vậy thì mình đã fix lại rồi :D

Yolks

:D ko biết xong chưa ta

Affiliate Marketing Tips

@Yolks: chưa,bạn đợi thêm một thời gian ngắn nữa nhé,đang nghiên cứu :D

Lê Công Tiến (Panda)

FanDung ơi, nếu FD có thời gian thì giúp dùm mình cái này nha, bữa giờ định nói với FD rồi mà cứ ngại :D

Mình có trang shop online http://pandashopvn.com. Mình nhờ FD xem giúp tại tốc độ load của shop hơi chậm. FD giúp mình làm sao mà khi load trang thì nó sẽ hiển thị cái nào load rồi sẽ xuất hiện, còn chưa thì load từ từ... chứ ko như shop mình, load hết trang nó mới hiển thị (trừ trang chủ). Làm cho có cảm giác chậm đi.
Nói chuyện ko hay nên không biết FD hiểu không, có gì giúp dùm mình nhé. Thanks FD nhìu nhìu ^.^

P/s: Hình như D bỏ phần Logo Exc thì phải, vậy D add dùm mình link http://pandashopvn.com với tên Panda Shop - Men's Fashion nha. Bên PandaBlog lúc nào mình cũng add D hết ah ^.^ Thanks lần nữa :D

Yolks

đừng quên nha anh Dũng 12 ngày trôi qua rất nhanh ^F^ chúc anh vui vẻ đẹp trai , có 1 cô bồ xinh như hoa nhé

Huỳnh Nhật Hà

Load chậm thì nhiều blogger k thích, fix được thì tốt nhưng rất khó đây. Hy vọng Blogger sẽ có cải tiến gì đó để mình tạo widget kiểu này mà k cần đến javascript. Lúc đó sẽ nhiều người xài.

Bùi Quang Truyện

nang qua, load ko noi

Bùi Quang Truyện

Làm sao dể tao subdomain cho domain fandung vậy Dủng vi du như data.fandung.com ...đặc thù là như vậy thôi, mình đả add ghs.google.com vào bản ghi cua freedocs.us, và giờ mình muốn tao 1 sub là data.freedocs.us để add vào host thì làm sao nhỉ ? Mong được sự giúp đở!

vietutd

http://www.mmoviet.com/p/thread-content.html?mn=1&url=http%3A%2F%2Fwww.fandung.com%2F&label=Ph%C3%A1t%20tri%E1%BB%83n%20c%E1%BB%99ng%20%C4%91%E1%BB%93ng%20blogspot&num=1

zui wé, zui wé, FanDung dạo này lại viết thủ thuật zùi :D

Fishers Of Men

BLog FD có thể hướng dẫn cho mình về phần comment Disqus của blog mình để trở lại thành phần comment như blog của bạn không, mình không bik chỉnh sửa ở phần này. Phần comment của mình ko phải là 1 Widget nữa cho nên chưa bik sửa chữa thế nào, bạn vui lòng giúp mình nha!

Binh Nguyen

mình thấy có chậm đâu nhỉ, mọi người thử blog có thêm Widget recent comment của fandung bằng trang http://tools.pingdom.com sẽ thấy mà

Binh Nguyen

mình thấy là avatar trong nhận xét ở bài viết (chữ B màu vàng) và avatar khi ở trang home (avatar thật của người viết) khác nhau, làm sao cho giống nhau được?

Việt Nam

anh dũng ơi , sao anh không thêm đường dẫn tới comment đó trong code luôn hả anh, ví dụ anh thấy comment đó rồi muốn đến xem thử thì phải làm sao, anh thêm nhé, blog của em đây http://ghost2s.blogspot.com, nhân tiện cũng xin add test link với anh luôn

Phạm Minh Tâm

( Hãy đến mà xem - Magic Trees Templates )

Truyện's Blog

domain fandung.com không hoạt động, click vào derect nhé dũng.

NAD

Lâu ko có bài mới nhỉ :D

DinhThang

Em muốn hỏi " Nếu muốn hiển thị comment cho cả blog thì các bạn thay đổi dòng code này ava_mode = "single"; thành ava_mode = "all"; "
thế thì còn postID = là bao nhiêu? em vẫn chưa dùng được anh Dũng à.

vihienhoa

bạn chỉ cho mình tạo khung nội qui comment đi

PhaMDaT

:))

Admin

phim tam ly

hi.thank a Dũng

chinhnd

nẾU ẢNH hưởng tới tốc độ load của blog thì là một vấn đề nan giải nhỉ, bởi nó ảnh hưởng tới SEO nữa mà.

QuyetN

TRang phim tâm lý toàn phim ếch

KuKen

em kết mẫu này :D
ý có em trên hình demo :"> - ngại quá à :D

Nescafe ais satu
Kenny G

Mình sẽ post lại vào trang bảo vệ của mình. Cám ơn bạn nhiều nha.

ChipKool_Online

thủ thuật này hay,code recentcomment cũ của em cũng có js,mà lại ko đẹp như của anh Dũng,em thử chạy ngon,load ầm ầm,chỉ tại em bị mấy recent vnexpress mỗi cái xơi 1 js,hic,tối nay em vọc lại đây,huhu

Admin

Thanks bác, đã post thành công. Demo: http://tanchau123.blogspot.com :D

themevn

themesvn.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home