Robert Cailliau's original logo

Ever wonder who the first web developers were?

Twenty years ago today, when Vanilla Ice’s “Ice Ice Baby” was at the top of the charts, two engineers at CERN’s data handling division wrote the proposal to fund the research project that would give birth to the web.

The proposal, submitted by Tim Berners-Lee and Robert Cailliau on November 12, 1990, laid out what they wanted to build and the resources they’d require. The team wanted to start by building a browser and a server. They estimated development would take six months, and that it would require “four software engineers and a programmer.” There are also some serious hardware requirements totaling tens of thousands of dollars (or is it Swiss francs?), but about a third of the requested funding was dedicated to software user licenses.

Here’s the overview:

The attached document describes in more detail a Hypertext project. HyperText is a way to link and access information of various kinds as a web of nodes in which the user can browse at will. It provides a single user-interface to large classes of information (reports, notes, data-bases, computer documentation and on-line help). We propose a simple scheme incorporating servers already available at CERN.

The project has two phases: firstly we make use of existing software and hardware as well as implementing simple browsers for the user’s workstations, based on an analysis of the requirements for information access needs by experiments. Secondly, we extend the application area by also allowing the users to add new material.

Phase one should take 3 months with the full manpower complement, phase two a further 3 months, but this phase is more open-ended, and a review of needs and wishes will be incorporated into it.

The manpower required is 4 software engineers and a programmer, (one of which could be a Fellow). Each person works on a specific part (eg. specific platform support).

Each person will require a state-of-the-art workstation , but there must be one of each of the supported types. These will cost from 10 to 20k each, totaling 50k. In addition, we would like to use commercially available software as much as possible, and foresee an expense of 30k during development for one-user licences [sic], visits to existing installations and consultancy.

We will assume that the project can rely on some computing support at no cost: development file space on existing development systems, installation and system manager support for daemon software.

It’s an extension of Berners-Lee’s original document, written a year earlier, outlining the architecture of a “HyperText” information system.

Looking back now, we can clearly see how the original plan has come to fruition.

From the abstract: “Potentially, HyperText provides a single user-interface to many large classes of stored information such as reports, notes, data-bases, computer documentation and on-line systems help.”

A single user interface to pull data stored in remote databases — from search engines to Facebook to eBay, this is what we see today. Also, the idea of enabling self-publishing was baked in from the start, a philosophy that has fully matured with tools like blogs, wikis, RSS and social sharing platforms.

Two of the things we love about the web the most weren’t part of the original plan — “sound and video” and other “fancy multimedia facilities” weren’t on the table, nor were full-blown applications that run in browser and allowed users to engage in non-public activities.

As far as we’ve come in twenty years, some of the original problems the WWW project was supposed to fix still exist today.

As Berners-Lee and Cailliau wrote in 1990, “The current incompatibilities of the platforms and tools make it impossible to access existing information through a common interface, leading to waste of time, frustration and obsolete answers to simple data lookup.”

Anyone who works with government data can tell you this is still very much the case. Stacks of data, all of it freely available and certainly vital to the growth of a publicly serviceable web, are stashed inside ancient enterprise-scale systems where it’s inaccessible to simple tools.

These are the problems the Gov 2.0 movement is still trying to solve, with initiatives like increased government transparency, campaign finance transparency, health care reform, and a reboot of our air traffic control system.

See also:

• Tim Berners-Lee Sees Promise, Challenges in HTML5
• A Brave New Web Will Be Here Soon, But Browsers Must Improve

The nascent Web Open Font Format (WOFF) is getting a boost this week thanks to some new initiatives being kicked off by the W3C, the web’s governing body.

The W3C recently created a working group to build a WOFF into a web standard, and that group will be holding its first face-to-face meeting at the TypeCon 2010 conference taking place this week in Los Angeles.

Representatives from the major browser vendors, several font foundries and web services providers will be in attendance. Also, a dozen or so select individuals will be participating in a series of presentations and panel discussions about WOFF throughout the conference. All the design industry folks in attendance will get a peek at the future of high-quality typography on the web. There are scores of topics on the program, but this year, WOFF is getting top billing.

