How To: Implementing Gravatar in your PHP Application
Abhishek
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><!--End Notification--> <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" /> <!--<span class="hiddenSpellError" pre=""-->form> <p>Gravatar associated with your e-mail is:<br/> </p> </div><!--End Show--> <br> </div><!--End Content--> </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:
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" />
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
<?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.
If you have any suggestions or queries or concerns then feel free to leave a comment below. :)
FURTHER LEARNING
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Real estate brokers dubai
Posted 29 days ago 35Hey Abhishek, Thanks for sharing. so far I was using wordpress for Gravatar, now I will integrate it in other php websites. thanks again. highly appreciated.
Kevin.
Real Estate UAE
Posted 50 days ago 34Thanks for sharing i’ve implemented it into one of my client’s wordpress blog and added some extra functionalities to it.
darwit
Posted 92 days ago 33Thank you.
casio
Posted 133 days ago 32its nice new great website
GFI
Posted 163 days ago 30i have read this and was very helpful information
dell
Posted 163 days ago 29its nice great site and i have added in my favorites list
Palmira Yerena
Posted 198 days ago 28Greately captivating blog post.
Acompanhantes
Posted 242 days ago 27little thing: you’re supposed to strtolower() the email before md5()ing it, to ensure a consistent hash is provided.
villas for sale Dubai
Posted 404 days ago 26It’s really a nice and helpful piece of information. I’m glad that you shared this helpful info with us. Please keep us informed like this.
azrilaziz
Posted 471 days ago 25I don’t like the default gravatar. How to change the default gravatar to our own default avatar? Thanks in advance
usrchris
Posted 521 days ago 24Message Faces is specialized for integrating sender pictures into mail clients; thus if you plan to integrate pictures into a webmail application, give this one a try: http://www.message-faces.com
jack overlfow
Posted 581 days ago 22very informative!
LinkinnShadow
Posted 581 days ago 21Thanks for the great Tutorial, it will be handy.
sanjay
Posted 582 days ago 20hi! i dont get the code or how to integrate this to my comment blog.seems that the md5 is not working, or i did it the wrong way..please help.
Abhishek
Posted 581 days ago 23What error are you getting? Email me @ abhishek66ster {at} gmail {dot} com
Alpesh
Posted 136 days ago 31Hi, Looks cool
nammu
Posted 590 days ago 19Nice tutorial, Thanks !
Jordan Walker
Posted 611 days ago 18Gravatars are a great way set apart the user how is commenting on your blog.
.-= Jordan Walker´s last blog ..PublishingAlert.com =-.
Ryan Turki
Posted 614 days ago 10Thanks for this tut ! Really helpful !
AC
Posted 614 days ago 9I 2nd Beau’s comment about updating the article, asap – not everyone reads the comments.
Also, was it really necessary to contruct a whole ‘application’ tutorial around the concept of md5′ing an email address and sticking it on the end of an img src URL?
Bigger isn’t always better, sometimes getting to the point is all that’s needed.
Abhishek
Posted 613 days ago 11“I 2nd Beau’s comment about updating the article, asap – not everyone reads the comments.”
—-
The article has been updated with the strtolower() function!
“Also, was it really necessary to contruct a whole ‘application’ tutorial around the concept of md5′ing an email address and sticking it on the end of an img src URL?
Bigger isn’t always better, sometimes getting to the point is all that’s needed.”
—-
Yes, it was necessary to construct a whole application tutorial around the concept of md5′ing an email address because that’s the basic thing you can do to show the usage of Gravatar. And I suppose you didn’t read the tutorial-topic properly, it says “Implementing Gravatar in your PHP application”
And you can’t get to the point and just give a quick-tip with a small PHP code. You need to demonstrate it properly and that’s what “Tutorial Sites” are for!
Saad Bassi
Posted 613 days ago 13Perfect Answer, Completely agreed with Abhishek here.
Abhishek
Posted 613 days ago 14Thanks for the support!
Beau Lebens
Posted 612 days ago 15Actually, the code is still slightly off I’m afraid :)
Here’s a replacement snippet that handles the email correctly (moved the strtolower() call into the same part as the md5, and wrap it around the correct value):
if ($_GET['email'] != “” && isset($_GET['email'])) {
$gravatarMd5 = md5(strtolower($_GET['email']));
} else {
$gravatarMd5 = “”;
}
.-= Beau Lebens´s last blog ..Public Profiles For Everyone =-.
Saad Bassi
Posted 612 days ago 16Fixed. Thanks for your headsup.:)
Abhishek
Posted 612 days ago 17I think the old method could have worked well too! But thanks for this one :) I didn’t do it because it was producing some compiling error on my localhost :( Seems like I’ll have to re-check my code..
Multyshades
Posted 614 days ago 7really very nice article on this topic it will help to learn more about gravatar, thanks for sharing this
.-= Multyshades´s last blog ..50+ Really Useful Free Professional Icon Sets =-.
vasanth
Posted 614 days ago 6Thanks for you valuable article
Kent Tan
Posted 615 days ago 5Thanks! Very very useful code for web applications!
Beau Lebens
Posted 615 days ago 3Actually you’re missing one little thing: you’re supposed to strtolower() the email before md5()ing it, to ensure a consistent hash is provided.
Cheers for the tutorial!
.-= Beau Lebens´s last blog ..Public Profiles For Everyone =-.
Abhishek
Posted 615 days ago 4Thanks for bringing that up! I really forgot to Lower Case the string.. :)
.-= Abhishek´s last blog ..How to Update Twitter using PHP and Twitter API =-.
Beau Lebens
Posted 614 days ago 8Maybe you should update the post so that people don’t implement the wrong thing ;)
.-= Beau Lebens´s last blog ..Public Profiles For Everyone =-.
Abhishek
Posted 613 days ago 12Updated! And thanks once again for pointing that out :)
socialh
Posted 615 days ago 2Gravatar is important now on any web project, thanks for tutorial
.-= socialh´s last blog ..25 jQuery Animation Effects Examples Tutorials =-.
MoterCalo
Posted 615 days ago 1Thank’s for this tutorial.
.-= MoterCalo´s last blog ..Le duc de motercalo – chapitre 11 =-.