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>

Quirky Stuff

There are some odd ball things that happen with both of these platforms. There are ways around them which I show in the more detailed example that you can download at the end of this article. Here are the most glaring:

  • When you click the Facebook logout button it does not automatically turn back into a login button.
  • When you connect via Twitter the button does not allow you to click on it to log out. It just tells you that you are connected.

A More Detailed Example

This zip file contains a quick example that deals with the various quirks and also displays the basic information returned for the user when they login. It’s in the CodeIgniter framework, includes the super cool HTML5 Boilerplate, and jQuery so there is a bit of extraneous stuff, but it’s what I got already put together. You should be able to pull it apart and make it work for your own purposes.

example.zip

  • jafer balti

    Great article good work.

  • http://twitter.com/LaDivaLatinaMag la diva latina mag

    thank u! ur a genius!

  • dvora meir

    but what with the sdk??

  • http://www.facebook.com/ste.kearns.92 Ste Kearns

    People reading this should be aware that @Anywhere is deprecated and will not work after March 2013
    I’m currently looking for the next easiest way to implement this if anyone has any ideas? ste@xnoob.com

  • velohut

    Twitter anywhere is deprecated on March 5th 2013 so this needs to be updated

  • janter

    The Twitter section is outdated.

  • Mobile Anime

    This blog is down to earth, hats off buds available.piratage facebook

  • sdsdsd

    I successfully used your code but, the problem I am having now is that, after user has successfully login to my site it still stock to login page. how to redirect user to the content of my site after successfully login?

  • 2468

    Hey i copied and pasted the code into my dreamweaver document but the page is just blank.
    Any idea why this is happening??