Things are looking up for web fonts in general. Monday, Typekit announced a partnership with Adobe to include the company’s fonts as part of its licensing service. Last month, Google launched a new tool (tied to its Font API) that makes it dead easy to include any of its open source fonts in website designs.

The Web Fonts working group was formed earlier this year at the W3C, and the group has already released the first working draft of the specification that will eventually lead to WOFF becoming a recommended web standard.

WOFF works just like OpenType and TrueType — you use the @font-face CSS property to drop the fonts in — but the font data is compressed, so the files download faster, and you can include more fonts in your designs without worrying as much about payload bloat.

The W3C adds this bit: “The WOFF format is not expected to replace other formats such as TrueType/OpenType/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable.”

Support for WOFF is already strong — Google, Mozilla, Apple, Opera and Microsoft browsers either ship with or are building support, and the fast-moving foundries are releasing WOFF fonts — so why is the W3C’s involvement a big deal when the open source format is enjoying such success?

Standardization by the W3C is the best path to true interoperability. It will keep all the parties on the same page when it comes to things like accessibility, cross-browser compatibility, internationalization and search engine indexing. How much metadata to include and how it is handled are also big issues. Plus, fonts have taken an astonishingly long time to arrive on the web because of red tape around licensing, and a collaborative process for developing licensing infrastructures will go a long way toward convincing some of the more conservative type designers to make web-friendly versions of their creations.

The standard will take years to complete (the process is very slow — we’re guessing 2012 or so), and until then, we’ll see designers, developers and innovative service providers like Typekit and Google continue to feed the interest in fancy web fonts. Those not on the bleeding edge may be stuck in the boring world of “web safe” fonts for a while, but at least the future is bright.

TypeCon 2010 runs from August 17 through 20.

Photo by Leo Reynolds/Flickr/CC

See Also:

• Typekit Teams Up With Adobe to Offer More Web Fonts
• Dealing With the Dreaded ‘Flash of Unstyled Text’
• Test Drive Your Type With Google Font Preview

The 2010 San Diego Comic-Con is coming up on July 21-25. There’s so much going on, it’s triple-extra impossible to fit everything of interest into your schedule.

But at least you can maintain some sense of organization amidst the chaos with Sched.org. The start-up is bringing its incredibly useful calendaring web app to the massive comic book and fandom convention. Find it at sched.comic-con.org.

Build a personalized agenda by picking panels, movies and parties from a master schedule of everything that’s going on. Create a free account and get a unique URL you can share with your friends. Sched also looks great and performs well on iPhones and other mobiles. There are maps to help you find everything, too.

Originally created by programmers Chirag Mehta and Taylor McKnight, Sched first popped onto our radar at SXSWi 2008, where the app gained a lot of traction. The simple calendar has remained a geek favorite at big events — they’ve done CMJ, Sasquatch, The Next Web and Black Hat, among others. Most users prefer it because the Sched guys list both official and unofficial events on the calendar, and because there’s a social sharing feature that lets you see which parties and events are the most popular and which ones your friends are attending.

Check out the Sched’s dedicated site for Comic-Con. Check back often, and the schedule will be updated continuously. And follow Wired’s coverage on Underwire.

In the year and a half since it first emerged, Google’s Chrome browser has matured from a thinner-than-air experiment that only ran on Windows into a stable, full-featured browser that works on all major operating systems and is available in 50 languages.

No longer just the new kid on the block, Chrome is now poised to become even more formidable. We expect Google to show off some new enhancements that would better enable it to handle the next version of the web next week at Google I/O, the company’s annual developer conference taking place in San Francisco.

Chrome is continually being updated, but recent developments in web video, social web technologies, HTML5 and new data APIs point to more capabilities making their way into the browser.

Chrome is designed to deliver a superior experience when using web apps, with its ability to isolate apps within individual browser tabs, its advanced JavaScript engine and its support for new technologies in HTML5.

“What we care most about with Chrome is driving the growth of web apps forward,” says Google director of engineering David Glazer.

The emerging HTML5 standard brings a range of new innovations to browser-based apps, as outlined during the 90-minute keynote that opened last year’s edition of Google I/O. The various elements in HTML5 let browsers play audio and video without plug-ins, determine a user’s location, provide offline access to web apps, and play animations.

