FBML Dynamic Setup
From Facebook Developer Wiki
Note: This example was taken from Facebook Developers Forum - which was used in the I am Voting Application.
As mentioned above this is used in my I am Voting application. I have explain simply below to create your own FBML profile pages that can be updated with a UNIQUE HANDLE.
With this example, we hope to accomplish the following:
- Allow you to have a static but UNIQUE FBML profile page
- Allow you to have a section in the profile page that is same for all of your application users (Global)
- Allow you to update the content of the Global section
- Allow you to update the content of the individual's unique profile page
main.php or index.php which actually is called to set the FBML:
Contents |
index.php
<?php
// the facebook client library
include_once 'facebook.php';
// some basic library functions
include_once 'lib.php';
// this defines some of your basic setup
include_once 'config.php';
//YOUR OTHER CODES HERE
try {
$handle = $campaign . "_" . $party;
include_once 'default_fbml.php';
$facebook->api_client->profile_setFBML( $fbml, $user);
$facebook->api_client->fbml_refreshRefUrl("http://www.iamvoting.com/fb/fbml_global.php?handle=" . $handle);
$facebook->api_client->fbml_refreshRefUrl("http://www.iamvoting.com/fb/fbml_wide.php?handle=" . $handle);
$facebook->api_client->fbml_refreshRefUrl("http://www.iamvoting.com/fb/fbml_narrow.php?handle=" . $handle);
} catch (Exception $e) {
error_log($e->getMessage());
}
?>
As you can see from the above, I have 3 PHP URLs are being refreshed so that FACEBOOK can cache that URL's content to show on the profile page based on the $handle value. Facebook Cache the contents and that is why you have to use the $facebook->api_client->fbml_refreshRefUrl() to refresh the cache page for Facebook to update the Cache.
$handle can be the unique value that will allow your PHP script to update a unique photo for each profile. I will explain below why I am using the three PHP code and provide you with the code as well.
default_FBML.php
This file is included above to define the $fbml
<?php $fbml = '<fb:fbml version="1.1"> <fb:wide> <div class="inside_the_box wide clearfix app_content" id="app_content"> <div> <div style="padding-left: 0px; font: bold 11px Arial"> <table cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0px; margin: 0px; text-align: left; valign: top; float: left"> <img align="left" src="http://www.iamvoting.com/images/iamvoting_logo_small.png" width="150"/> </td> <td style="padding-left: 5px; font: bold 11px Arial float: right"> <img align="left" src="' . get_party_logo($party) . '"/> </td> <tr> <td colspan=2 style="text-align: right; padding-top: 5px"> I am Voting for the <b>' . get_party_name($party) . '</b> because: </td> </tr> <tr> <td width="10px"></td><td></td> </tr> <tr> <td colspan=2 style="padding-top: 5px"><span style="color: #808080">' . $reason . '</span></td> </tr> <tr> <td colspan=2 style="padding-left: 0px; font: bold 11px Arial float: right"> <fb:ref url="http://www.iamvoting.com/fb/fbml_wide.php?handle=' . $handle . '" /> </td> </tr> </table> </div> </div> </div> </fb:wide> <fb:narrow> <div class="inside_the_box wide clearfix app_content" id="app_content"> <div> <div style="padding-left: 0px; font: bold 11px Arial"> <table cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0px; margin: 0px; text-align: left; valign: top; float: left"> <img align="left" src="http://www.iamvoting.com/images/iamvoting_logo_small.png" width="150"/> </td> </tr> <tr> <td style="padding-left: 5px; font: bold 11px Arial float: right"> <img align="left" src="' . get_party_logo($party) . '"/> </td> <tr> <td style="text-align: right; padding-top: 5px"> I am Voting for the <b>' . get_party_name($party) . '</b> because: </td> </tr> <tr> <td width="10px"></td><td></td> </tr> <tr> <td style="padding-top: 5px"><span style="color: #808080">' . $reason . '</span></td> </tr> <tr> <td style="padding-left: 0px; font: bold 11px Arial float: right"> <fb:ref url="http://www.iamvoting.com/fb/fbml_narrow.php?handle=' . $handle . '" /> </td> </tr> </table> </div> </div> </div> </fb:narrow> </fb:fbml>'; ?>
Above is my default FBML page for the IamVoting.com profile page box. The above code has reference to the 3 PHP code that you are refreshing ($facebook->api_client->fbml_refreshRefUrl()) in the previous index.php code. Also you can see that I am setting the UNIQUE image for each user by just calling get_party_name($party) PHP code right into my default FBML. I don't need that to be dynamic unless the USER updates their support for a party again. This PHP code gets the logo of the party they want to support for an election and put it right into their profile.
The other 3 PHP codes are being updated dynamically and it can be either done manually by you or can leave it like mine so everytime a user votes the URLs gets updated. It can also be done using an infinite session and CRON work. We can talk about that later.
Also you should note in the above code that I am using <fb:wide> and <fb:narrow> as part of my default_fbml.php file. This is because I want the content of my application box in the profile to look different when the user has the application on the right side (large width) and the left side (small width).
Now I will explain why I used 3 PHP code that can be updated. You can just use 1 PHP code for your site.
fbml_global.php
This file is included above to define the $fbml. This will update the subtitle of the profile box for ALL THE USERS that are using my application and have added it in their profile.
<?php $handle = $_GET['handle']; ?> <fb:subtitle seeallurl="http://www.facebook.com/board.php?uid=11178405643" > [[DO WHATEVER HERE]] </fb:subtitle> [[OR POST WHATEVER HERE]] ?>
fbml_wide.php
<?php
// some basic library functions
include_once 'lib.php';
// this defines some of your basic setup
include_once 'config.php';
?>
<div style="clear: both"></div>
<div style="align: center; height: 125px; background-color: #ffffff; overflow: auto">
<div style="padding: 4px; margin-top: 2px; color: #3B59B5;
align=right; border-bottom: 1px solid #B1BDD6; font: bold 10px Arial">
<a href="http://apps.facebook.com/iamvoting/?a=stats">view iamvoting.com statistics</a> |
<a href="http://apps.facebook.com/iamvoting/">Vote Now</a> |
<a href="http://www.facebook.com/board.php?uid=7160624717">Discuss</a> |
<a href="http://www.facebook.com/apps/application.php?id=7160624717">About Us</a><br />
</div>
<div style="padding-left: 2px; font: normal 10px Arial">
<table cellpadding="0" cellspacing="0">
<?php
$handle = $_GET['handle'];
$pieces = explode("_", $handle);
$campaign = $pieces[0]; // campaign
$party1 = $pieces[1]; // party
$parties = $db->get_results("SELECT * FROM [table] WHERE campaign_id='$campaign' ORDER BY party_id ASC");
$total_votes = get_total_votes($campaign);
if ($parties) {
foreach($parties as $party) {
$party_name = $party->party_name;
$party_id = $party->party_id;
echo '<tr>
<td style="text-align: right">' . $party_name . ':</td>
<td width="10px"></td>
<td>' . round((get_votes($party_id,$campaign)/$total_votes)*100, 2) . ' % </td>
</tr>';
}
}
?>
<tr>
<td colspan=3 style="padding-left: 5px; font: 9px Arial float: right">
Stats will update frequently based on the number of supporters!
<br>
Discuss Now: <a href="http://www.facebook.com/topic.php?uid=7160624717&topic=3693">
Who do you think won the debate?</a>
</td>
</tr>
</table>
</div>
</div>
As you can see in the above code, I am DYNAMICALLY updating the content of the FBML page using PHP. This is calculating the total number of votes and the finding out the percentage of support for each party. This is updated for ALL users using my application when you call the REFRESH fbml tag as mentioned in the first index.php code.
fbml_narrow.php
This will be exactly same as the fbml_wide.php but you will reaarange the contents to fit a smaller width table. I am not going to post the code here as this thread has already gotten so long.
So basically I've decided to post my code publicly here so that you can benefit from it. It took me few days to figure this out and I hope you understand the concept now.
