Integrating Facebook within your website not only increases traffic but also makes your site more social and tailored to the user’s taste. The result of this social integration would be much more than the hard work you put in. Steps below are no different from Facebook Docs but are presented much more clearly and from a beginners point of view.

1. Creating a Facebook App

The first and foremost step is to create a Facebook app. It’s easy and would not take more than five minutes.

You can know your App’s IDhereor on the Basic Settings page of your app.

If cookie set to true, the SDK stores the access_token in cookies and let’s you to make API calls without specifying an access_token as it’s directly accessed by Facebook’s server. What is Channel.html? Why do I need it? Answer straight from Facebook:

Adding a Channel File greatly improves the performance of the JS SDK by addressing issues with cross-domain communication in certain browsers. The contents of the channel.html file should be just a single line:
<script src=”//connect.facebook.net/en_US/all.js”></script>

3a Connect through Facebook Login Button

Facebook provides an easy to use Login Button for external websites. You can choose the plugin’s size from small, medium, large, xlarge, by default medium is selected. One of the parameters, show-faces if set to true, shows profile pictures of the user’s friends who have already signed up for your site. You can get your customized Login Button here. Here’s what I get for myself:

Once the user logs in, the Login Button gets hidden and only profile pictures are visible (ofcourse, if show-faces was set to true). I have set show-faces to false, as I know no one except me would be using this app. There is another very important option ‘AutoLogoutLink’ which is undocumented for an unknown reason. Having AutoLogoutLink to true turns the text of Login Button to Logout and allows users to logout of their Facebook session.

TheshowInfomethod
make calls to Facebook Graph API and extract user’s email id and friends. Heremerefers
to the currently logged in user. I have limted the friends count to 3, you can
get the list of all friends by removing the limit clause. You can also merge the
two API calls into one, like:

5 User Status on Page Load

Suppose the user is already logged in to Facebook and had also granted the
permissions you asked earlier. Now when he/she visits your app the Login Button
will show that user is logged in and there would be no way for user to Login
again in your app and you will never be notified for auth.login event. You can
overcome this problem by using FB.getLoginStatus.

1

FB.getLoginStatus(function(response)
{

2

if(response.status
==='connected')
{

3

//
connected

4

showInfo();

5

}

6

});

I have added it with the other event subscriptions (i.e within intialization
SDK), this lets us know whether the user is already connected or not on the page
load. However, you can call
it anytimeto know the
user’s connection status.

Welcome to Loginworks!
Our team of technical writers works extensively to share their knowledge with the outer world. Our professional writers deliver first-class business communication and technical writing to go extra mile for their readers. We believe great writing and knowledge sharing is essential for growth of every business. Thus, we timely publish blogs on the new technologies, their related problems, their solutions, reviews, comparison, and pricing. This helps our readers to get the better understanding of the technologies and their benefits.
For the everyday updates on technologies keep visiting to our blog.

Welcome to Loginworks!
Our team of technical writers works extensively to share their knowledge with the outer world. Our professional writers deliver first-class business communication and technical writing to go extra mile for their readers. We believe great writing and knowledge sharing is essential for growth of every business. Thus, we timely publish blogs on the new technologies, their related problems, their solutions, reviews, comparison, and pricing. This helps our readers to get the better understanding of the technologies and their benefits.
For the everyday updates on technologies keep visiting to our blog.