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

Ngày Thứ Ba, 13 tháng 9, 2011 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Recent comments với ảnh đại diện
Chúc bạn xem tin tức vui vẻ !!

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVA3RhvN99xRQ9-QO16YY-SO9qop2JuQm7rJlOGQmw1CvXSrJ1B2kg9xYPB063CziXpL96lob_U7EBB413AogYCMhgAJpGq0upJfvreXaroPOimvnPMnOHbpciTaXNXhj51xUw-Rlw919U/) 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'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsylHg67wVHL_y5Z8CrodrpG4_peWJhi0WNzpBDsx7Q901b2HthXE8k4LUne_9EpXnDWCIXE-JgXEIaYPbkr_la4fm8hqOhBx4RzPC53YXhi3-CuSiOUilZYjWxp1sG6JcjSgsYSDGyX5/";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0nJTTfhno8Igd7eYzz4Gp5HMoOTFb99kGFq4QjK9AO55jlJKNXU9Cq2Qavz8EuuPchtd2B50iZ8poYyTo5UJmA12xjvkgY3bwhk_wV0HAgf_z_USB_34Db400_w-52klg-Hu3K8zyfdK/";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZaqhpILVteApV6BS3j4KIScm269lQeEV8RGqz1yPmpPdGOTLssgIjJe5jva0Z5UBkEOGqynCBwJpr_-XnlC1g8ML25JXYD_oAfX2EZUjDzcoIUVTZ_-wEBPoTkuKFVfTK_DKmtQpXfmUm/";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHRVgKAO-GBkMcCM9Fm1n9aPk3tFdhleONDz-cdf4J2AwwlvAH_yYXdL7b2_rRh10BGihCMF0jzwrwZWCUVh_QXuuEydnQ3gvj09u_NtiT2y24J1_kPKLosWkeRJwRjY9C4k7ANhD6e2M/";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgYqj45gSlvwDssPDE7kHpRsgE58A4RkoVd5lzyAwMVfZngYws4d24iFEEKNAep08aUbRMK4O4bdB873z2aktEsqWJSNXVoAKezeeMStaAWyC6bCA6Exg_MeRmK9SBxn16DFevSnXM52F9/";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBKRbbGzxq8IaYbKdlxdhREyGJB11SolzbAnb322znfXyfJzR2TUdtLdubg25wNR5paaii6gGegA1p2N95FA2CnEVj70FfB3iP0WZmK_YmN3Do_Cx0qO_wlG-qNGuraH0dhqU2mCAxnVA/";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJuTKEmyTO3swfhhKZ1TD6VIrmGtHs-SGwUAaqB2Rezhk0fGc3s8gHJKazBhhDTlIg2nS4Dqpd7eD1zSivWYaecJMT62V2Z0k-mOlvSLPmZInBGu35IqgLM3T5PqjwpOsiQzlMhyphenhypheno4Qbo/";

</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ànhava_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.

Nguồn:Blog fandung