How To Set Up A Facebook RSS Feed Reader Application For Your Blog - Page 7
On this page
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: