Facebook Cookbook » iFrame http://fbcookbook.ofhas.in thousands of app development recipes Sun, 21 Mar 2010 10:38:11 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 fbml rendering in iframe application http://fbcookbook.ofhas.in/2009/02/03/fbml-rendering-in-iframe-application/ http://fbcookbook.ofhas.in/2009/02/03/fbml-rendering-in-iframe-application/#comments Tue, 03 Feb 2009 16:26:23 +0000 Mahmud Ahsan http://fbcookbook.ofhas.in/?p=57 before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application steps of developing iframe based facebook application: 1. when you setup a [...]]]>

before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application

steps of developing iframe based facebook application:

1. when you setup a new application in facebook, choose “use iframe” for canvas page url.
2. now set the authentication code, at your bootstrap file:


<?php
include “facebook.php”;
$facebook = new facebook(’api_key’, ’secret_key’);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isappadded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>

3. and don’t forget to place the necessary facebook php library. http://wiki.developers.facebook.com/index.php/php

now i’m describing the main topic, that is how to render xfbml or fbml in your iframe based application.

1. first create a file called xd_receiver.htm
2. place xd_receiver.htm in the root directory. suppose your application base directory is: http://myapp.com/iframeapp . then place xd_receiver.htm in iframeapp folder. now add the following html code to xd_receiver.htm .


<!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” >
<head>
<title>cross-domain receiver page</title>
</head>
<body>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/xdcommreceiver.debug.js” type=”text/javascript”></script>
</body>
</html>

now in your view file, or may be layout file, place this code. here i’m showing the layout files format for iframe application.


<!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”>

<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/featureloader.js.php” type=”text/javascript”></script>

</head>

<body>

<!– here is the fbml code in iframe application –>

<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>

<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for   details>” method=”post” invite=”true” type=”xfbml” content=”this is a test invitation from xfbml test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’ignore the connect test app!’ />  ” >  <fb:multi-friend-selector showborder=”false” actiontext=”invite your friends to use connect.”>  </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

<!– here is the xfbml code –>


this is <fb:name uid=”<?=$this->userid?>” useyou=’false’> </fb:name>
my photo <fb:profile-pic uid=”<?=$this->userid?>” > </fb:profice-pic>

<!– remember all xfbml tags should be placed before below javascript code –>

<script type=”text/javascript”>
fb_requirefeatures(["xfbml"], function(){
fb.facebook.init(”place here the api key of your application“, “xd_receiver.htm”);
});
</script>

</body>

</html>

** remember xfbml is nothing but a subset of fbml that are supported for iframe application.

<fb:serverfbml> : this tag is used to renders the fbml on a facebook server inside an iframe. details of this tag is here: http://wiki.developers.facebook.com/index.php/fb:serverfbml

references:

1. http://wiki.developers.facebook.com/index.php/xfbml
2. http://wiki.developers.facebook.com/index.php/cross-domain_communication_channel
3. http://wiki.developers.facebook.com/index.php/php
4. http://wiki.developers.facebook.com/index.php/creating_your_first_application

]]> http://fbcookbook.ofhas.in/2009/02/03/fbml-rendering-in-iframe-application/feed/ 9