BACK TO BLOG

May 04, 2010

Exploring the Two Implementations of the Facebook Like Button

Posted by: SethG

There has been a lot of buzz surrounding Facebook’s recent platform changes. One of the the key technology changes is the Like button and related Open Graph Protocol. Though there is much more to explore from community pages to privacy policy and control changes, as designers and developers we decided to explore the Like button and to share our observations and thoughts.

The foundation of Facebook’s Like button feature is that the URL that is “liked” is treated as a unique identifier in Facebook’s data ecosystem that is used to establish connections and express them outside of the facebook.com website. The Like button provides the mechanism to establish a connection between a web page (URL) and Facebook. From Facebook’s documentation, “The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click.”

When you click a Like button, Facebook records the URL for the page/content you liked and in turn can make connections between your friends and others whom have liked this URL as well. This results in a situation where logged in users whom are viewing the URL where the Like button has been added may see some of their friends that have liked it and/or the total number of users whom have liked it as part the button. The use of the button in this fashion is similar to a share feature with a little but notable extra in the connections made within and through Facebook.

Techcrunch seems to be using the Like Button on their articles in this way. I “liked” the article pictured below .


The result of which was a status update entry like the following added to my profile.



There is second use of the Like button, one that results in a much more robust connection. As you likely know, Facebook recently made a semantic change to the action of connecting to Pages from “Fans” to “Like”. This move setup for this secondary use of the Like button. In Facebook-ease:

If your web pages represent profiles of real-world things — things like movies, sports teams, celebrities, and restaurants, you can optionally use the Open Graph protocol to enable users to establish lasting connections to your pages. Your pages show up in more places on Facebook and you gain the ability to publish stream stories to connected users. – http://developers.facebook.com/docs/reference/plugins/like

In more general terms, a Like button can be used to make any URL have functionality like that of a Facebook page. This functionality really got our geek minds cranking. The thought of creating a nicely designed campaign, event, product, or cause page/microsite that could tap into Facebook functionality without having to setup a separate more traditional Facebook page is intriguing. So we did a test on a sample org site.

Imagine a organization that is running various fundraising projects, donation 2.0 style. The following is a fictitious project page raising funds for a neighborhood playground where we implemented the Like button so that this project page will have this Facebook page functionality.


The screenshot above is what someone who is either not authenticated in Facebook or whom does not have any friends who have yet liked this page. Below is an example of the Like button if I am logged in after I have liked this project, and have a friend whom has liked it, too.



This showcases how this feature’s connections can result in my social network having a presence and potential influence as I browse Like button enabled pages. This is general Like button functionality; however, on to the page stuff.

Part of setting up the Like button to have the page-like treatment requires defining either administrative users or an application to administer it. I added my account as an administrator as the application approach requires more intensive development to explore. When I go to my “Ads and Pages” area I can see the Sample Org project page listed as pictured below.



When I view the page I see a very familiar page view.



So hear is where things gets interesting. Liking this project both established a connection to this URL by the “liker” and also established a more long term relationship much like someone who fans/likes a page. As the page administrator when I posted a status update through the Facebook page pictured above, that update appeared in the News Feed of every “liker”. For example, the image below showcases what the two people who liked this project saw.



This is pretty interesting functionality. A page on any website can be made into a page within Facebook’s ecosystem. Status updates, events, links can all be shared by the administrator to all the “likers”. There are some other details that are interesting as well.

All the links in the Feed updates that say, in this example, “Sample Org Project: Neighborhood Playground” actually link out to URL of that project on the web. This makes sense as it is that URL out in the world wide web that is actually the page-like object in Facebook’s ecosystem. This is a really interesting dynamic in particular with a campaign, cause, event or product point of view. Your web page can contain all the branding, engaging design, information architecture, and navigation that your team has defined while fostering social connections through Facebook that in turn has the potential to drive returning and new traffic back to your web page.

Insights, Facebook’s analytics is available to all your Like Button enabled pages offering all the analytic goodness that Facebook page would have. These metrics would help to monitor the Facebook side of engagement efforts. In addition there are the capabilities of the Graph API which “drastically simplify the way developers read and write data to Facebook” which we’d definitely need to put to the test to confirm.

As noted above, as the design and technology folks we are, it was our desire to begin to explore the new tools Facebook has made available and to share some of our findings with you. We welcome any comments or questions you might have.

Tweet

MOD-Lab Technology