How To Get Logged In / Current Facebook User’s ID On Iframe Page Tabs?
Facebook recently announced that it would no more support new FBML (Facebook Markup Language) based applications. Accordingly the option to create new FBML apps on Facebook has now been removed and developers can now create only Iframe based applications on Facebook. Static FBMLs have been also deprecated to a great extent.
One method of interacting with users on Facebook used by many brands is the Fan Page tab by getting the currently logged in Facebook user's ID. However with new Iframe fan page tabs, the method is a bit different. In this article we will tell you how to get the Logged In / Current Facebook User's ID on Iframe page tabs.
The idea behind getting the logged in user's Facebook ID is to make him / her interact with the page. We do this by showing a Permissions or App login dialog using FB.Login from the Facebook Javascript SDK. When the user accepts the permissions, the FB.Login method returns an access token which can be used to query the Facebook database via the Graph API. Here is the full code for the same.
You can check out a live demo here: facebook.com/digitizor?sk=app_150734978329989
You can read more Facebook API Development articles on this page. If you are facing any problem with the implementation do write to me at: debjit@digitizor.com. You can also hire me for developing Facebook applications for you.
Let us know in the comments section if you face any problems.
| <?php | |
| /*********************************/ | |
| $fbAppId = "150734978329989"; // replace this with your Facebook Apps' App ID | |
| $fbAppSecret = "b62cb0fa9d74e2c8ce74198343938241"; | |
| /*********************************/ | |
| //Login for serving the Ajax routine | |
| if ( $_GET['ajax']=="yes" ) { | |
| $token = $_POST['token']; //get the access token from the User after he/she authorises the app | |
| $userData = json_decode(file_get_contents("https://graph.facebook.com/me?access_token=".$token), true); //get User's data using the Graph API | |
| echo $fbuid = "Facebook User ID: ".$userData['id']."<br />"; //User's Facebook ID | |
| echo $fbfname = "First Name: ".$userData['first_name']."<br />"; //User's First Name on Facebook | |
| echo $fblname = "Last Name: ".$userData['last_name']; //User's Last Name on Facebook | |
| } else { | |
| require "facebook.php"; | |
| $facebook = new Facebook(array( | |
| 'appId' => $fbAppId, | |
| 'secret' => $fbAppSecret, | |
| 'cookie' => true | |
| )); | |
| $signed_request = $facebook->getSignedRequest(); | |
| $like_status = $signed_request["page"]["liked"]; | |
| //Normal HTML Page | |
| ?> | |
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| function login(varr) { | |
| if ( varr == 1 ) { alert('Please Like This Page First, by Clicking the Like button Above!'); } else { | |
| //this function should be attached to your code's events which will initiate the Facebook login dialog. | |
| //After user authorises this app, we will get the Access Token, which is returned by Facebook in order | |
| //to find the current user' Facebook UID | |
| FB.getLoginStatus(function(response) { | |
| if (response.status === 'connected') { | |
| // the user is logged in and has authenticated your | |
| // app, and response.authResponse supplies | |
| // the user's ID, a valid access token, a signed | |
| // request, and the time the access token | |
| // and signed request each expire | |
| var uid = response.authResponse.userID; | |
| var accessToken = response.authResponse.accessToken; | |
| getFBuid(accessToken); | |
| } else if (response.status === 'not_authorized') { | |
| FB.login(function(response) { | |
| if (response.status === 'connected') { | |
| var uid = response.authResponse.userID; //we have got the User's facebook ID here | |
| var accessToken = response.authResponse.accessToken; //Access Token from facebook | |
| getFBuid(accessToken); | |
| } else { | |
| alert("There was an error :("); | |
| } | |
| },{scope:'email'}); | |
| } else { | |
| FB.login(function(response) { | |
| if (response.status === 'connected') { | |
| var uid = response.authResponse.userID; //we have got the User's facebook ID here | |
| var accessToken = response.authResponse.accessToken; //Access Token from facebook | |
| getFBuid(accessToken); | |
| } else { | |
| alert("There was an error :("); | |
| } | |
| },{scope:'email'}); | |
| } | |
| }); | |
| } | |
| } | |
| function getFBuid(token) { | |
| //This function gets User's data from the Graph API with the help of the access token Received | |
| $("#loaderr").show(); | |
| $.post("index.php?ajax=yes", {token: token}, | |
| function(data) { | |
| $("#loaderr").hide(); | |
| alert (data); | |
| $("#fbuid").html(data); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="fb-root"></div> | |
| <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> | |
| <script type="text/javascript"> | |
| FB.init({ | |
| appId : '<?php echo $fbAppId; ?>', | |
| status : true, // check login status | |
| cookie : true, // enable cookies to allow the server to access the session | |
| xfbml : true // parse XFBML | |
| }); | |
| </script> | |
| <span id="fbuid"> | |
| <?php if ($like_status) { ?> | |
| Facebook User ID: <a href="javascript: login(2)">Click to Get Uid</a> <!-- Note that we have attached the login() function | |
| to the Link as shown here, and explained above--> | |
| <?php } else { ?> | |
| Facebook User ID: <a href="javascript: login(1)">Click to Get Uid</a> <!-- Note that we have attached the login() function | |
| to the Link as shown here, and explained above--> | |
| <?php } ?> | |
| </span> | |
| <br /><br /> | |
| <span id="loaderr" style="display: none;">Please Wait...</span> | |
| <br /><br /> | |
| Full Tutorial on "How To Get Logged In / Current Facebook User’s ID On Iframe Page Tabs?" here: <a target="_blank" href="http://digitizor.com/?p=10437">digitizor.com/?p=10437</a> | |
| </body> | |
| </html> | |
| <?php } ?> |