Anatomy of a Facebook Connect Site

From Facebook Developer Wiki

Jump to: navigation, search

Facebook Connect is about integrating Facebook into other Web sites. There are many creative ways to do that, but we've noticed some common themes found among most sites and listed them here. Many of these examples use our sample application, The Run Around. For in-depth explanation of the source, see The Run Around.

Contents

[edit] Connect Button

The Facebook Connect button is typically placed either on the home page or login page of a site. It is also sometimes run as an ad, or can be available via Account Settings.

[edit] Sample XFBML

<fb:login-button></fb:login-button>

Image:Connect_light_medium_short.gif


See Defining Your Login Button for more details on how to get a button you can use.

[edit] Facebook Presence Indicator

When a user connects with a site, they want to know what actually happened. The recommended way to indicate that they are acting in the context of Facebook is to show their real name and profile picture, with a Facebook favicon embedded in the corner of the picture.

Image:connect_presence.png


<a href="http://editingmyspace.com"><img src="betty_boop_005.gif" border="0" alt="EditingMySpace.com - Betty Boop"></a>

<a href="http://editingmyspace.com">EditingMySpace.com</a> - <a href="http://www.editingmyspace.com/comments.php?f=betty.boop">More Betty Boop Comments</a>

[edit] Connect Request Link

When a user is browsing your site, Facebook can tell you how many of the user's friends are already members of your site. You can put a link somewhere that says, "Three of your friends already use the site - invite them to connect." This can dramatically increase engagement of your existing users by drawing them back to your site.

Note: This only works if you use connect.registerUsers to share email hashes with Facebook.

[edit] Sample XFBML

<fb:container class="HideUntilElementReady" condition="FB.XFBML.Operator.greaterThan(FB.XFBML.\ Context.singleton.get_unconnectedFriendsCount(), 1)" >
<a href="http://editingmyspace.com"><img src="betty_boop_001.gif" border="0" alt="EditingMySpace.com - Betty Boop"></a>

<a href="http://editingmyspace.com">EditingMySpace.com</a> - <a href="http://www.editingmyspace.com/comments.php?f=betty.boop">More Betty Boop Comments</a>

[edit] Friends Page

Once a user has several friends who have connected with the site, the activity of those friends becomes an important part of their experience. Typically there is a page for Friends' Activity - for instance, on Yelp you could see Friends' Reviews, or on Digg you could see Stories Friends Have Dugg.

Tying it together into a page is helpful.


[edit] User Profile

You can publish stories on Facebook that mention the actions the user took on your site. For example, if you recorded a run on The Run Around site, you could post the run to Facebook.


Clicking Add Run pops up a Feed form that prompts the user to publish this story on his Facebook profile.


Clicking Publish publishes the story on his Wall almost immediately.


[edit] User Actions and Content

Many sites display user actions throughout the site. On Digg, you can see people who've dugg stories; Yelp will show you people who have written reviews. For sites like that, you can use XFBML to display the names and profile pics of Facebook users who have contributed content.

[edit] Sample FBML

Depending on how frequently they show up and what the context of the site is, you may choose to display a Facebook favicon in the corner of the photos to mark the users as Facebook users.

<fb:name uid="2901279" ></fb:name> <fb:profile-pic uid="2901279" facebook-logo="true" size="thumb" ></fb:profile-pic>


[edit] Example Connect Site

Image:connect-comment.png

[edit] Ready to Code?

Then try out Facebook Connect >

In additon, Devtacular offers a bare bones Facebook Connect integration and provides some sample code. It's a great starting point to understand this wiki entry. Read How to Integrate with Facebook Connect.

reference