Even though the HTML5 specification is incomplete and still only in draft form, it’s widely supported. Firefox, Safari and Opera have long been able to utilize many of HTML5′s capabilities, and Microsoft Internet Explorer 9, due later this year, will include support for most of the HTML5 stack.

“Chrome is in a horse race with other browsers, and all of them are pushing the state of art of the modern web and HTML5 forward,” Glazer says. “Users are winning because of this.”

Mozilla VP of engineering Mike Shaver, who works on Firefox, acknowledges that while there isn’t exactly a Kumbaya spirit between browser makers, everyone on the web is reaping the benefits of the stiff competition.

“In the browser development sphere right now there are a ton of things being experimented with and a bunch of that stuff is reaching users,” Shaver says. “So much of this is happening in ways that we can all take advantage of to improve the web for people regardless of which browser they’re using.”

Even though it’s in an enviable position of being feature-rich, fast and mostly HTML5-ready, Chrome can’t afford to be caught standing still.

Neither Glazer nor anyone else at Google would talk about possible announcements coming out of next week’s conference, but we should expect to see Chrome tricked out with some new capabilities.

Most in the web development community are looking for Google to release the VP8 video codec under an open source license. Google acquired the technology earlier this year when it purchased the video company On2, and VP8 is believed to be free of the patent issues dogging Theora and H.264. Were Google to make it freely available and begin supporting it in Chrome, VP8 would mean a huge boost to video on the web.

Mozilla’s Mike Shaver is keeping a close eye on Google’s plans for the VP8 codec.

“If VP8 is released under open source, unencumbered terms, you’ll see us supporting that too, both in the browser and in developing it,” he says.

Firefox currently supports the Theora codec for native web video playback, but it doesn’t support H.264 because of its licensing restrictions.

Google may be ready to give open web video a big push, but the company is aware of browser-based video’s limitations and is playing the field accordingly. Google recently announced it was working with Adobe to incorporate the Flash Player into Chrome, ensuring users will be able to watch videos on the web whether they’re served with HTML5 or Flash.

One of Chrome’s biggest selling points is speed — the browser is blazingly fast, even when running complex web apps. But Google has proven its commitment to make Chrome even faster, and the company is taking significant steps to reduce web app latency with its work on Chrome’s V8 JavaScript engine and its experimental SPDY protocol, which can transmit data on the web at twice the speed of the HTTP protocol.

“Cutting the latency in half is more important to the user experience than adding any one specific feature,” says Google’s Glazer.

Making web apps run faster is of primary importance to a company which relies heavily on them — not just products like Gmail, Docs, Wave and search, but also all of the external apps powered by Google’s 60-plus APIs. Google processes between 4 and 5 billion API hits every day, according to Glazer.

It’s expected that Google will make the API for Google Buzz, its latest experiment in the social networking space, publicly available at I/O. (The API is currently in closed beta).

On the same front, it’s possible Google will begin building identity management tools into the browser that make logging in, finding friends and sharing on social sites more seamless while keeping those interactions under the users’ control.

Dion Almaer, founder of Ajaxian.com and a former Mozilla engineer who is now the director of developer relations at Palm, says he expects all the major browsers to make this “social leap” and start shipping with more identity tools.

“Mozilla is taking an active position on the notion of data ownership (e.g. you should own it, compared to a web site) and also believes that the browser can be a true ‘user agent’ and do a lot more for you,” he says in an e-mail. “I think that Chrome will follow here too in certain ways.”

Again, Google wouldn’t say what it is or isn’t announcing next week. But Google’s Glazer can’t see how anyone would be shocked if Chrome were to get a boost.

“I don’t think we need to make any surprises with Chrome,” he says. “You can expect it to do more of what it’s doing now. Open standards are good, interoperability across the web is good, speed is good, being available everywhere is good.”

Google I/0 takes place Wednesday, May 19 and Thursday, May 20 at Moscone West in San Francisco. Watch for coverage on Webmonkey and across Wired.com.

See Also:

• Meet the Winners of Webmonkey’s Google I/O Giveaway
• Google Throws Its Weight Behind HTML 5
• Where on the Web Is HTML5?

