9 Create An Invite Page
In this chapter I will create an Invite function that allows users of our app to invite up to ten friends at once to also install our app. The procedure is descibed here: http://wiki.developers.facebook.com/index.php/Invite_Page, but I will adjust the code for our application:
vi /var/www/fb/htf_feed_reader/friendselect.php
<?php
include_once 'conf.php';
require_once('appinclude.php');
// Collect the user's friends
$fql = "SELECT uid, name, has_added_app, pic_small FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=".$user.")";
$friends = $facebook->api_client->fql_query($fql);
?>
<html>
<head>
<script type="text/javascript">
function toggle_box(box_id) {
thebox = document.getElementById('uid'+box_id);
if (thebox.checked == false && thebox.disabled == false) {
thebox.checked = true;
}
else
if (thebox.checked == true) {
thebox.checked = false;
}
disable_extras();
}
function disable_extras() {
var checkboxes = document.getElementsByTagName('input');
num_checked = 0;
for (i=0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked == true) num_checked ++;
}
if (num_checked == 10) {
for (i=0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked == false) checkboxes[i].disabled = true;
}
}
else {
for (i=0; i < checkboxes.length; i++) {
checkboxes[i].disabled = false;
}
}
}
</script>
</head>
<body>
<form action="http://apps.facebook.com/htf_feed_reader/invite.php" method="post" target="_parent">
<div style="width: 500px; height: 300px; overflow: auto; border: #aaaaaa 1px solid;">
<?php
echo '<table style="width: 100%;">';
$count = 0;
for ($i=0; $i < count($friends); $i++) {
// Print out all friends who have not added the application. Check the first 10 friends (checked="checked" until $count reaches 10).
$record = $friends[$i];
if ($record['has_added_app'] != 0) continue;
if ($count%5 == 0) echo '<tr>';
if ($count < 10) {
$checked = ' checked="checked"';
$disabled = '';
}
else {
$checked = '';
$disabled = ' disabled="true"';
}
if ($record['pic_small'] == '') $pic_url = 'http://static.ak.facebook.com/pics/t_default.jpg';
else $pic_url = $record['pic_small'];
echo '<td style="font-family: Arial; font-size: 70%; text-align: center; width: 25%; vertical-align: top; padding: 10px; cursor: pointer;" onclick="toggle_box(\''.$record['uid'].'\');">';
echo '<img src="'.$pic_url.'" /><br /><br />';
echo '<input type="checkbox" id="uid'.$record['uid'].'" name="uid'.$record['uid'].'"'.$disabled.$checked.' style="cursor: pointer;" onclick="toggle_box(\''.$record['uid'].'\');" /> ';
echo $record['name'];
echo '</td>';
if (($count+1)%5 == 0) echo '</tr>';
$count ++;
}
if ($count%5 != 0) echo '</tr>';
echo '</table>';
?>
</div>
<div style="text-align: center; width: 500px; height: 50px; padding: 10px;">
<input type="hidden" name="act" value="invite" />
<input type="submit" value="Invite Friends" style="margin: 2px 4px; background: #3B5998; border: #D9DFEA 1px solid; color: #FFFFFF; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; text-align: center;" />
</div>
</form>
</body>
</html>
|
vi /var/www/fb/htf_feed_reader/invite.php
<?php
include_once 'conf.php';
require_once('appinclude.php');
$facebook->require_frame();
$user = $facebook->require_login();
if ($_POST['act'] == 'invite') {
// Invite the friends that were selected.
$friends = array();
foreach ($_POST as $key => $value) {
if (strpos($key,'uid') == 0 && $value == 'on' && count($friends) < 10) {
$friends[count($friends)] = substr($key,3,strlen($key)-3);
}
}
$tail = '&next=invite.php?total='.count($friends);
$url = $facebook->api_client->notifications_sendRequest($friends, 'HowtoForge RSS Feed Reader', '<fb:name uid="'.$user.'" firstnameonly="true" /> wants you to check out this HowtoForge feed about the newest Linux tutorials!<fb:req-choice url="'.$facebook->get_add_url().'" label="Go for it" />', 'http://fb.howtoforge.com/fb/htf_feed_reader/htf_fb_app_logo_75x75.gif', true);
$facebook->redirect($url.$tail);
exit;
}
if ($_GET['sent'] == 1) {
// Display a message letting the user know invitations have been successfully sent.
?>
<fb:success>
<fb:message>Your invitations have been sent</fb:message>
You have successfully invited <?php echo htmlspecialchars($_GET['total']); ?> of your friends to the HowtoForge RSS Feed Reader.
</fb:success>
<?php
}
else {
// Render the friend selector in an iframe.
?>
<div style="padding: 20px;">
<h1>Invite your friends to the HowtoForge RSS Feed Reader!</h1>
<p>Invite your friends here (max 10 per day).</p>
<fb:iframe src="http://fb.howtoforge.com/fb/htf_feed_reader/friendselect.php?<?php echo time(); ?>" width="575px" height="400px" frameborder="0" />
<div style="clear: both;"/>
</div>
<?php
}
?>
|
Now we must modify index.php in order to include an Invite tab on our application's page within Facebook that links to our invite.php:
vi /var/www/fb/htf_feed_reader/index.php
<?php
include('conf.php');
require_once('appinclude.php');
echo '<div style="padding-top:5px;"><fb:tabs>
<fb:tab-item href="http://apps.facebook.com/htf_feed_reader/invite.php" title="Invite" selected="true"/>
</fb:tabs></div>';
include('rss.php');
$facebook->api_client->profile_setFBML('<fb:ref url="'.$rss_url.'"/>', $user);
$facebook->api_client->fbml_refreshRefUrl($rss_url);
?>
|
With <fb:tabs> and <fb:tab-item> we can define tabs on our application's canvas page. Please note that I'm linking to http://apps.facebook.com/htf_feed_reader/invite.php although my invite.php is located on http://fb.howtoforge.com/fb/htf_feed_reader/invite.php. When you go to http://apps.facebook.com/htf_feed_reader/invite.php, the content will automatically be fetched from http://fb.howtoforge.com/fb/htf_feed_reader/invite.php.
Now go to your application's canvas page in Facebook. You should see an Invite tab there:
When you click on it, a page opens where you can select up to ten of your friends that haven't already installed the app. Click on Invite Friends afterwards:
On the next page you see the message that will be sent to your friends. Click on Send it:
If nothing goes wrong, you will see a confirmation that an invitation for the application has been sent to the selected friends:
When your friends go to their Facebook accounts, they'll see that an invitation to your RSS reader is waiting for them (in the upper right corner it says 1 howtoforge rss feed invitation):
When they click on the link, they'll see the invitation. To accept and install it, they must simply click on Go for it:
They'll be redirected to the normal Facebook application installation page where they can finally install the application: