The problem with Gravatars that I find a lot of people mentioning is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar post.

You may not think that’s too big of a deal, or perhaps from a marketing point of view that’s your way of driving comments (nasty people), but allowing them to play about with their image in the form will improve their relationship with your site and increase traffic anyway. Saves people deleting and re-commenting just because their Gravatar didn’t show up right too.

So this week I’ve put together a little script that generates these little Gravatars as you type. It’s even got little Wavatar faces on them that change when you make a new address, so you’ll never get bored!

Here’s the demo.

So for this, we need some kind of an MD5 encryption algorithm, as the Gravatar API needs this to secure its e-mail addresses.

I’ve used a script from webtoolkit that does the job perfectly.

The script’s over 200 lines long and you can find it here. I’ve included it in the script as an external file for easiness.

Setting Up

1
2
3
4
5

<img id="gravatar" src="" width="80" height="80" alt="Gravatar" />
 
<input id="email" type="text" />
 
<script type="text/javascript" src="webtoolkit-md5.js"></script>

Here we have our image, the input box, and the script tag that includes the MD5 script.

The Gravatar’s src will change when you start typing in the input field. It uses only a few lines of JavaScript.

Working JavaScript’s Magic

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
 
var gravatar = document.getElementById('gravatar');
 
var email = document.getElementById('email');
 
email.onkeyup = function(e){
    var key = MD5(email.value);
    gravatar.src = 'http://www.gravatar.com/avatar/'+key+'?s=80&d=wavatar';
};
 
</script>

Lines 3 and 5 fetch references to our image and input box to control them with the rest of our JavaScript.

Line 7 sets an onkeyup handler on the email field that is fired when a key is released.

Line 8 uses the webtoolkit MD5 algorithm and generates a key. We then pass this key into the Gravatar’s source and it shows our image. If it’s all worked out, this is where you should be seeing your own lovely face

The quicker the user can interact with your application the better. This script allows you to generate Gravatar’s on the fly as the user types it, giving them results straight away.

For practice, try adding things like event timers to decrease the number of image changes at a time, or set the event to onblur so that it only ever fires when the focus is taken away from the field (good for comment forms).

And also, with their recent addition of Gravatar profiles that contain even more information, maybe – with a little more JavaScript – the email address will be all you ever need to type.

Happy coding.

The social bar itself however left more to be desired. It was an eyesore, appearing after every post on my site, and made me cringe at the fact that it relied on JavaScript to function. Luckily, I found an alternative in the form of their API docs.

You can see this for yourself in the social bar below this post. Check out the links as you hover over the images, they’re constructed exactly as I will show you here.

Finding the Link

The trick here is as simple as tweaking a URL.

http://api.addthis.com/oexchange/0.8/offer?url=URL

This is the most basic option of the API. It sends us to a page in which we can choose where we want to share the link. It’s good if you have a simple “Share This” button, but not if we want different links to specific social networks. Plus, we won’t get that analytics data.

In the above example, just replace URL with your page’s location.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net

Now we’ll add a title and user name. For this we add another two URL parameters. Just replace URL, title and user name like before.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

And lastly, where we want to specify where we are going to take the user we need to add forward/SERVICE/ into our link.

http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

The link above will take you straight to Facebook, formatting the data to easily post the page up onto your wall.

A Simple Example

So, for a full implementation of this API we can use a list of hyperlinks like in my social bar, and styled how you like them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Twitter</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Facebook</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/digg/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Digg</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/delicious/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Delicious</a>
  </li>
</ul>

For a full list of service tags to use in the SERVICE section of the URL, check out the service codes page on the AddThis docs. You can copy the short codes from each row, there’s loads to choose from.

More information on the sharing endpoints can also be found on there, which will help if you’re looking to dig further into the API.

One Last Thing

So as you can see, the links can get pretty long. If you’re inputting these manually, even a copy-paste job can be tedious, especially if you plan to go about dotting them all over your website.

The ideal situation then would be to generate these automatically, which can be done through PHP with some urlencode magic.

Also, if you’re using WordPress, then fetching the link and title is easy with get_permalink() and $post->post_title respectively.

I’ll be releasing a tool that utilises the AddThis API very soon, and adding some tutorials on here as to how it’s done, including some clever PHP.

Stay posted.

However, this forum post seems to be the only official documentation on what is a very interesting data feed, so it is with this reason that I decided to create this beginner’s tutorial on how to use it.

Since Kongregate is a website that hosts Flash games, this data would primarily be used to collect data into such games – like showing user badges embedded into a Flash dashboard. In this tutorial, I will take a different approach and show you how to collect that data in PHP and build your own activity stream.

All Badges Feed

