Question

Error obtained is An error occurred, please try again later

I created new facebook app and go the APP ID. I entered domain name as blogspot.in and redirect URL as my blog

I then used the below code from

  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'YOUR_APP_ID',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true,
      });
    };
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>
  <div class="fb-login-button">Login with Facebook</div>

I entered this code in my blog using Javascript/HTML gadget and everything works fine till logging in and allowing the app, after that i’m getting the error.

I even tried this using localhost by changing the 127.0.0.1 to local.localhost in hosts file but even in that i’m getting the same error. i went through many stackoverflow posts and nothing helped.

My questions are;

• can we use login using facebook in blogger
• If so, whats the problem and how to correct it?

Imp: You can view the error by going to my blog and in right side you can see login with facebook option(Don’t worry nothing happens by logging in, I’m just using it for testing)

Answer 1

The facebook button with provide a way to facilitate users to login via facebook. In this way user grant facebook access to your website and once grant access completed, facebook will send you user data. You must use such data to process, authorize, auto login, auto signup user. it can’t be done directly but needed additional steps internally in your website or blog website.

Follow the following approach while implementing facebook login / auto sign up process in your website using facebook login button.

i: page script.

 <script>
    window.fbAsyncInit = function () {
        FB.init({ appId: 'appid', status: true, cookie: true,
            xfbml: true
        });
    };
    (function () {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
           '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    } ());

ii: create link and call facebook function when using click on login button. e.g

<a rel="nofollow" href="javascript:void(0);"  onclick="fb_login();">login to facebook</a>

iii: create fb_login() function

function fb_login() {
FB.login(function (response) {
    if (response.authResponse) {
        // user authorized
        Process_Login(u, redirect);
    } else {
        console.log('User cancelled login or did not fully authorize.');
    }
  }, { scope: 'email,user_birthday,user_hometown,publish_stream' });
}

// this function is responsible for sending data retrieved from facebook to your website via ajax for authorization, auto login, auto registration purpose.

function Process_Login() {
FB.api('/me', function (response) {
    var fb_data = "uid=" + response.id + "&fn=" + response.first_name + "&ln=" + response.last_name + "&gn=" + response.gender + "&bt=" + response.birthday + "&eml=" + response.email;
    if (response.hometown != undefined)
        fb_data = fb_data + "&loc=" + response.hometown.name;
    if (response.username != undefined)
        fb_data = fb_data + "&uname=" + response.username;
    $.ajax({
        type: 'GET',
        url: u + "handlers/signup.ashx",
        data: fb_data,
        success: function (msg) {
             // login process completed
             // redirect user to final page.
        }
    });
  });
}