Add Gravatar support to your blog comments

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 = "cornelius@blah.com";

//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;

add-gravatar-to-comments

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

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!

Share this post!

Tags: , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Boka Stockholm on December 4, 2009

    Gravatar supports add to the work of blogger. They can try these steps to upgrade their way of commenting.

  2. James on December 22, 2009

    Nice Post

  3. Emma Roberts on January 7, 2010

    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.

  4. Chris Roane on March 18, 2010

    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! :)

  5. Cre8ive Commando on March 18, 2010

    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. :-)

  6. nikeshoxoutlet on May 24, 2011

    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

Trackbacks


Have your say!