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:
You need a Facebook app for your site. Go to https://developers.facebook.com/apps/ and click on the "Create New App" button.
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.
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.
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.
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.
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.
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.