Adobe CTO Kevin Lynch. Photo: Adobe

SAN FRANCISCO — Adobe’s CTO wants to make it clear that the public battle between HTML5 and Flash isn’t about technology, it’s about politics.

“The story is not about HTML5 vs. Flash,” Adobe’s Kevin Lynch says. “It’s about freedom of choice in the industry.”

Lynch says developers should be able to use whatever tools they want to create whatever experiences they want on the web.

“There are some who would like to wall off parts of the web and require you to get their approval to create something,” he says.

Lynch spoke Wednesday morning at the Web 2.0 Expo taking place here at Moscone West. The twice-per-year developer conference focuses on all things web, and though the audience is primarily made up of developers, the talks often turn to current events in the tech world.

Adobe has certainly been in the news quite a bit lately, with its Flash platform and Flash Player being derided by Apple CEO Steve Jobs, who has disallowed Flash on the iPad and the company’s other mobile devices, and has banned apps created in Flash from being sold in the company’s App Store by changing the wording of the developer’s agreement for its latest iPhone OS.

Lynch didn’t refer to Apple by name until prompted by Web 2.0 Expo program chair Brady Forrest, who was interviewing Lynch on stage.

“Are you referring to Apple and the iPhone,” Forrest asked.

Lynch shot back: “Are you reading between the lines?”

“Apple’s playing this strategy where they want to create a walled garden around what people use,” Lynch continued.

He turned to an analogy he’s used in the past: the development of railroads in the United States in the 1800s.

“Part of the competitive dynamic at that time was that people were using different gauge rails for each section of the route,” he says. If you wanted to move your freight on somebody else’s section of railroad, you had to unload everything and put it into different cars. The same cars couldn’t run on different sections of the rail.

“That wasn’t good for industry. The ‘gauge of rails’ today is writing code for particular operating systems.”

One of Jobs’ big arguments against Flash is that apps written for the iPhone and iPad using Adobe’s Flash development tools don’t work properly on Apple’s mobile platform. His company has gone as far as banning them, citing this shortcoming as the reason.

Lynch says it’s a myth that cross-platform code can’t retain the intricacies of a specific platform.

“You don’t lose expressiveness or fidelity by cross-compiling applications,” he says. “It’s disingenuous to say that cross-compiled code won’t be able to take full advantage of any particular device.”

“The technology issue Apple has with us is not that our tech doesn’t work, it’s that it does work. We don’t want to play a technology game when Apple is playing a legal game. We’re not going to play that game, we’re going to concentrate on everyone else.”

To that point, Lynch talked a little bit about the Open Screen Project, the Adobe-led initiative to get Flash software integrated into tablets and other mobile devices from various companies to take advantage of hardware acceleration and specific hardware features, like touchscreens, cameras and GPS sensors. Adobe has a booth at the expo where attendees can play with prototypes of different tablets running Flash.

Lynch also had some nice things to say about HTML5 and its many capabilities.

“HTML5 is the best thing that’s happened in browsers for a long time,” he says. “Innovation happening in the browser again.”

Lynch, who worked on the initial launch of Dreamweaver at Macromedia in the mid-’90s, took us back to what things were like back then.

“DHTML was supposed to take off and it didn’t. We went through a period of stagnation in HTML, which made room for Flash to grow.”

“We will keep making tools for people to create experiences in HTML5,” he says, referring to Dreamweaver and other products in Adobe’s Creative Suite.

As for Flash’s future: “We will continue to work on Flash, filling in holes as fast as we can and developing it at a much faster pace than we have previously,” he says.

Amid the current turmoil, Adobe released a new version of the Flash development app last month and is actively developing its next Flash Player.

UPDATE: Here’s a video of the entire 15-minute interview:

See Also:

• Who Needs Flash?
• 8 Sessions You Won’t Want to Miss at Web 2.0 Expo
• Flash Faces Down Threats on Adobe’s Big Day

Tomorrow’s web is being built by a vast community of programmers and designers spread around the globe. They’re all forging new paths on their own, but it’s when they find the occasion to get together and compare notes that the sparks really fly.

