How To Set Up A Facebook RSS Feed Reader Application For Your Blog - Page 7

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:

Share this page:

1 Comment(s)