By
Getting an API key
Start by visiting developers.facebook.com and sign in with your Facebook account. Click on ‘Apps’ at the top of the page, and select ‘Create a new app’. Fill out all required information in the overlay and hit ‘Submit’ to be taken to a settings page containing your API key and secret token.
Configure settings
Once you have your API key, click on the ‘Add platform’ button and select ‘Website’. Fill in your app domain in the top section, and in the ‘Site URL’ section. The SDK will then use these to ensure that requests coming from your server are authorised. It is not recommended to use localhost.
Install the SDK
We will be using the JavaScript SDK to embed the Facebook login button. Fire up your IDE of choice and create a new HTML file. Within the <body> section, add the following script, updating the {APP-ID} with the App ID you were provided with from the developer site
001 <div id=”fb-root”></div>
002 <script>
003 window.fbAsyncInit = function() {
004 FB.init({
005 appId : ‘{APP-ID}’,
006 status : true,
007 cookie : true,
008 xfbml : true
009 });
010 </script>
Process the login
Adding the below code underneath the previous step (but still within the script tag), will check the response from the SDK and process the login. If a login is successful, it will call the testAPI() method, if not, it will display the log-in prompt.
001 FB.Event.subscribe(‘auth.authResponseChange’, function(response) {
002 if (response.status === ‘connected’) {
003 testAPI();
004 } else if (response.status === ‘not_authorized’) {
005 FB.login();
006 } else {
007 FB.login();
008 }
009 });
010 };
Welcome the user
Adding the following code snippet underneath the previous step will process the response from the log-in SDK, pull back user data from the API and update the contents of the <div> to display a welcome message. We are also adding the code needed to display the log-in button after our script.use localhost.
001 (function(d){
002 var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
003 if (d.getElementById(id)) {return;}
004 js = d.createElement(‘script’); js.id = id; js.async = true;
005 js.src = “//connect.facebook.net/en_US/all.js”;
006 ref.parentNode.insertBefore(js, ref);
007 }(document));
008 function testAPI() {
009 FB.api(‘/me’, function(response) {
010 document.getElementById (‘welcome’).innerHTML=’Good to see you,
‘ + response.name + ‘.’;
011 });
012 }
013 </script>
014 <fb:login-button show-faces=”true” width=”200” max-rows=”1”></fb:login-button>
015 <div id=”welcome”></div>
The final product
As you can see from the image, when a user logs in to our website using their Facebook account, they will be shown a welcome message personal to them. It is important to note that this script must be run from the domain specified in the developer settings.
“Complete your collection of Web Designer by downloading issues direct from GreatDigitalMags.com or buy print issues from ImagineShop”
