RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


The To-Do List for Securely Adding a Facebook Login Button

Get the Facebook login button to work together with your site's existing user and session management while maintaining the site's security level.


If you just want to set up a simple Facebook login button for your site, it is extremely straight forward and takes about five minutes. But simply having a Facebook login button isn't very helpful because the login transaction goes through Facebook's system and you never get to find out who just logged in and you cannot add them to your user database.

What developers typically need to do is to get the Facebook login button to work together with the site's existing user and session management while maintaining the site's security level. So, in order to have the Facebook login button work seamlessly with a site's own registration system, further steps than just the basic setup are needed. These steps include working with the Facebook SDK to pull user data that your application requires, and integrating the user data with your own user management system.

Facebook provides two main SDKs for enabling a site to get access to user data: PHP or JavaScript. The PHP SDK is a server-side solution, while the JavaScript SDK is a front-end solution. Facebook also offers a couple of mobile SDKs, but they will not be covered in this article.

The PHP SDK is known to be more secure since it is a server-side solution, but the JavaScript SDK is more flexible, better technologically positioned to create a nicer user experience, and does not tie the programmer to any particular server-side language. Due in large part to these benefits, the JavaScript SDK has seen a higher rate of adoption. In this article, we will go over the setup and security concerns for using the JavaScript SDK for user registration and authentication when integrating the Facebook login button into your website.

Step 1: Placing the Facebook Login Button

Placing the Facebook login button on your site is relatively simple. This article will walk you through the setup process, but for reference you should also read through the official page for the Facebook login button setup documentation.

To place the actual button, you need to add a few snippets of code into your HTML. First, just paste the following code into your HTML, preferably in the header so that it is above the code used to place the actual button:

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>
appId : 'insert_your_app_id_here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true

Of course, there are a few adjustments you have to make. If your website uses a language other than English, you need to change the en_US extension to the extension that corresponds to your website's language. You also need to change the appId field to the application ID Facebook provided you when you made an application in your developer account.

Below that, somewhere in the body of your pages, you can place the code that renders the actual Facebook button. Here is how that code looks like:

<fb:login-button show-faces="false" perms="user_about_me,email,user_location" autologoutlink="true" width="200" max-rows="1">

That will get the login button to appear. Now you need to make it work with your site.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date