How To : Display Recent Comments with Avatar (Gravatar)

Blogging is also a social network, you follow some interesting blogs and your blog is also followed by others. You often leaving a comment on your friend’s blog post, and your friend reply your comment. If you have a blog, make sure that your readers know what post is being discussed, this would invite your readers to join the discussion. Or, the readers just want to say thanks and say hi. It’s no problem.

To display your recent comments on the sidebar, of course with the avatar (Gravatar), you can use the hard coding or use a plugin. Gravatar has been integrated with WordPress, so you’ll have no problem to show the avatar. The easiest way to display the recent comments is by using a plugin. There are so many plugins to handle it.

I’m using Get Recent Comments, this plugin has a great features. You can manage the components to be displayed, such as gravatar, comment author, date, comment excerpt, and many more. You can also display it with your own style, use a custom CSS to make a better layout.

Here is the shortcode :

% Comment_excerpt - Shortened comment.
% Comment_link - link to the comment.
% Comment_author - left by the commenter Name
% Comment_date - Date of comment
% Comment_time - Time of comment
% Comment_type - Comment, Trackback or Pingback
% Time_since - Time since comment was posted
% Userid - User ID of the commenter
% Gravatar - Gravatar of the commenter, the full img tag
% Gravatar_url - Gravatar of the commenter, only url
% Profile_picture - URL of profile picture
% Author_url - URL of the author or trackback
% Author_url_href - href = "% author_url" or empty
% Post_title - Title of the post
% Post_link - Link to the post
% Post_date - Date of the post
% Post_counter - Number of comments to this post

Now, Can you make a cool recent comments widget.

I’ll give an example:

I will show the recent comments with gravatar, comment author, and post title.

<li><span class="comment-author"><a href="%author_url" 

title="%comment_author">%gravatar</a></span><span 

class="author-name"><small><em>

%comment_author</em></small> :

 <a href="%comment_link" 

title="%post_title, %post_date">

%post_title</a></span></li> 

Add a CSS styling to your theme.

.comment-author img {
border:1px solid #cccccc;
padding:2px;
backgound-color: #eeeeee;
margin-right:4px;
}
.comment-author {
text-align:left;
padding-bottom:5px;
}
.author-name {
float:right;
text-align:left;
}

That’s it, you can see the demo on my sidebar.

Happy blogging..

Cheers..