How to create a Facebook Login Button for your Blog or Website

1 comment

Facebook is one of the lagest social media and it help any new or old website to grow further in their era by making their readers and followers alive by making them attach and in contact.

There are many thing that Facebook have to do with One of this is Facebook Login.

Here we learn now how to add a Facebook login Button to Any Website or Blog

(You Ned a Facebook App ID before you Move Further)

Create a New facebook App on the Facebook App Dashboard, And Enter all Basic Information Which are Needed.

One You have Created the App, Carefully Note down the app ID for the future use.


Alternately, You can use the ID of an existing app.

Add the Facebook SDK for JavaScript

After that add this code given below for JavaScript initialization after <body> tag.

<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    // Additional init code here
  };
  // Load the SDK asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Customisation :


  • You Need to Put your App ID for the proper functioning of Login Button.
  • You Need to Put Channel File.


The contents of the channel.html file can be just a single line:

 <script src="//connect.facebook.net/en_US/all.js"></script>

So Simply Prepare any Post and put the above code in that and publish it and use the Link of that Post in Channel.html Your Link must be as similar as :

//www.coderdesire.com/2013/09/channel.html

Add the login code

Add the login handling to your HTML to end up with the code below.(Add this code where you want to add as per your desire).

<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
  FB.init({
    appId      : 'YOUR_APP_ID', // App ID
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });
  // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
  // for any authentication related change, such as login, logout or session refresh. This means that
  // whenever someone who was previously logged out tries to log in again, the correct case below
  // will be handled.
  FB.Event.subscribe('auth.authResponseChange', function(response) {
    // Here we specify what we do with the response anytime this event occurs.
    if (response.status === 'connected') {
      // The response object is returned with a status field that lets the app know the current
      // login status of the person. In this case, we're handling the situation where they
      // have logged in to the app.
      testAPI();
    } else if (response.status === 'not_authorized') {
      // In this case, the person is logged into Facebook, but not into the app, so we call
      // FB.login() to prompt them to do so.
      // In real-life usage, you wouldn't want to immediately prompt someone to login
      // like this, for two reasons:
      // (1) JavaScript created popup windows are blocked by most browsers unless they
      // result from direct interaction from people using the app (such as a mouse click)
      // (2) it is a bad experience to be continually prompted to login upon page load.
      FB.login();
    } else {
      // In this case, the person is not logged into Facebook, so we call the login()
      // function to prompt them to do so. Note that at this stage there is no indication
      // of whether they are logged into the app. If they aren't then they'll see the Login
      // dialog right after they log in to Facebook.
      // The same caveats as above apply to the FB.login() call here.
      FB.login();
    }
  });
  };
  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));
  // Here we run a very simple test of the Graph API after login is successful.
  // This testAPI() function is only called in those cases.
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Good to see you, ' + response.name + '.');
    });
  }
</script>
<!--
  Below we include the Login Button social plugin. This button uses the JavaScript SDK to
  present a graphical Login button that triggers the FB.login() function when clicked.
  Learn more about options for the login button plugin:
  /docs/reference/plugins/login/ -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>

Now you can test your app by going to the URL where you uploaded this HTML.

Hope You Find it Help full.:)


← BLOGGER OR GOOGLE+ →

1 comment: