Pages

Monday, 14 April 2014

Facebook javascript sdk for login popup

Facebook provides a largeset of client-side functionalities that includes Like buttons, Social plugins etc. But what I used is javascript SDK for purposes of authenticate user and fetch information of the user.

In ruby on rails it is not difficult to login with facebook using gem omniauth, but It redirects to next page or next tab. So, to show popup for facebook authentication, i am using javascript sdk provided by facebook.

Steps to Implement:-

Write the following code in your app/views/layouts/application.html.erb where the the body tag starts.

<body>

<div id="fb-root"></div> // fb-root is facebook standard id. Please do not change it

<script>

$(document).ready(function(){

window.fbAsyncInit = function () {

FB.init({ appId: 'appid', cookie: true, xfbml: true, oauth: true });

if (typeof facebookInit == 'function') {

facebookInit();

}

};

(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>

</body>

This given script will automatically include facebook javascript and css.

The appid is provided by the facebook.

Here if condition checks whether the javascript is loaded or not.

fb-root is id provided by facebook. Please do not change it.

Now after that, We have to show the login popup on clicking any button. Write this codein html file under the body tag.