Beautiful Greenfield Apps with Gravatar, Disqus, and AddThis

Our company sponsored hackathon is over, but I'm still trying to grok all the new tech I got to play with. If you haven't already, check out Part 1 of our hackathon story to learn about how MVC3, Bootstrap, and OpenID featured in our application.

It is really amazing what free external services can do bring additional functionality to your web application. During the hackathon I got the chance to add three services to app that really made it feel whole.

Gravatar

I first learned about Gravatar when I found it being used on the MemphisJUG website. This free service let's users set up one profile pic to rule them all. If a website know's your email address, it can pull the associated Gravatar using a pretty simple image link. The necessary HTML for your web application to use a Gravatar is:

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

You merely replace HASH with a MD5 hash of the user's email address and the magic is done.

Well, almost. Turns out getting an MD5 hash appears to require another step in .NET. I might have some basic lack of understanding about hashing, but my thought is that the code required to get an MD5 hash is much too complicated. Why this isn't just a built-in extension method on String is beyond me.

Instead the process involves using the System.Security.Cryptography.MD5 class, byte arrays, and a String Builder. Luckily I found a blog post that explained all this.  You can find it and additional details on Gravatar images in the links below.

http://en.gravatar.com/site/implement/images/
http://blogs.msdn.com/b/csharpfaq/archive/2006/10/09/how-do-i-calculate-a-md5-hash-from-a-string_3f00_.aspx

Disqus

If you've been using the web at all, you've probably already stumbled upon Disqus before. Disqus allows you to post comments to pages, using a variety of login providers. But the magic of Disqus is that it is just a javascript widget, so sites can start supporting Disqus in matter of minutes.

To get started, register your site on Disqus. Get the "Universal Code" and change the javascript to include your site's shortname, a unique identifier for your site in your Disqus account. Make sure the pages you want to include Disqus are linked within your application with canonical URLs. While all the rules for the rules for URL normalization may not be required, we did notice that a link that gave a different URL, but pointed to the same page, pulled up two different sets of Disqus comments. Then just drop in the Javascript widget and you're done.

http://docs.disqus.com/developers/universal/
http://en.wikipedia.org/wiki/URL_normalization

AddThis

If there is one thing that changes way too often online, it is the current up and coming social network. AddThis is another easy to use javascript widget to quickly get some often desired functionality, namely the ability to share links on a social network. AddThis takes it a step farther: 1) It supports a very large number of social networks and 2) It dynamically can choose which networks to show by default based on how which services individual users have selected before. Combined with a plenty of customization options, analytics, and other features AddThis might be the social sharing plugin to rule them all.

https://www.addthis.com/help/client-api#.TuuyndSXQsI

Summary

While digging into a greenfield project is a good time to explore what you are capable of, it also is great time to check out what free services are already out their. Using javascript widgets and external resources can quickly give you features that may take hours or days of development to create on your own. Our hackathon project was much more feature complete because we could utilize tools like Gravatar, Disqus, and AddThis to provide the social integration required of Web 2.0 applications.