How Would You Add Facebook Sign-In Button To Your Website?

How Would You Add Facebook Sign-In Button To Your Website?

With 100 million active users Facebook is the most popular and transparent social site to get sociable. While browsing websites if your visitor can get a Social Network Login to access your website to share contents easily or comment accordingly, he or she will hit the Facebook button prior to other buttons.

fb-button-3-prev

Therefore, you need to see that Facebook Sign-In app. How would you add that Facebook Sign-In app to your website? So, let a professional website development company be a friend and guide you.

Get the API Key

Visit developers.facebook.com and sign in with your Facebook account. Click on Apps–> Select Create a new app–> Fill out all the required information–> Hit submit that takes you to the settings page containing the API key and secret token.

Configure Your Settings

After you get the API Key, Click on Add –> Select Website –> Fill in the app domain at the top of your section and in the Site URL section. SDK will use these to make sure that the request coming from your server is authorized; we do not recommend the use of localhost.

Installation of SDK

Use of JavaScript SDK comes to play when we embed the Facebook login button to websites. Its time to chose the IDE and create new HTML file. Within the <body> section, add the script, update the APP-ID section with the App ID provided to you from the developer’s site.

1 <div id=”fb-root”></div>

2 <script>

3 window.fbAsyncInit = function() {

4 FB.init({

5 appId : ‘{APP-ID}‘,

6 status : true,

7 cookie : true,

8 xfbml : true

9 });

10 </script>

Process a Successful Login

Add the code below and under the previous step and check the response from SDK and process the login. If the login process is successful, it will call for the testAPI() method if not it will display the log-in prompt.

1 FB.Event.subscribe( ‘auth.authResponseChange’, function(response) {

2 if (response.status === ‘connected’) {

3 testAPI();

4 } else if (response.status === ‘not_authorized’) {

5 FB.login();

6 } else {

7 FB.login();

8 }

9 });

10 };

Welcome Your Visitor

Add the following code snippet under the previous step and let it process the response from the login SDK, pull back user data from API and update contents of the <div> to display a welcome message. We also add the code required to show the display login button after the script use localhost.

1 (function(d){

2 var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];

3 if (d.getElementById(id)) {return;}

4 js = d.createElement(‘script’); (js.id = id; js.async = true;

5 js.src = “//connect.facebook.net/en_US/all.js”;

6 ref.parentNode.insertBefore(js, ref);

7 }(document));

8 function testAPI() {

9 FB.api(‘/me’, function(response) {

010 document.getElementById (‘welcome’).innerHTML=’Good to see you,

+ response.name + ‘.’;

11 });

12 }

13 </script>

14 <fb:login-button show-faces=’true’width= ‘200’max-rows= ‘l’></fb:login-button>

15 <div id=’welcome’></div>

 

Facebook Login Enabled

When a user logs in to your website using their Facebook account, they will be able to see a personal welcome message. Note this – script must run from the domain specified in the developer settings.

Credit: Image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s