Such a gathering is happening this week in San Francisco at the Web 2.0 Expo, a conference put on every six months or so by tech publisher O’Reilly.

Just like other developer conferences, there’s an expo floor and parties at night, but the meat of the event is the mix of talks, hands-on sessions, keynotes and presentations about all things web. There are sessions on browsers, Flash, HTML5, geolocation, JavaScript, advertising platforms, cloud computing and online communities.

It can all be a bit much, so here are our picks for the sessions you simply shouldn’t miss at the Web 2.0 Expo. Certainly, there will be others of great importance to you depending on your area of expertise (and you can view the full schedule here), but these are the sessions that we Webmonkeys are most looking forward to.

All sessions are taking place at Moscone West in San Francisco. The conference sessions start Tuesday and run through Thursday morning. Intensive educational tracks are taking place Monday, May 3. Follow coverage here on Webmonkey and on Twitter under the hashtag #w2e.

HTML5 vs. Flash: Webocalypse Now?

Tuesday, 10:00am, room 2001

Design guru and author Eric Meyer leads this discussion about the future of Flash on the HTML5-powered web. Don’t expect a Flash-bash session, though. It’s true that Flash has been taking a beating lately, but it still has a place in the modern, media-saturated web. Meyer will examine issues central to the Flash vs. HTML5 debate, including openness, security and performance.

A Conversation with Paul Buchheit

Tuesday, 4:10pm, Main Hall

This keynote interview will occur on the main stage, as Web 2.0 Expo program chair Sarah Milstein dishes the tough questions to Facebook’s Paul Buchheit. Now one of Facebook’s lead engineers, Buchheit originally arrived at the social networking giant when it acquired his start-up, FriendFeed (he was also one of the engineers behind Gmail at Google). Facebook has since incorporated many of FriendFeed’s innovations around real-time social publishing into its core product, the constantly-updating News Feed that scrolls down your Profile page. But that’s just the beginning of Buchheit’s story at Facebook. We can expect some discussion around the company’s new Open Graph platform it launched in April.

A Conversation with Kevin Lynch

Wednesday, 9:30am, Main Hall

On Wednesday morning, Adobe CTO Kevin Lynch takes the hot seat. He’ll be answering questions about the future of Flash on the open web, on Apple and Android devices, and on developer’s desktops as a programming environment. Lynch often stays close to the Adobe script, but it’s likely that whatever he says will add fuel to the HTML5 vs Flash debate — already a heated topic among browser vendors, mobile device makers, and proponents of open web technologies. Web 2.0 Expo program chair Brady Forrest is the interviewer.

The Search Platform: Friend Or Vampire?

Wednesday, 10:15am, Main Hall

Where do you get your news? If you’re getting it from Google, content providers like Rupert Murdoch are gunning to shut down your favorite delivery system. There’s currently a lot of chatter about whether search providers have the right (via fair use) to reprint excerpts of the news articles they’re linking to, and most of the negative rhetoric is being voiced by news publishers. But on a searchable web governed by the link economy, there has to be a balance between linking and re-publishing for anyone to extract any value. Danny Sullivan of the Search Engine Land blog breaks down what it will take for search engines and publishers to get along.

What to Expect from Browsers in the Next Five Years

Wednesday, 11am, room 2006

This open discussion examines where the browser is headed next. No doubt, it will be smaller (fits in your pocket!) and more powerful. And it will probably handle your identity on social networking sites and play videos without plug-ins, too. Ajaxian editor Dion Almaer moderates the panel, and Yahoo’s Douglas Crockford (a JavaScript guru), Mozilla’s Brendan Eich, Opera’s Charles “chaals” McCathieNevile, and Microsoft’s Giorgio Sardo are the panelists.

The Innovative APIs Fueling Location on the Web

Wednesday, 3:40pm, room 2006

Former Webmonkey contributor Adam DuVander runs down all of the free tools available on the web for creating geodata-driven location-aware applications. Before you go, also check out Adam’s most recent project: Geomena, an open database of wi-fi access points you can use for geolocation.

State of the Internet Operating System

Thursday, 9:00am, Main Hall

