How to Implementing Gravatar in a PHP Application

Gravatar or globally recognized avatar is a service for providing globally-unique avatars for different applications.It was started by Tom Preston-Werner but it’s now owned by “Automattic”, the company behind WordPress. This is the main reason why this service is free and is available to be used on PHP applications other than WordPress. Today, there are a number of people using this service. That’s where Gravatar adds to the comfort of people because using it you can use the same avatar for different websites without even uploading an image to the website.

We’ll now make a simple PHP application which shows you the Gravatar associated with
an email. So let’s get started without wasting any time!

MAKING THE FORM FOR THE APPLICATION

Our HTML page will include a text-box (for email input), a command button (for submitting the form) and some space for displaying the Avatar image associated with the email.

Below are the contents of the “index.php” file.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Implementing Gravatar in your PHP Application </title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<span style="text-decoration: underline;"><h1>Integrate Gravatar in your PHP Application</span>

<div id="content">

<div id = "notification">

<p>Check your Gravatar using this Application.<br>

<b>Note:</b><i>We aren't storing your email-ids here!</i></p>

</div>

<br/>

<br/>

<div id="show">

<form method="get" action="index.php">

E-mail: <input id="email" name="email" type="text" /> <input id="submit" name="submit" type="submit" value="Show Avatar" />

form>

<p>Gravatar associated with your e-mail is:<br/>

</p>

</div>

<br>

</div>

</body>

</html>

You might have noticed/seen by now that I haven’t filled the “value” for the text input, that’s because we’ll be using PHP there and I’ll discuss the PHP usage later in this tutorial. Also I won’t be using an external PHP file for form processing, instead we’ll just be adding the PHP code to the Index file itself (that’s why the action property of our form points back to the “index.php” file).

For tutorial purposes, we’ll just be making some minor changes to the HTML markup above and that’s it!

If for any reason you want to use an external PHP file for form processing then replace “index.php” (form action) in the code below with the name of the file consisting your PHP code.

<form action="index.<span class=" method="get">php</form>

NOTE: We haven’t yet discussed the PHP code so don’t panic. Scroll down on this page to get it!

Here Comes the CSS

Make a new CSS file named “style.css” and add the following code to it!

h1{

padding:30px 0;

text-align:center;

text-shadow:0 1px 1px white;

margin-bottom:30px;

font-size:35px;

background-color:#f6f6f6;

}

#content {

text-align: center;

}

#notification {

margin-left:350px;

margin-right:350px;

border-style:solid;

border-width:2px;

border-color:#74DF00;

background-color:#EFEFD7;

}

Here I styled the H1 headings and the two Div’s called “content” & “notification”.

BRINGING LIFE TO THE APPLICATION WITH PHP

As I said before we’ll just be using one file with all our codes in it, so just add the code snippets below (wherever told to) to the “index.php” file.

In the “value” property for the input text box add the following code:

<php echo $_GET['email']; ?>

Your line 19 (or the line where you added the code above) should now look something like this:

<pre>E-mail: <input id="email" name="email" type="text" value="<?<span class=" />php echo $_GET['email']; ?>"> <input id="submit" name="submit" type="submit" value="Show Avatar" /></pre>
To eliminate spam, e-mail addresses are hashed with the MD5 cryptographic hash function. This prevents spambots from harvesting e-mail addresses. To do this add the following code just after the

tag closes (you can add it anywhere but to maintain an order I placed it after the form).

<?php

if ($_GET['email'] != “” && isset($_GET['email'])) {

$gravatarMd5 = md5(strtolower($_GET['email']));

} else

{

$gravatarMd5 = “”;

}

?>

In the above code we are hashing the email addresses provided by the user using the pre-built PHP MD5 function and then enclosing the hashed code in a variable called “$gravatarMd5? (using it for getting the image from Gravatar’s database. Here we also lower-cased the whole value (your email) we took using the strtolower() function.

Now scroll down in the original HTML markup to where it says the following (line 28):

<p>Gravatar associated with your e-mail is:<br/>
To add some fun to the code we’ll edit the code above to include the email address your client entered. The line above should now look like this:

><p>Gravatar associated with your e-mail <i><?php echo $_GET['email']; ?></i> is:<br/>
Here we are printing the email entered in the input box and then styling it as an Italic.

Now all we have to do is to show the image (avatar) associated to the email enter. For that, just after the above line ends (or after the <br> tag), press enter and add the following code:

<img src="http://www.gravatar.com/avatar/" alt="">

Here we are adding the hashed email to the URL used for getting images from Gravatar and then are displaying that URL as an image.

We have now successfully completed making our own PHP application which shows you the Gravatar associated to an email. You can now build on this code to use it on your website, blog (other than WordPress) or any other project requiring registrations with Avatars. This way you can save some bandwidth of your hosting package and also make a comfort zone for your visitors.

In the Further Reading section below you’ll find some URL’s associated to Gravatar studies. I strongly suggest you to read those to get some more info.

Example: For my Email Id: Sharan.ichakri@gmail.com