Facebook Integration in Websites

We were starting with a new project. We have been made aware that for authentication, we would be using Facebook Credentials. The site would have functionalities like Facebook Comments, Facebook Like and Facebook Recent Activity, to be more precisely, a site which interacts with Facebook.

The requirement needs a bit of discovery due to Facebook Integration. I was thinking why they were so specific with the Sign On with Facebook Credentials rather than customized login for the site. Well I assumed that one of the reasons was, we personally do not have to maintain a new set of user name and password for this website. It makes sense; I have a spreadsheet to maintain the User Name and Password for the web sites I browse.

We did a bit of research and have zeroed that we would use the JavaScript SDK for Facebook Integration.  http://developers.facebook.com/docs/reference/javascript/. Let me provide you some guidelines to do this.

Loading the Javascript SDK in the application

Load the SDK using the standard <script> element and calling FB.init. We should specify a <div> element named fb-root within the document as well

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

<script src=”http://connect.facebook.net/en_US/all.js”></script>

 <script>

  FB.init({

    appId  : ‘YOUR APP ID’,

    status : true, // check login status

    cookie : true, // enable cookies to allow the server to access the session

    xfbml  : true,// parse XFBML

    oauth  : true // enable OAuth 2.0

  });

</script>

This code needs to place on pages where FB tags are used.

This tag should be ideally placed in the master page. ‘YOUR APP ID’ we should register our website and in return it provides your Application Id, this should be replaced with the application id provided by Facebook.

https://developers.facebook.com/apps/

Providing the Login Button on the Page

Add the below tag on the page.

<fb:login-button>Login with Facebook</fb:login-button> 

When the user loads the page in their browser, the JavaScript SDK renders the Login Button on your page as below.

When the user clicks the login button from this page, they will see the below authorization dialog.

Providing the Facebook Registration on the Page

Using the Registration Plugin is just as simple as using the Login Button. Add the below tag on the page.

         <fb:registration

            fields=”[{‘name’:’name’}, {‘name’:’email’},

            {‘name’:’favorite_car’,’description’:’What is your favorite car?’,

            ‘type’:’text’}]” redirect-uri=”URL_TO_LOAD_AFTER_REGISTRATION”>

    </fb:registration>

 

If the user is not already logged into Facebook, they will see the below form.

If the user is already logged into Facebook or decides to login from the registration form, they will see the below.

Once the user reviews the information and/or enters any custom fields, the user clicks Register. This will start the authentication and authorization process which is denoted by the below dialog:

Providing the Facebook Comment Plugin to Publish on your wall

Add the below Script  tag on the page. 

    <script>

       var postid;

            postid = FB.init({

            appId:’YOUR_APP_ID’, cookie:true,

            status:true, xfbml:true

         });

 

         FB.ui({ method: ‘feed’,

            message: ‘Facebook for Websites is super-cool’});

        function (response) {

                if (response && response.post_id) {

                   alert(‘Post was published.’);

                } else {

                    alert(‘Post was not published.’);

                };

            }

       </script>

  

When this page is loaded in the user’s browser, the JavaScript SDK will render the below dialog that the user can use to post to their feed. There are lot of other parameter to the FB.UI function, like name,caption,description,picture and link.

 Providing the Facebook Like Button.

Add the below tag on the page 

       <iframe src=”http://www.facebook.com/plugins/like.php?href=YOUR_URL”

        scrolling=”no” frameborder=”0″

        style=”border:none; width:450px; height:80px”></iframe>

   Providing the Recent Activity List

Add the below tag on the page 

 <iframe src=”http://www.facebook.com/plugins/activity.php?site=%27Your+APP+URL%27&amp;width=300&amp;height=300&amp;header=true&amp;colorscheme=light&amp;font=arial&amp;border_color=Black&amp;recommendations=false” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:300px;” allowTransparency=”true”></iframe>.

  

 

Happy Coding!!!!!!!

Posted in:

Leave a Reply