Friday, November 18, 2005

Mashups for the Web

Mashup is historically a term used to refer to music where, according to Wikipedia, means "consists of the combination (usually by digital means) of the music from one song with the acapella from another.". Web 2.0 evangelists have picked up this term for their own use, as referenced by another Wikipedia entry, where you combine content from multiple sites in a single site. In this entry I want to talk about what this means, provide some examples, and hopefully inspire some ideas.

To get started, I think two sample use cases are in order.

Use Case #1: Joe Blog (J.B. for short) has a blog hosted on Blogger, a free service. He only has the ability to change the HTML code that is produced, and can not add any server-side component. This is probably a good thing since J.B. doesn't know the first thing about how to do that anyway. J.B. does want a cool blog though, and wants a simple way add his favorite content from other sites to his blog.

Use Case #2: Johnny Web (J.W. for short) is a web developer, has his own site, and wants to provide rich content for his small group of users. His site is very small, more of a personal web site, and only has a small number of volunteer contributors. J.W. Wants to augment his content with content drawn from some of his favorite web sites. He doesn't want his site to look like everyone else's though, so expects to tailor the external content to fit his site's design and feel.

The Delivery

Content for mashups need to delivered by some mechanism. This could be the ever popular RSS, via JavaScript, Flash, or maybe a remote API. J.B. from our use case needs a simple solution, so JavaScript or some other piece of HTML code that he can just drop into his template would be appropriate. J.W. on the other hand is a do it yourself kind of guy, and just wants the raw data, so he would most likely prefer an API. Since J.W. is using an API, he can also use some addition services that might not be available to J.B. who is only using a snippet.

Example: Google Search
(using external content on your site)

Google at some point quite a while ago made an API available to their search engine. It allows you to use web-services to send a query to Google, returning the search results. Using the API allows you to present the results on your site as you see fit. Google also supplies HTML code that you can place on your site, which includes a search box and the Google logo, but with this the results are displayed on Google's site and not yours. This is a good example of where an API may offer more than an HTML snippet.

Example: Flickr Advertisement
(providing links to your content on another site)

Flickr is an online photo library where you can upload and share pictures in your own little gallery. Flickr provides you with several options of advertising your Flickr gallery, including a Flash movie and a badge. The Flash movie is the interesting one here. The Flash movie displays a dozen pictures in a 3x4 grid, and expands each in turn to make them easier to see. The best part about it is that the pictures in the Flash movie are from your gallery! As an example, I maintain a second blog, mostly for testing, that includes a Flickr Flash.

This is all good for J.B., but J.W. wants a little more. Flickr also has a web-services API that can be used to manipulate your content on their site. This API is not only useful for delivering content dynamically on your site, but is also used by some applications, including the new Flock browser.

Example: Link and Tag Rolls
(displaying your content on your site)

Recently several social tagging sites have emerged, with being one of them. I will cover social tagging at some point, but I will describe what that is briefly here. A social tagging site is basically an online bookmark site, where you add bookmarks, share those bookmarks with others (social), and add keywords (tagging) to them. The idea is that not only does it replace you browser bookmarks, but it also makes your bookmarks searchable by you and everyone else on the Internet. offers link rolls and tag rolls, both of which are added to your site by adding an external JavaScript code reference. The link roll presents your most recent bookmarked sites as a clickable list so that you can share them with your visitors. The tag roll shows the keywords you have tagged your bookmarked sites with, and those keywords that are used more often are larger to visually show that there are more bookmarks for those words.

Again, J.W. is yawning here, he wants a little more control. And again, provides an API to allow you to manipulate your bookmarks externally. This gives J.W. the freedom he needs, and also allows a way for external applications to access your data (e.g. Flock browser). This API is also used by, another social tagging site, to allow you to import your bookmark list from


Mashups are about allowing your users to use your data (or their data that you are storing) on their sites. User like this because their site looks cool, and providers like this because it gives them more exposure. The big question of course, is this profitable? The answer I think is yes, although there is no evidence to support this. For those faint of heart, start small, see if your users like it, see if it draws more visitors to your site. I have some ideas for how you can track the success of your components, but that will need to wait for another entry.

No comments: