A Gravatar is a Globally Recognised Avatar and it is quite simple to add Gravatar support to your blog comments. I will show you how to do it in a few simple steps using PHP. I’ll also list some tutorials on how to add Gravatar support to your blog in other ways by using JavaScript, .Net and Java.
Adding Gravatar support with PHP
Let’s assume that you have a blog and you want to add Gravatars to the comments. Basically you will need 3 things to get started. The email of the person making the comment (This can be collected from your comment form), a default Gravatar image on your server in case some people don’t have a Gravatar and finally you need to define the size of the Gravatar image you want. Here is the code you need below.
//The email of the person making the comment $email = "[email protected]"; //A default Gravatar image to use for people without Gravatars $default = "http://www.somewhere.com/default.jpg"; //Define the size of the Gravatar image $size = 80;
Now you’re ready to display your Gravatar. To generate your Gravatar URL simply use the code below.
$grav_url = "http://www.gravatar.com/avatar.php? gravatar_id=".md5( strtolower($email) ). "&default=".urlencode($default). "&size=".$size;
Basic comments template
Now let’s style it up a bit to look like the comment image above. Here is a basic template to style your comments with the Gravatar included on the left.
<style>
/* Styles for comments */
.comment{border:#CCC solid 1px; padding:20px;}
.comment img{float:left: padding:0px 20px 20px 0px;}
.comment .h4{font-size:18px;}
.comment p{padding:5px 0px;}
.comment .date{font-size:10px; font-style:italic;}
</style>
<div class="comment">
<img src="<?php echo $grav_url ?>" />
<h4>Joe Blow</h4>
<p class="date">Date of comment goes here</p>
<p>The comment goes here</p>
</div>
More ways to add Gravatar support to your blog comments
- WordPress Gravatar Plugin
- Drupal Module
- Joomla Gravatar Support
- JavaScript Gravatar Implementation
- .Net Gravatar Implementation
- Java Gravatar Implementation
Adham Dannaway
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
Gravatar supports add to the work of blogger. They can try these steps to upgrade their way of commenting.
Nice Post
i actually just started learning how to use gravatar, and its helpful to see your post. the only problem is how to find blogs that support gravatar for me.
I don’t know if this post was created before this…but they have added this functionality as the default behavior in WordPress. I had it on my site even before I knew it! 🙂
Yep, most WordPress themes have Gravatar support but not all of them do. It depends whether the theme creator included it in the comments file. This method outlined above works for any type of blog, not just WordPress ones. 🙂
I like this concept. I visited your blog for the first time and just been your fan. Keep posting as I am gonna come to read it everyday z