Friday, 1 July 2016

How to add facebook login and account follow button to your blog/website

Hello, 
today I will show you how to add Facebook login to your blog, what I mean by Facebook login, 

is that your viewers will able to log into there Facebook account through your blog or website.


This is just like, linking your blog to Facebook. Go through this post on the link below and see how to add Facebook like and comment to your.


So as to enable viewer add facebook comment on your page, isn't that great.



>>  How to add facebook like and comment on your blog/website    >>  Move your domain to Whogohost registrar for a rated service

This will impress your visitors and any one of them that comments will be notified if another person comments on that same post. 

This will bring them back to the post any time, anyone comments. Isn't it great.  


To install this face book login into your blog all you need to do is copy the follow code and paste in a new file. 


I mean create a new file in your cPANEL. And this do not only work blogs, it is for all website both forums.


I don't know if this works for blogger blogs.




Facebook login
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      testAPI();
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }

  // This function is called when someone finishes with the Login

  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {

  FB.init({
    appId      : '{your-app-id}',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.5' // use graph api version 2.5
  });

  // Now that we've initialized the JavaScript SDK, we call 

  // FB.getLoginStatus().  This function gets the state of the
  // person visiting this page and can return one of three states to
  // the callback you provide.  They can be:
  //
  // 1. Logged into your app ('connected')
  // 2. Logged into Facebook, but not your app ('not_authorized')
  // 3. Not logged into Facebook and can't tell if they are logged into
  //    your app or not.
  //
  // These three cases are handled in the callback function.

  FB.getLoginStatus(function(response) {

    statusChangeCallback(response);
  });

  };


  // Load the SDK asynchronously

  (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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Here we run a very simple test of the Graph API after login is

  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + 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.
-->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

</fb:login-button>

<div id="status">

</div>

</body>

</html>

Now to make up with this, you can also add a link of your Facebook account to get more followers


To add a Facebook follow to your blog or website 


Add the following code to any page of your choice


<div class="fb-follow" data-href="https://facebook url" data-layout="standard" data-size="large" data-show-faces="true"></div>


Note: you are add Facebook URL. To get that 



>> Share your post on social media by creating share push button   on your blog.


login to your Facebook account>>your wall>><<Then copy the URL of that page. that's your Facebook URL.


For blogger <<blogspot>> bloggers


Login to your blogger account>>Layout>> and follow the picture below to open HTML/Java Script

>> The best blogging software for bloggers in Nigeria blogmuzz.com




Paste the code and save.
Share:

0 comments:

Post a Comment

Is this article important to you