Mr. Web 2.0 Tim O’Reilly kicks off the final day of the conference with his keynote presentation on what he calls the “internet operating system,” the collection of technologies and concepts — hardware sensors, identity, mobile phones, location APIs, advertising, cloud-based processing, et cetera — that are shaping the future of computing. Tied to our desktops no longer we are, young Jedis.

Web Fonts: The Time Has Come

Thursday, 1:00pm, room 2001

This panel looks at the state of typography on the web, and as you may be able to guess from the title, these guys think things are looking up. Fonts aren’t as limited as they used to be, thanks to innovations in CSS, JavaScript and web services like Typekit, which dole out really nice-looking fonts across the web using a new licensing model. Jeff Veen of Typekit is the moderator, and panelists include FontShop’s Stephen Coles and JQuery’s Paul Irish. For a preview on this topic, check out the very first episode of The Big Web Show, which discusses web fonts and features Veen as a guest.

Recent conference coverage:

• Facebook F8 Preview: Expect More Open Interactions
• F8: Facebook Adopts Open Standard for User Logins
• Chirp: Twitter Launches ‘Points of Interest’ Pages for Locations

SAN FRANCISCO — As we predicted, Facebook is switching to an open standard to handle user authentication across its entire platform of connected websites and applications.

Facebook is ditching its proprietary Facebook Connect system, which lets people use their Facebook username and password to log in to other sites around the web. In its place, the company will implement OAuth 2.0, an open source (and soon to be IETF standard) protocol for user authentication.

Viewed along side the barrage of other major announcements unleashed by Facebook at its F8 developer conference here on Wednesday, the move may only seem like a minor data point. But it is one with the potential to make a broad and deeply significant impact on the social web.

Right now, users expect three choices for logging in to a site with an existing ID: Facebook Connect, Twitter or OpenID. That forces publishers to implement three separate systems — one for OpenID, one for Twitter, which uses OAuth, and one for Facebook, which uses Facebook Connect. But once OAuth 2.0 is up to speed and more sites move over to it, things get simpler for site owners.

Where there used to be three options — Facebook Connect, OAuth and OpenID — there will now only be two. And the two that are left are both open source.

There are still details involving token management, auto-registration and other bits of complex backend plumbing to be sorted out, that Wednesday’s events don’t change.

But the move towards OAuth is a step towards interoperability the social web sorely needs. Most importantly, it will be easier to build pathways connecting OAuth and OpenID, since both are fully transparent, open standards and the proprietary Facebook Connect system has been removed from the equation. The switch paves the way for further integrations between existing technologies.

During a panel discussion about OAuth on Wednesday afternoon, Facebook engineer Luke Shepard said that by adopting OAuth, he hopes Facebook will “help drive it to become such a core part of the web, all the tools will end up supporting it.”

Twitter also recently began supporting OAuth 2.0 with last week’s launch of @anywhere, its suite of social-interaction tools.

But what about OpenID? It was one of the key technologies responsible for pushing the idea of single sign-on forward, so why isn’t Facebook supporting it yet?

“Developers aren’t asking for OpenID,” Shepard said when the question was posed to the panel. “They’re explicitly asking for us to make logins simpler and easier, not for us to implement OpenID. So now we’re doing that by implementing OAuth 2.0, because it’s simple and easy. Adding OpenID on top of it would just add a layer of complexity nobody is asking for.”

OpenID is indeed very complex, and because of that, it suffers from usability problems that have kept it from being widely adopted.

“It’s very easy to do user authentication over OAuth 2.0,” Shepard said.

Panel moderator David Recordon, who develops open technologies at Facebook, asked the audience of about 60 or 70 people: “How many of you here want Facebook and Twitter to adopt OpenID?”

Five people raised their hands (I was one of them).

Another panelist, Raffi Krikorian from Twitter, quipped, “That answers your question right there.”

Krikorian did offer a ray of hope for OpenID, though, noting that browser makers may provide the missing links that solve OpenID’s complexity problem.

“Since the browser exists in between the web service and the user, it makes perfect sense for the browser to handle those identity-management tasks,” he said. “I think that would be a huge step forward for the web.”

Another panelist, Yahoo’s Allen Tom, another long-time OpenID advocate, agreed that browser makers could definitely help fix OpenID’s UI problems.