Located at http://www.kongregate.com/badges.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "description": "Collect 100 squiggles and pwn 10 spiders",
  "users_count": 285194,
  "name": "Running Start",
  "games": [
    {
      "url": "http://www.kongregate.com/games/DrNeroCF/fancy-pants-adventure-world-2",
      "title": "Fancy Pants Adventure: World 2"
    }
  ],
  "icon_url": "http://cdn2.kongregate.com/badge_icons/0000/0367/world2easy.png?1242937128",
  "created_at": "2008/01/24 20:26:15 -0800",
  "points": 5,
  "difficulty": "easy",
  "id": 184
}

This is an example of an item from the list of game badges in the feed. It contains more than enough information to help make your own application. Each element is labeled so that you can index and call each item when you need to. Further down I’ll show you how to sort out the data in PHP.

User Badges Feed

Can be found at http://www.kongregate.com/accounts/USERNAME/badges.json, replacing USERNAME with your account login name.

1
2
3
4

{
  "badge_id": 184,
  "created_at": "2008/06/23 06:20:42 -0700"
}

A much simpler looking JSON string. A user’s badge feed only contains a list of badge IDs and the date and time that the user achieved them. All other data can be found on the global badge feed above, we just match up the IDs.

Grabbing the Data

Last week I showed you how to fetch page content using PHP. We can reuse the get_page_content method here to collect our information from Kongregate. Be sure to add this method above all other code in your PHP file, before adding the content from the box below.

1
2
3
4
5
6
7
8
9

$all_badges_content = get_page_content(
  "http://www.kongregate.com/badges.json");
 
$all_badges = json_decode($all_badges_content, true);
 
$user_badges_content = get_page_content(
  "http://www.kongregate.com/accounts/USERNAME/badges.json");
 
$user_badges = json_decode($user_badges_content, true);

This sets up two arrays ($all_badges and $user_badges) that we can use to loop through and match IDs.

Displaying the Content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

echo '<ol>';
foreach($user_badges as $badge)
{
  foreach($all_badges as $i => $global)
  {
    if($badge['badge_id'] == $global['id'])
    {
      echo
        '<li>'.
          '<a href="' . $global['games'][0]['url'] . '">'.
            htmlspecialchars( $global['name'], ENT_COMPAT, 'UTF-8' ) . ' Badge'.
          '</a>'.
          '<span>'.
            ' : ' . htmlspecialchars( $global['description'], ENT_COMPAT, 'UTF-8' ).
          '</span>'.
        '</li>';
        unset($badge[$i]);
        break;
    }
  }
}
echo '</ol>';

For each user badge in the $user_badges array we loop through our global badges to find a match and print an output of badge, link, and description to the page.

The break and unset in this code is useful for reducing memory usage on the script.

The break exits the current loop when the badges have been matched – since we won’t need to keep looking once we have found what we are looking for.

The unset removes the item from our list of all badges completely, since once it has been found once we won’t ever need to match it again since we can only have one of each badge.

Finishing Up

For a full copy-paste version of the code, feel free to skip to the end of this article, or view a demo page of this script.

Note: the demo page is a rendered example of the end result and does not update. For markup purposes only.

Also note that reading the JSON data directly from the server in this way is not recommended. For better use of this data, please store and manage the information within your own database setup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<?php
function get_page_content($url){
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $url);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  return $content;
}
 
$all_badges_content = get_page_content(
  "http://www.kongregate.com/badges.json");
 
$all_badges = json_decode($all_badges_content, true);
 
$user_badges_content = get_page_content(
  "http://www.kongregate.com/accounts/USERNAME/badges.json");
 
$user_badges = json_decode($user_badges_content, true);
 
echo '<ol>';
 
foreach($user_badges as $badge)
{
  foreach($all_badges as $i => $global)
  {
    if($badge['badge_id'] == $global['id'])
    {
      echo
        '<li>'.
          '<a href="' . $global['games'][0]['url'] . '">'.
            htmlspecialchars( $global['name'], ENT_COMPAT, 'UTF-8' ) . ' Badge'.
          '</a>'.
          '<span>'.
            ' : ' . htmlspecialchars( $global['description'], ENT_COMPAT, 'UTF-8' ).
          '</span>'.
        '</li>';
        unset($badge[$i]);
        break;
    }
  }
}
echo '</ol>';
?>

This is not an article on improving your follower count or the “top 10 ways to drive traffic with SEO“, but it will definitely help in a different way. Today, I’ll show you how to automatically post your blog articles straight to your Twitter and Facebook accounts using your RSS feed as a stream.

For those of you writing #daily365 articles, or have signed up for Project52, this will be ideal. Let the computers do the work for you.

The service I use for this is called TwitterFeed, which you’ll need an account for. It’s all super easy and I’ll explain it after the jump. So anyway, here we go.

Logging In

If you like, you can sign up to their service with the usual form by clicking “sign up” at the top of the page. If you’re already signed in to Google, Blogger, WordPress.com, or OpenID though it’s as simple as clicking the picture you like the look of.

Find the “Sign In with OpenID” at the bottom of the homepage near the big “Login” button if you’re doing it this way. The box below will show up (with some other options for accounts) and run some fancy AJAX.

