News

Add the Facebook sign-in button to your site

Discover how to add the Facebook sign-in button on your site, and welcome someone by name

FBsignin950

FBsignin950

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”

×