“If browsers can eliminate the confusion in the whole authorization flow around OpenID, that would be ideal.”

See Also:

• Up Next For Facebook: Expect More Open Interactions
• Facebook Shows Off New Tools to Socialize the Entire Web
• Facebook Tags Everyone at F8 with RFID Chips

I want to offer a quick look inside the technology behind Facebook’s Open Graph initiative to show how easy it is to mark up your website and let Facebook users interact with it.

This is only a part of the broad Open Graph strategy the company announced at its 2010 F8 developer conference. (Read our full coverage of the keynote).

Basically, Facebook is offering up a set of widgets — it calls them Social Plug-ins — that you can drop into any web page to make that page more “Facebooky.” There’s a Like button, a Recommendations widget that shows what other pages people’s friends are reading, an Activity Stream widget that shows a simplified version of the visitor’s personal Facebook news feed, and a Facebook Bar, a toolbar site owners can float at the bottom of the screen that serves all of these things at once.

Using the Open Graph widgets, you can incorporate some of Facebook’s key social interaction features into any page on the web.

The most important Social Plug-in, and the one we’ll no doubt see the most use of, is the Like button. Put it on your page, and if a Facebook user visits your site and clicks on it, a link to your page gets added to their activity stream. Suddenly, all of their friends can see that link, click on it and be led directly to your page. When that second person arrives, the Like button is personalized for them — it shows which of their friends have already clicked it, and when they click on it, a link to your page gets added to their stream.

There are actually two versions of the Like button, one that uses an i-frame and one that uses JavaScript.

The i-frame version

For the simple i-frame version, it’s one line of code:

<iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">

You can generate your own bit of i-frame code for any URL of your choosing (and tweak the parameters) using the tool at the bottom of this page on Facebook’s developer site

The content inside the i-frame is hosted by Facebook, and Facebook can detect whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the stuff in the i-frame is personalized for them. It shows a list of their friends who have also liked the page. If they’re not logged in, they’ll be prompted to log in or to join.

The JavaScript version

The slightly more complicated JavaScript version of the button utilizes two other bits of Facebook technology: the XFBML fb:like tag and Facebook’s JavaScript SDK.

<fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" />

You get all the same personalization features as the i-frame version, so each logged in Facebook user who visits your site sees which of their friends have clicked the “Like” button, and a link to your site gets shared across their social graph. Also like the i-frame version, you can tweak the parameters however you want.

But the JavaScript version offers some extras. In the code above, you can also see there’s a show-faces flag that will show the profile pictures of your friends who have clicked on the Like button.

The JavaScript version also gives your visitors the chance to add a comment to the link when they click on the Like button.

If a user is not logged in to Facebook when they visit your site, you can authenticate them automatically using OAuth 2.0, which Facebook now supports. Full details are here.

Tag up your page

When a user Likes your page, it does more than just pass the link around. If you’re a band, or you run a site for a movie, you can add some semantic markup to your page that tells Facebook the type of thing your page represents. That way, if I go to your movie page and “Like” your movie, Facebook can easily add a link to your movie’s website in my profile. If I keep a list of my favorite movies in my Facebook profile, a link to your public website will be added there, where it belongs.

This part is optional, but it’s recommended. Just add some Open Graph meta tags to your page so Facebook knows what you are. There are four that are required, the rest are gravy. You can claim your entity’s identity by picking the most relevant content type. The list is long — musician, sports team, blog, drink, hotel, movie, book, city, cause — so whatever your page represents, Facebook can understand it and deal with the link properly when somebody clicks your Like button.

Get used to it

Like buttons are a step up from the other sharing buttons that have been on the web for years. Unlike those for Digg and Twitter, which just display a blind count of aggregate clicks from everyone on the social network, the Facebook Like button shows you how your friends are interacting with the page you’re on.

We can certainly expect other social networks to pick up on this model and start serving up lists of your friends, and maybe even their faces, along side their own social widgets.

As if the number of icons and little doo-dads at the bottom of blog posts wasn’t distracting enough…

See Also:

• Facebook Shows Off New Tools to Socialize the Entire Web