Some days ago facebook released their new graph api system to develop social sites more easily. Its really cool and I personally like the facebook's new graph api system. Facebook also updated their old facebook connect system and provided better way to integrate facebook connect feature, user authentication and calling facebook api from website.
In this article, I'll highlight javascript base
- Facebook connect authentication for websites
- How to use graph api
- How to show stream publish prompt and share prompt
- How to run FQL query using javascript
- How to set status using old legacy api calling by javascript
Here is the demo http://thinkdiff.net/demo/newfbconnect1/newconnect.php
1. Facebook connect authentication Firstly you've to setup a facebook application to get the application id. You can setup application from here. Or if you have already setup a facebook application then just copy the application id and replace with xxxxxxxxxxx.
01 | <div id="fb-root"></div> |
02 | <script type="text/javascript"> |
03 | window.fbAsyncInit = function() { |
04 | FB.init({appId: 'xxxxxxxxxxxxxx', status: true, cookie: true, xfbml: true}); |
07 | var e = document.createElement('script'); |
08 | e.type = 'text/javascript'; |
09 | e.src = document.location.protocol + |
10 | '//connect.facebook.net/en_US/all.js'; |
12 | document.getElementById('fb-root').appendChild(e); |
Just put this code in your html file after the body tag. This is the most efficient way to load the javascript SDK in your site. And in this way the sdk will load asynchronously so it does not block loading other elements of your page. Details of FB.init method.
And your html tag should be
Now we will use another method FB.Event.subscribe so that we can subscribe some events like login, logout, sessionChange. So modify the window.fbAsynInit and update by below code
01 | window.fbAsyncInit = function() { |
02 | FB.init({appId: 'xxxxxxxxxxx', status: true, cookie: true, xfbml: true}); |
05 | FB.Event.subscribe('auth.login', function(response) { |
09 | FB.Event.subscribe('auth.logout', function(response) { |
14 | FB.getLoginStatus(function(response) { |
15 | if (response.session) { |
