How to Add Facebook Connect to Your Website

One of the more popular trends in web design is to integrate social media conversations and user-generated content into company websites. Additionally, more websites are moving away from a distinct process of user registration; instead, they’re utilizing people’s existing social media accounts as a painless, transparent way to “sign in” to their sites. That way, users don’t have to remember a bunch of different usernames and passwords — and website owners can still gather user data about their site customers.

Facebook Connect is a suite of APIs that Facebook offers so that Facebook members can log on to websites and mobile devices simply by using their Facebook identities. From the users’ perspective, the first step is to share their Facebook personal data with a site they want to access. The website can collect a number of data points. Using the Facebook Connect API, developers can configure these data points to match what you want to know about your customers. After users agree to share the requested personal data (as shown in the following figure), they can interact with the Facebook modules on the website as if they were on the Facebook site itself.

The first step of connecting to a website with Facebook is agreeing to release certain information
The first step of connecting to a website with Facebook is agreeing to release certain information to the site.
This website module displays the recent Facebook feeds of the user’s friends.
This website module displays the recent Facebook feeds of the user’s friends.

Among the quickest Facebook features that you can integrate on your website are the social plugins such as the ubiquitous Like button. This button enables web visitors to share your page with their Facebook friends with just one click. This feature is easy to implement by using the following HTML:

<html>     
<head>       
<title>Website title</title>
</head>
<body>
<iframe src=”http://www.facebook.com/plugins/like.php?href=www.yourwebaddress.com” scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
</body>
</html>

You can customize this feature a bit further by adding the names and faces of people who recently clicked your Like button. You can use the online Facebook tool found at the following URL to generate the necessary code:

image2.jpg
http://developers.facebook.com/docs/reference/plugins/like/

From a web developer’s perspective, adding Facebook Connect to your site is a three-step process:

  1. You register your website with Facebook and get an App ID. This ID ensures a secure connection between the Facebook user and your website.

  2. You add the proper JavaScript to your HTML page that references your ID and processes the login request.

  3. You add the Login with Facebook button in its own <div> tag, and the JavaScript SDK renders the button on your page.

After a user is logged in to your site via his or her Facebook credentials, you can personalize that person’s web experience using the Graph API, a feature of Facebook’s core logic that connects people with other people and their interests. For example, if Jane Doe has “checked in” to her favorite restaurant, your website has access to that info. There are all kinds of creative things you can do with that information, such as suggesting other cool things to do near her location.

blog comments powered by Disqus
Advertisement

Inside Dummies.com