How To: Add Twitter and Facebook Login to Your Site

Everyone has seen those things before, right? In this glorious How To blog post we are going to show you how to implement those two buttons on your website using the JS libraries that both companies provide for free. We will start with Facebook since it is arguably the easier of the two, and then move onto Twitter.
Facebook Social Plugin: The Login Button
Facebook offers a host of what they call social plugins. The one we are interested in is the Login Button. Here are the basic steps involved in getting the button onto your webpage:

1. You need a Facebook app for your site. Go to https://developers.facebook.com/apps/ and click on the “Create New App” button.
2. Your “App Display Name” can be something meaningful. I usually go with the domain name for the site. You can use this same app for other purposes in the future as well. The “App Namespace” needs to be something that does not contain any special characters. I usually use my app display name without spaces, periods, etc.
3. Now you need to enter your “App Domain” and Website “Site URL.” For the app domain enter the domain name on which your site is hosted. For the site URL enter the full URL of your website. For example, if your domain is name.com then your site URL should be something like http://www.name.com. Save your changes once you have the proper information entered.
4. Now you will have a page that shows yours “App ID” and “App Secret”. Just leave that page open because you will need your app ID when you add the login button code to your page.
5. Now we need to go get the login button code from Facebook. Go to http://developers.facebook.com/docs/reference/plugins/login/ and click the “Get Code” button.
6. Copy the HTML5 code from the first box and for now put it just below the body tab of your webpage. The code should look something like this:
   

   <div id=”fb-root”></div>
   <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID”;
   fjs.parentNode.insertBefore(js, fjs);
   }(document, ‘script’, ‘facebook-jssdk’));</script>

   In the code be sure to replace APP_ID with the app id you created for your Facebook app.
7. Now paste the code from the second box in whatever place you want the login button to reside. The code should look something like:
   

   <div class=”fb-login-button” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>

   I changed the data-show-faces attribute to false because with it set to true the logout button will not render when the user is logged in.
8. Most people want to be able to logout and for some reason Facebook makes you add additional attributes if you want the login button to change to a logout button. You can also add a scope attribute with a comma delimited list of permissions you want to ask the user for. Adding the logout attribute and a scope, should we want one, and we end up with something like:
   

   <div class=”fb-login-button” autologoutlink=”true” scope=”publish_stream” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>

9. Refresh your page and you should have a super fancy Facebook login button.

There are a lot more things that you can do with the login button and a lot of things you can do once the user has logged in using the Facebook JavaScript SDK but that is a bit beyond the scope of this article. One thing in particular is grabbing the Facebook ID of the user and associating that in your database with stuff they do, an existing local account, configurations, etc. You also have access to the Facebook Graph API which opens a whole world of potential for you when dealing with a user connected to your site via Facebook.
Twitter @anywhere
For Twitter integration we will be using their @anywhere API. Like Facebook they offer a bunch of functionality but for now we will be focusing on the User Login functionality:

1. You are going to need a Twitter app. Go to https://dev.twitter.com/apps/new and fill out the form.
2. For “WebSite” make sure you use the full URL to your site. For example: http://www.name.com. For Callback URL enter the same. Save it and you will be taken to the details page for your app. For our Twitter login button we will be needing the “Consumer key” so go ahead and leave that page open.
3. We need to include the Twitter @anywhere library so put the following code somewhere on your webpage. Just before the closing body tag is usually best:
   

   <script src=”http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1″ type=”text/javascript”></script>

   In the code replace YOUR_API_KEY with the consumer key for the app you created.
4. Now put the following code where you want the Twitter login button to reside:
   

   <span id=”login”></span>

   The id attribute can be set to something more meaningful for your particular implementation if you wish.
5. To generate the login button you will need to include the following Javascript:
   

   <script type=”text/javascript”>
   twttr.anywhere(function (T) {
   T(“#login”).connectButton();
   });
   </script>

   If you changed the id attribute in the step above be sure to reference it properly here by changing “login” to whatever value you used.
6. Refresh the page and you should now see your Twitter button!

Just like Facebook, once the user is connected via Twitter there are a lot of things you can do and a lot of information you can acquire. You can pull the user’s Twitter ID and associate it with a local account, pull information related to the user’s Twitter account, and more. Read up on @anywhere to find out more.

Basic One Page Example
You will need to replace both API keys with your own.

<!doctype html>
<html>
<head>
<title>Facebook and Twitter Login Example</title>
</head>
<body>
<!– div element required by Facebook –>
<div id=”fb-root”></div>
<header>
</header>
<div>
<!– div element where the Facebook login button will render –>
<div class=”fb-login-button” autologoutlink=”true” scope=”publish_stream” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>
<!– div element where the Twitter login button will render –>
<span id=”login”></span>
</div>
<footer>
</footer>
<!– load the Twitter @anywhere JS library –>
<script src=”//platform.twitter.com/anywhere.js?id=aB96ybCPDjdDb2X8gYYg&v=1″ type=”text/javascript”></script>
<script type=”text/javascript”>
// initialize Facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=200794916679736″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
// initialize Twitter
twttr.anywhere(function (T) {
T(“#login”).connectButton();
});
</script>
</body>
</html>