Facebook PHP api and XFBML on iframe.

Solving few problems i have had.

Page 1 of 1

0 Replies - 39009 Views - Last Post: 04 February 2010 - 10:13 AM Rate Topic: -----

#1 TMKCodes  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 48
  • View blog
  • Posts: 440
  • Joined: 21-March 09

Facebook PHP api and XFBML on iframe.

Posted 04 February 2010 - 10:13 AM

In this tutorial i will guide you how to build an facebook application with PHP and XFBML. This tutorial needs you to understand PHP, html and bit of javascript.

- First go to http://www.facebook.com/developers/ and set up your application. Help you can find from -> http://developers.fa...get_started.php

- Now you have your application set up, be sure that you have Iframe setting selected at your canvas settings.

- Now you can start writing the application. Iframe work like an normal site, but to connect it with facebook requires some tweaks like using XFBML (Extra FaceBook Markup Language)

- Now download and extract the Facebook PHP api http://svn.facebook....platform.tar.gz to your web server.

- Create an index.php at the location what you set as your canvas page.

- Create xd_receiver.htm file to where your index.php is and add
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<body> 
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript">
</script> 
</body> 
</html>


as the content of the file.

Now lets do some code.

<fb:if-is-app-user> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 


In this code we are checking if the user is your app user with <fb:if-is-app-user>. You can also see that we have added xmlns:fb="http://www.facebook.com/2008/fbml" to the <html> tag. This is required for XFBML.

<head>
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></scrip>


In this code we call the facebook javascript API lib

<?php
// Lets include the facebook php api
require_once 'facebook-platform/php/facebook.php';
// Lets add your api keys
$CanvasPageUrl = 'YourAppCanvasPageUrl';
$appapikey = 'Your Application API key';
$appsecret = 'Your Application Secret key';
// Lets log in your user and send the facebook api keys.
$facebook = new Facebook($appapikey, $appsecret);


In this code we make sure the facebook PHP api works.

$user_id = $facebook->require_login();

// Output the user name
echo 'Hello <fb:name uid="'.$user_id.'" useyou="false"></fb:name>';
// Output working link
echo ' <a href="'.$CanvasPageUrl.'?friends=1" target="_TOP">Show your friends!</a>';

if($_GET['friends'] == 1)
{
   // Print out at most 25 of the logged-in user's friends,
   // using the friends.get API method
   echo "<p>Friends:";
   $friends = $facebook->api_client->friends_get();
   $friends = array_slice($friends, 0, 25);
   foreach ($friends as $friend) {
      echo '<br><fb:name uid="'.$friend.'" useyou="false"></fb:name>';
   }
   echo "</p>";
}
?>



This part of the code we get the logged in users id and use the XFBML <fb:nam></fb:name> tag to show the users name. We also output an link back to your facebook canvas url, with information to show the logged in users friends. Then we get the logged in users friends and output their names.

<script type="text/javascript">FB.init("<?php echo $appapikey; ?>", "xd_receiver.htm"); </script>
</body>
</html>	
<fb:else> <fb:redirect url="http://www.facebook.com/login.php?v=1.0&api_key=<?php echo $appapikey; ?>&next=<?php echo $CanvasPageUrl; ?>&canvas="/> 
</fb:else> 
</fb:if-is-app-user>



In this code we are initializing Facebook Connect and redirecting users who are not your app users.

So basicly, if you follow the guides of facebook you will have problems with Links to your facebook app and with XFBML rendering w/o the connect button. <fb:if-is-app-user> tag is required to render XFBML without forcing the user to press <fb:login-button></fb:login-button> every time he loads new page.

You can find much help from http://developers.facebook.com/
FBML tags -> http://wiki.develope.../index.php/FBML
XFBML tags -> http://wiki.develope...index.php/XFBML
Restful api -> http://wiki.develope...m/index.php/API

Is This A Good Question/Topic? 1
  • +

Page 1 of 1