FB.Connect.showFeedDialog
posted June 12, 2009 - 4:37amAfter spending the last 5 hours or so trying to figure out how to get Facebook template feeds working, I decided to post some examples here in the hope that I can save people some trouble. I found it quite frustrating how the Facebook Wiki did not have complete examples but rather little snippets spread about multiple pages.
I will provide you with only the most essential code that you need to get template feeds working with an FBML app. and with an iframe app. The code below is complete and should not need any additional files or code to get the examples working.
Easy FBML approach:
index.php:
<?php
echo "Test";
echo "<form fbtype='feedStory' action='http://host/appname/genfeed.php'>
<input type='text' name='status' />
<input type='submit' value='Publish' label='Publish' />
</form>";
?>
genfeed.php:
<?php
$feedReturn = array(
'content'=> array(
'feed'=> array(
'template_id'=>TTTTTTTTTT,
'template_data'=> array (
// place tokens here
)
)
),
'method'=>'feedStory'
);
echo json_encode($feedReturn);
?>
This approach took me less than half an hour. For this example make sure that index.php and genfeed.php are in the same directory. Fill in "http://host/appname/" with the directory on the server in which your code resides. "TTTTTTTTTT" is the template feed id you get from generating the feed from the Facebook "Create Feed Template" online tool. Push the "Publish" button to bring up the feed form in your app. Notice that you don't need a session.
Harder iframe approach:
Note that the iframe approach is recommended for fancy apps with a lot of AJAX effects and images. For more info on the differences between an FBML and iframe app. check here.
index.php:
<!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 type="text/javascript"
src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php">
</script>
</head>
<body>
<p> Hello </p>
<script type="text/javascript">
function mycallback() {
alert("Callback");
};
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("XXXXXXXXXX", "xd_receiver.htm", null);
FB.ensureInit(function () {
alert('Lib Ready');
FB.Connect.showFeedDialog(TTTTTTTTTT,{},[],"blah",null,
FB.RequireConnect.doNotRequire, mycallback);
});
});
</script>
</body>
</html>
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.js?v2"
type="text/javascript">
</script>
</body>
</html>
Note that "XXXXXXXXXX" is your app. api key and "TTTTTTTTTT" is the template feed id. You can copy and paste xd_receiver.htm verbatim. It is used as part of a process that allows Facebook to communicate with the domain where your app. is being hosted. For this example make sure that index.php and xd_receiver.htm are in the same directory. Actually, index.php does not need to be a php file at all and could just as well be an html file, but whatever.
After much tinkering with no results I discovered that if you choose the iframe approach then you MUST also fill out the "Connect URL" field in the Facebook application settings page as is shown below:
This is necessary to get cross-domain communication working. I assume that you fill in the field with the location of the xd_receiver.htm file. That's what I did and it works for me. Good luck!
Join Xomba Today
Do you like to write? Would you like to make a little extra money on the side? These people do. Join the Xomba community today.
Become a Member
Comments
thanks a lot!!
hi.. thanks a lot for this post!!! it's really2 useful... just wanna share with you... actually i've had my fb application working for the past few months, until suddenly fb decided to alter their application codes (again and again and again... how I hate fb...) which rendered my show feed part not working.///
if not because my boss asked me to write fb applications, I'd just like to toss my shoes at those fb application development api department.. arrghh... the way i see those who handles these application development API at FB, is they're just a bunch of noob interns who like to alter their codes at their own will without even thinking of those hundreds of fb application development users out there who will be effected even if they change a single comma... again and again.. i've been programming since more than 11 years ago, and I can say that writing a fb application is one of the worst i've encountered... not because it's hard, but because the really lack of documentations and working examples, and they like to change their code and api at their own will... come on... most other API (take googlemap, youtube api for example), even if they changed their api and code, they will still support the previous api and code for a few months, and they'll announce the changes months before it's being implemented... but not these noobs facebook application development department.. arrghhh!!
sorry for the rants... i feel better now :D
thanks again for this good post... let's see how long this will last before fb decided to alter their ego again..
anyway thanks again :D
Post new comment