Setting Up

Once that’s done your dashboard will show up with a page like this.

Feed Name: If you’re only using one blog this won’t matter as it’s only to tell the difference between the feeds you’re using within your own account. Others won’t see this.

RSS Feed URL: For example, http://stephenmcintyre.net/feed. This will be different for your own setup.

If you use a WordPress.com blog, the URL will be

http://BLOGNAME.wordpress.com/feed

Or if you use Blogger

http://BLOGNAME.blogspot.com/feeds/posts/default?alt=rss

Make sure to use the feed testing button before you continue.

Active: Keep this ticked for now, but it’s a switch that allows you to stop the service reading it later on.

Update Frequency: Even if you don’t post 5 times every 30 minutes, it’s probably best you set it to this, at least the half-hour part. It means that your posts will be sent to your social networks within half an hour of them being posted, keeping your friends and followers up to date.

Post Content: I chose to just post the title, but it’s up to you. Description adds in an excerpt from the beginning of your article.

Post Link: Something you definitely want to set up. Any service will do, but with bit.ly you can generate analytics on the click-throughs and track its retweets. Great tool. You can use your username and API key here from your bit.ly account.

Post Sorting: “pubDate” puts your latest posts first and “guid” sorts them alphabetically. You want to use pubDate for this.

Post Suffix and Prefix: Statements to add to the start and end of your tweets and shares. Makes it easier for your readers to tell the difference between your blog posts and other links.

Keyword Filter: Haven’t needed to exclude any posts from being sent so never used this. From what I understand you put pre-defined keywords into your posts to allow them to be sent by TwitterFeed. Handy if you have multiple types of content being fed into one RSS feed.

When you’re done you can click the “Continue to Step 2″ button.

Sync Up

On the next page you can choose the accounts that you want to allow access to. In this example I’ll use Twitter, but others are just as simple.

Using their OAuth service, connecting to Twitter is as simple as clicking the blue button above, which prompts this screen.

If a login screen comes up, you can enter your details from there. Otherwise, clicking on the green “Allow” button will synchronise both accounts for you, taking you back to the previous menu.

If you’re using Twitter for driving a Google Analytics campaign, you can type some info in the UTM tags to track it. Otherwise you can skip it and click “Create Service”.

Done

So there you go, everything’s set. Now you can sit back and watch those viewers flock to your site, now with no effort on your part!*

*Well you’ve still to write that content, mind

Either way my lack of sleep has lead me onto Twitter tonight and I signed up for a shiny new account on it. Thought it best to put my caffeine-induced insomnia to some use.

One of the first things I noticed about it was it’s difficult to get the user name I wanted. Maybe it’s just me having an apparently common name but even countless variations on it didn’t give me much joy. And I know how important it is today to have the proper web names associated with yourself (it was hard enough getting this domain name, and turns out it’s just as difficult to get a twitter user name).

But anyway enough of that.

I settled on the (appropriate for those that know me) name of @_bigsteve, uploaded a profile picture (which Twitter told me was a nice one ^-^), and set up a Twitter updater for my feeds that should hopefully post this, and every other post for that matter, onto my account.

So yeah, don’t be shy and hit me up when you get the chance. I’m sure my replies will be somewhat informative or at the very least amusing.

Cheers and happy Tweeting

After a few very miserable attempts at some “website’s own” search results, or having to rake through lists of them from each site’s different categories, I turned to Google Images.

It wasn’t until now that I had found such a great use for its new feature, the colour filter, that you might have noticed on your own escapades into their image search pages. Looks a bit like this:

This helps you get the general colour of background image you want, should you have a preference. I liked this because, as far as I know, no desktop image download sites have this and it’s an option a lot of people would benefit from.

You can also click on Advanced Image Search next to the search buttons like in the image below…

…to use a wider range of options:

Content types
For news content, faces, photo content and line drawings specifically

Exact size
If you want it to be the precise size of your desktop (with a handy link to put them in itself if you don’t know the sizes off-hand)

Filetypes
If you want it to be in a specific format (may improve quality if you don’t choose GIF and pick BMP instead, but it’s not always the case)

Coloration
If you’re looking for black and white or grayscale images

Domain
If you like the images on a site, but want a better search method

There’s also an experimental feature in Google Labs called Similar Images which may also help you find what you’re looking for (although it doesn’t have all the options listed above, so it’ll have to be a one-or-the-other choice).

I can now safely say that I have a much better background than the black screen I had been living with recently, although it wouldn’t have taken much.

Oh yeah, the background solution thing.

Basically I was getting a completely black background and whenever I tried to change the image it just stayed the way it was, although it seemed to be taking the time to load it in.

Right click your desktop and go to Properties,
Click the Desktop tab then the Customize Desktop... button,
If there’s a Web tab click on that then untick everything that’s on that page and OK your way out.

If not, you probably don’t have the same problem I did.

Good luck