How To: Implementing Gravatar in your PHP Application

Posted in Tutorials4 years ago • Written by 22 Comments

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" />&nbsp;<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

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.

If you have any suggestions or queries or concerns then feel free to leave a comment below.  :)

FURTHER LEARNING

4 Written ArticlesWebsiteGoogle+

Blog: TutorialsWalk Twitter: @abhishekwebin

22 Comments Best Comments First
  • AC

    Saturday, June 5th, 2010 22:59

    7

    I 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.

    +1
    • Abhishek

      Sunday, June 6th, 2010 22:37

      8

      “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!

      0
      • Beau Lebens

        Monday, June 7th, 2010 20:37

        12

        Actually, 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 = “”;
        }

        0
        • Abhishek

          Tuesday, June 8th, 2010 05:22

          14

          I 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..

          0
        • Saad Bassi

          Monday, June 7th, 2010 21:37

          13

          Fixed. Thanks for your headsup.:)

          0
      • Saad Bassi

        Sunday, June 6th, 2010 23:13

        11

        Perfect Answer, Completely agreed with Abhishek here.

        0
        • Abhishek

          Sunday, June 6th, 2010 23:20

          10

          Thanks for the support!

          0
  • Beau Lebens

    Friday, June 4th, 2010 18:53

    1

    Actually 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!

    0
    • Abhishek

      Friday, June 4th, 2010 20:00

      2

      Thanks for bringing that up! I really forgot to Lower Case the string.. :)

      0
      • Beau Lebens

        Saturday, June 5th, 2010 19:03

        6

        Maybe you should update the post so that people don’t implement the wrong thing ;)

        0
        • Abhishek

          Sunday, June 6th, 2010 22:39

          9

          Updated! And thanks once again for pointing that out :)

          0
  • Kent Tan

    Saturday, June 5th, 2010 05:36

    3

    Thanks! Very very useful code for web applications!

    0
  • vasanth

    Saturday, June 5th, 2010 12:02

    4

    Thanks for you valuable article

    0
  • Ryan Turki

    Sunday, June 6th, 2010 00:14

    5

    Thanks for this tut ! Really helpful !

    0
  • Aian

    Monday, June 13th, 2011 05:06

    19

    little thing: you’re supposed to strtolower() the email before md5()ing it, to ensure a consistent hash is provided.

    0
  • Palmira Yerena

    Wednesday, July 27th, 2011 02:01

    20

    Greately captivating blog post.

    0
  • Rod

    Wednesday, December 21st, 2011 13:51

    21

    Thanks for sharing i’ve implemented it into one of my client’s wordpress blog and added some extra functionalities to it.

    0
  • Kevin

    Wednesday, January 11th, 2012 10:29

    22

    Hey 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.

    0
  • azrilaziz

    Wednesday, October 27th, 2010 02:32

    18

    I don’t like the default gravatar. How to change the default gravatar to our own default avatar? Thanks in advance

    0
  • Jordan Walker

    Tuesday, June 8th, 2010 15:37

    15

    Gravatars are a great way set apart the user how is commenting on your blog.

    0
  • sanjay

    Thursday, July 8th, 2010 07:20

    16

    hi! 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.

    0
    • Abhishek

      Friday, July 9th, 2010 04:30

      17

      What error are you getting? Email me @ abhishek66ster {at} gmail {dot} com

      0
  • Kevin

    Wednesday, January 11th, 2012 10:29

    22

    Hey 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.

    0
  • Rod

    Wednesday, December 21st, 2011 13:51

    21

    Thanks for sharing i’ve implemented it into one of my client’s wordpress blog and added some extra functionalities to it.

    0
  • Palmira Yerena

    Wednesday, July 27th, 2011 02:01

    20

    Greately captivating blog post.

    0
  • Aian

    Monday, June 13th, 2011 05:06

    19

    little thing: you’re supposed to strtolower() the email before md5()ing it, to ensure a consistent hash is provided.

    0
  • azrilaziz

    Wednesday, October 27th, 2010 02:32

    18

    I don’t like the default gravatar. How to change the default gravatar to our own default avatar? Thanks in advance

    0
  • sanjay

    Thursday, July 8th, 2010 07:20

    16

    hi! 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.

    0
    • Abhishek

      Friday, July 9th, 2010 04:30

      17

      What error are you getting? Email me @ abhishek66ster {at} gmail {dot} com

      0
  • Jordan Walker

    Tuesday, June 8th, 2010 15:37

    15

    Gravatars are a great way set apart the user how is commenting on your blog.

    0
  • AC

    Saturday, June 5th, 2010 22:59

    7

    I 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.

    +1
    • Abhishek

      Sunday, June 6th, 2010 22:37

      8

      “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!

      0
      • Saad Bassi

        Sunday, June 6th, 2010 23:13

        11

        Perfect Answer, Completely agreed with Abhishek here.

        0
        • Abhishek

          Sunday, June 6th, 2010 23:20

          10

          Thanks for the support!

          0
      • Beau Lebens

        Monday, June 7th, 2010 20:37

        12

        Actually, 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 = “”;
        }

        0
        • Saad Bassi

          Monday, June 7th, 2010 21:37

          13

          Fixed. Thanks for your headsup.:)

          0
        • Abhishek

          Tuesday, June 8th, 2010 05:22

          14

          I 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..

          0
  • Ryan Turki

    Sunday, June 6th, 2010 00:14

    5

    Thanks for this tut ! Really helpful !

    0
  • vasanth

    Saturday, June 5th, 2010 12:02

    4

    Thanks for you valuable article

    0
  • Kent Tan

    Saturday, June 5th, 2010 05:36

    3

    Thanks! Very very useful code for web applications!

    0
  • Beau Lebens

    Friday, June 4th, 2010 18:53

    1

    Actually 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!

    0
    • Abhishek

      Friday, June 4th, 2010 20:00

      2

      Thanks for bringing that up! I really forgot to Lower Case the string.. :)

      0
      • Beau Lebens

        Saturday, June 5th, 2010 19:03

        6

        Maybe you should update the post so that people don’t implement the wrong thing ;)

        0
        • Abhishek

          Sunday, June 6th, 2010 22:39

          9

          Updated! And thanks once again for pointing that out :)

          0

Comments are closed.

54.197.108.124 - unknown - unknown - US