We got tired of looking at different sites each day, so we brought all of them together
Mash-ups seem to be the latest fad in the crazy world of Web 2.0—people don’t want to go all over the Internet for their daily stuff; they want it in one place. Mash-ups are also increasingly used by businesses to manage data and information on their sites. If you thought a mash-up needed a large team to develop and maintain, you couldn’t be farther from the truth. With a little patience and a clear head, you can build a mash-up in a jiffy.
You’ll need a Web site of your own. You could also create a mash-up on your iGoogle page or use a site like Netvibes (www.netvibes.com). IBM has a QEDWiki for primarily business users, while Microsoft’s Popfly lets you build a stunning mash-up on its SilverLight platform. We’ll go with a Blogger page (www.blogger.com)—most people have a blog of their own now, and Blogger’s new Customize feature has layout elements for a wide variety of sources like HTML / JavaScript, RSS feeds, pictures, videos and more. No more editing HTML—just drag and drop!
Getting Started
We start with a blank Blogger page (you should be logged in to Blogger). Choose a template with a wide sidebar—you don’t want your apps to spill over the boundary of the page. The Customize link at the top right will take you to the Edit Layout page—click on Add a Page Element and you’ll get a pop-up with options to add polls, pictures, HTML/JavaScript, feeds, logos, a video bar, and more. You can edit the HTML of the page —or do it the easier way.
Choose from Google Gadgets (www.google.com/ig/directory?synd=open)—they have an astonishing variety of gadgets tailored for almost everything. Inserting them into your page is simple enough—copy a line of HTML and paste it in Blogger’s element holder for HTML / JavaScript. Many of these Gadgets—especially those with eye candy—need Flash to work; install the free Flash player from www.adobe.com/products/ flashplayer/ if you don’t have it.
The First Gadget
Adding social networking sites—especially Facebook and Orkut—to your blog is now a breeze. If you’re a Facebook junkie, this is for you—a search on the directory will bring up Facebook apps that let you check your account from within your Blogger page. Select the gadget and click on Add to your webpage. You’ll get a snapshot of your gadget, with some minor settings like size adjustments and colour schemes.
The setting for a typical Google gadget
Play around with them till you’re satisfied. Other settings are specific to the gadget—in this case, you have options for what to keep in your Facebook gadget. Once you’ve made your choice, click on Get the Code at the bottom. A line of HTML code appears, which you copy and paste into the HTML / JavaScript element holder. Simple.
More Gadgets
After putting in the first gadget, you should be raring to go. For the rest, here are our recommendations:
Orkut: Access to Orkut is quite easy from your page, especially a Google site like Blogger. There are no sign-in hassles, and your Orkut profile with full-blown functionality is enabled with this nifty gadget.
Get Orkut on your page
IM: Access to IMs (Gtalk, Yahoo! Messenger, MSN Messenger, and more) is quite easy with gadgets available. The Yahoo! Messenger gadget is nothing special, but Google Talk was like the real thing. Tabbed conversations, smileys, the ability to hold group chats, calling up contacts—you get all the goodies.
Chat from inside your web site
Visitor Map: Find out where your visitors come from, on a Google map. The map uses an API from Clicky (www. getclicky.com), a Web analytics service. To use this gadget, register your site at Clicky, then go to the Google Gadgets page and get the HTML code. There is a slight bug here—till Clicky gets enough visitor statistics, the map shows the default image.
Check your visitor’s location
For lighting up the mood, we put in the English to Yoda speak converter (we love Star Wars, and we love the little Jedi master most). Type in any English sentence—“Work is a pain in the neck”—and a few seconds later, up pops up, in Yoda speak: “Pain in the neck work is. Yes, hmmm”. (A swear word elicits a scolding.)
Google Maps: Inserting maps, even if you have no experience with code, is very easy with Google maps. To create a custom map, you need to go to Google Maps, select My Maps, click on Create New Map and start dragging placeholders and drawing lines and shapes on your map. When you’re done, click on Link To This Page at the top right of the map, and get the HTML code.
Flickr Zeitgeist: This is a small widget to display your photos from Flickr, if you have any uploaded there. Visit www.flickr.com/fun/ zeitgeist/ to get your HTML code.
Of course, you don’t have to settle for what’s already there…
Your Own Gadget
Making your own Google gadget is surprisingly easy—you just need to have an idea of what are you going to “gadgetise,” and a few clicks later, you’ve got yourself a brand new gadget. As we’ve mentioned later, you won’t immediately be allowed to put your gadget on your Blogger page, but it’s a start.
Start with a site whose contents you want to see in the gadget—we chose www.thinkdigit.com. Open www.dapper.net, a site that allows you to take content off any page and transform it into a variety of formats like XML, RSS feeds, Google Gadgets, Netvibes Modules, etc. Choose Google gadgets.
When you put in www.thinkdigit.com in the address bar, Dapper opens a frame with the site in it. Navigate to the Game On section under Digital Leisure. Click on Add to Basket to add this section to your gadget.
Choose the fields using the Select arrow at the top. The fields that will go in your Dapp are highlighted in yellow. This is a bit tricky, as the yellow patches have a way of getting on unwanted content like ads or links. If you don’t select well, your Dapp(applications made with Dapper) will be worthless. Give a common name to your group of content—we selected “Game Reviews.”
Select the content which you want
Click Next to view the content that has been selected. Here, we’ve got a list of the games that have been reviewed in the magazine. This list will now be updated when the site is.
The final step is saving your Dapp—name, describe and tag it, then click Save. If you’re unsure of whether your Dapp works right, check the This is a test Dapp box—the Dapp will be deleted within 24 hours. Alternatively, if you don’t want your Dapp published in Dapper’s directory, check the Make Private option. After hitting Save, you’ll get to make some final settings, and also preview your gadget. You can add it to your iGoogle page, or publish it in the iGoogle directory.
Only if (and this is a big if) your gadget gets listed in the Google directory will you be able to add it to your Blogger page. Google takes its own time, so it’s best to remain content with adding the gadget to your iGoogle page.
Conclusion
There you go: a basic guide to making your own Web 2.0 mash-up, with a mini primer on Google Gadgets. Go ahead and surf the Google Gadgets directory—there are so many gadgets available, you can have one for every conceivable need.
Making a mash-up (most people define Web 2.0 their own way, so the definition of “Web 2.0 mash-up” varies) is fun, and also makes for a slick site, if tastefully done.