Cheap VPS & Xen Server

Residential Proxy Network - Hourly & Monthly Packages

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


This guide shows how you can build an RSS feed reader application for the social network Facebook that will display your blog’s/web site’s RSS feed on the profile pages of Facebook users (that have installed the RSS feed reader application). Each item of the RSS feed will have a Share button so that people can share the story with their friends, and the application will have an Invite link so that people can invite up to ten friends at once to also install this feed reader application. I will use PHP5 to build the RSS feed reader application. To parse the RSS feed and generate HTML from it, I will use Magpie RSS.

You can see this application in action by installing the Kreationnext RSS Feed Reader for Facebook.

This document comes without warranty of any kind! I do not issue any guarantee that this will work for you!

 

1 Preliminary Note

This guide is based on a real-world example, the Kreationnext RSS Feed Reader for Facebook, and I will use the real URLs and scripts in this example (only replacing secret data like the API key and the Secret).

As I mentioned before, I’m using PHP5 to build this application, using Facebook’s PHP Client Library. Theoretically you can use PHP4 as well, but the client platform is optimized for PHP5, so you should use that if possible.

I’m using the host fb.Kreationnext.com in this example to host the application; it is a PHP5 capable web site.

Before you can start writing your own Facebook application, you must register on Facebook (if you don’t have an account yet) and add the Facebook Developer Application to your account, as described on http://developers.facebook.com/get_started.php:

1

Afterwards, you should start with these examples to get used to creating Facebook apps. However, I will use these examples in this tutorial again (at the beginning) to make sure that everything is working as expected before I try to write my own stuff.

 

2 Set Up A New Application

Before we start programming our application, we must tell Facebook about it, and Facebook will then give us an API Key and a Secret which we need to build the application.

Now that you’ve added the Facebook Developer Application to your account, go to your Facebook page – you should now see the Developer app in the left navigation. Click on it. The Developer page opens, where you click on the + Set Up New Application button (near the upper right corner):

2

Now we’re on the New Application page. I want to name my app Kreationnext RSS Feed Reader, so I fill this in as Application Name. I check the checkbox below this field to show that I agree to the terms of the Facebook platform. Then I fill in a support email address (should be an address where you or your fellow developers can be contacted). The Callback URL is the location where the app will be hosted. Mine will be hosted under http://fb.Kreationnext.com/fb/htf_feed_reader/, so I fill that in. The Canvas Page URL is the Facebook address you’d like your app to have. Fill in your desired address (e.g. http://apps.facebook.com/htf_feed_reader), and the form will then tell you if the address is still available or not. Then select Use FBML and Website (both should already be the default selection):

3

One important note regarding the Callback URL: It is absolutely important that the URL ends with a slash (/); if it doesn’t, people will later on get the famous The URL … did not respond. error whenever they visit your app in their accounts, like this:

21

Next, still on the New Application page, fill in the other options. Answer Can your application be added on Facebook? with Yes. You can leave the TOS URL field empty if you don’t have any terms of service. Add additional developers if there are any. As Post-Add URL, you use the Canvas Page URL (http://apps.facebook.com/htf_feed_reader in my case). Fill in a description for your application. The Post-Remove URL can be left empty as well. In the Default FBML field, you can enter some text that you would like to appear on the user profiles if your app doesn’t deliver content for the profile page. Then select in which profile column you’d like your content to appear. As there’s lots of text in RSS feeds, the wide column is a good choice in our case:

4

Further down on the New Application page, there’s just on other field we must fill out, the Side Nav URL. Again, this is the same as the Canvas Page URL (http://apps.facebook.com/htf_feed_reader in my case). All other fields can be left empty. Click on Submit afterwards:

5

You should now be on the My Applications page where you can find the API Key and the Secret for your app. Copy them, we’ll need them for our app later on.

6

Further down on the My Applications page, you will see a link to the PHP (4 and 5) Client Library:

7

3 Set Up The PHP5 Client Library

We will now download the PHP Client Library to the directory on our web site where our feed reader app will be located (e.g. http://fb.Kreationnext.com/fb/htf_feed_reader/). In this example I’m assuming that fb.Kreationnext.com‘s document root is /var/www (adjust the following commands if yours is different). So first we create the directory /var/www/fb/htf_feed_reader:

mkdir -p /var/www/fb/htf_feed_reader

Then we download the PHP Client Library to it and unpack it:

cd /var/www/fb/htf_feed_reader
wget http://developers.facebook.com/clientlibs/facebook-platform.tar.gz
tar zxvf facebook-platform.tar.gz

This creates the directory facebook-platform/ with the subdirectory client/ which contains the client libraries for PHP 5 (facebook.php and facebookapi_php5_restlib.php). We copy these two files to /var/www/fb/htf_feed_reader and delete facebook-platform.tar.gz and facebook-platform:

cp facebook-platform/client/facebook.php .
cp facebook-platform/client/facebookapi_php5_restlib.php .
rm -rf facebook-platform.tar.gz facebook-platform

 

4 Our First Simple Application

Now we can write our first, very simple app. First, we create the file appinclude.php which contains some basic settings such as the API Key, the Secret, and the Callback URL, and which we will include in all files of our app:

vi /var/www/fb/htf_feed_reader/appinclude.php

<?php
require_once 'facebook.php';

$appapikey = 'YOUR_API_KEY';
$appsecret = 'YOUR_SECRET';
$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();

//[todo: change the following url to your callback url]
$appcallbackurl = 'http://fb.Kreationnext.com/fb/htf_feed_reader/';

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
  if (!$facebook->api_client->users_isAppAdded()) {
    $facebook->redirect($facebook->get_add_url());
  }
} catch (Exception $ex) {
  //this will clear cookies for your application and redirect them to a login prompt
  $facebook->set_user(null, null);
  $facebook->redirect($appcallbackurl);
}
?>

Then we create index.php, the file that will be executed when the callback URL (http://apps.facebook.com/htf_feed_reader) is called. In this simple example, it will just print something like hello plus the Facebook user ID:

vi /var/www/fb/htf_feed_reader/index.php

<?php
require_once 'appinclude.php';

echo "<p>hello $user</p>";
?>

Now open a browser and type in either the callback URL (http://fb.Kreationnext.com/fb/htf_feed_reader) or the canvas URL (http://apps.facebook.com/htf_feed_reader) of your application. Either way, you should be redirected to a page like this:

8

Click on the Log in to Kreationnext RSS Feed Reader button. On the next page, leave all checkboxes checked and click on Add Kreationnext RSS Feed Reader to install this application in your account:

9

When an app is installed, the first thing that happens is that the callback URL (http://fb.Kreationnext.com/fb/htf_feed_reader) is called, so you should expect to see something like hello <userid>. And really, it happens, which means that our setup is working:

10

On your profile page, you should now find the Kreationnext RSS Feed Reader in the wide column (displaying the default FBML that we specified when we set up the application on Facebook – our simple app doesn’t produce its own FBML yet) as well as a menu entry for it in the left navigation:

11

Now let’s modify index.php a little bit and add an input field where you can enter text that will then be displayed on the profile page instead of the default FBML:

vi /var/www/fb/htf_feed_reader/index.php

<?php
require_once 'appinclude.php';

echo "<p>hello $user</p>";

if (isset($_REQUEST['profiletext'])) {
  $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user);
  $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo '<form action="" method="get">';
echo '<input name="profiletext" type="text" size="30" value=""><br>';
echo '<input name="submit" type="submit" value="Display text on profile">';
echo '</form>';
?>

As you see, the FBML on the profile page can be changed with the function $facebook->api_client->profile_setFBML().

Now go to your application’s canvas page again (http://apps.facebook.com/htf_feed_reader in my case). You should now see a text box below the hello … line:

12

Enter some text and click on the Display text on profile button:

13

Then go to your profile page again. You should now find the text there that you’ve entered in the text box:

14

In the next example we use mock-AJAX to dynamically update the contents of the canvas page and the profile:

vi /var/www/fb/htf_feed_reader/index.php

<?php
if (isset($_REQUEST['mockfbmltext'])) {
  echo $_REQUEST['mockfbmltext'];
  exit;
}

require_once 'appinclude.php';

echo "<p>hello $user</p>";

$fbml = <<<EndHereDoc
<fb:subtitle>This is the subtitle</fb:subtitle>

<form>
<input name="mockfbmltext" type="text" size="30">
<br />
<input type="submit"
  clickrewriteurl="$appcallbackurl"
  clickrewriteid="preview" value="Draw text below"
/>
<br />
<div id="preview" style="border-style: solid; border-color: black;
  border-width: 1px; padding: 5px;">
</div>
</form>
EndHereDoc;

$facebook->api_client->profile_setFBML($fbml, $user);

echo "<p>the following form was added to the profile box:</p>";

echo $fbml;
?>

On the canvas page, you should now see the new text box:

15

Type some text in and hit the Draw text below button…

16

…and the text should immediately appear below the button:

17

The same functionality is now available on the profile page:

18

5 Build The Feed Reader

Now that you’ve gained a small insight into how Facebook applications work, we can start to build our RSS Feed Reader. First, we need some kind of script that can parse RSS feeds and help us create HTML from it. A great tool to do this is MagpieRSS (written in PHP). Please read this tutorial to learn how MagpieRSS can be used (I won’t go into the details here): Easy RSS Syndication with MagpieRSS

Now let’s download and install MagpieRSS in a subdirectory of our Feed Reader app, /var/www/fb/htf_feed_reader/rss:

mkdir /var/www/fb/htf_feed_reader/rss
cd /var/www/fb/htf_feed_reader/rss
wget http://mesh.dl.sourceforge.net/sourceforge/magpierss/magpierss-0.72.tar.gz
tar xvfz magpierss-0.72.tar.gz
cd magpierss-0.72
cp rss_* ../
cp -fr extlib/ ../
cd ..
rm -fr magpierss-0.72*

Next, we create a cache directory (where MagpieRSS can cache the feed if you want to use this feature) called magpie_cache and make it world-writable so that the Apache user (or the user running the PHP scripts if you use suPHP) can write to it:

cd /var/www/fb/htf_feed_reader
mkdir magpie_cache
chmod 777 magpie_cache

Now let’s integrate MagpieRSS into our index.php script (take a look at Easy RSS Syndication with MagpieRSS for an easy feed reader – the following script already uses RSS caching and CSS styling):

vi /var/www/fb/htf_feed_reader/index.php

<?php
define('MAGPIE_CACHE_DIR', './magpie_cache');
define('MAGPIE_CACHE_ON', 1);
define('MAGPIE_CACHE_AGE', 600);

require_once('appinclude.php');

require_once('rss/rss_fetch.inc');
$rss = @fetch_rss('http://www.Kreationnext.com/node/feed');

$fbml = '<div style="margin:0 10px 0 10px;">';
$fbml .= '<table border="0" width="100%" style="margin: 5px 5px 5px 5px;"><tr><td valign="top" width="80%"><a href="'.$rss->channel['link'].'" style="font-weight: bold;">'.$rss->channel['title'].'</a></td><td valign="top" width="80%"><fb:share-button class="meta">
  <meta name="medium" content="blog"/>
  <meta name="title" content="'.htmlspecialchars(strip_tags($rss->channel['title'])).'"/>
  <meta name="description" content="'.htmlspecialchars(strip_tags($rss->channel['description'])).'"/>
  <link rel="target_url" href="'.$rss->channel['link'].'"/>
</fb:share-button></td></tr></table>';


foreach ($rss->items as $item) {
        $fbml .= '<div style="border-bottom: 2px solid #CCCCCC; padding-bottom:5px;"><br><div style="border-bottom: 1px dotted #CCCCCC; border-top: 1px dotted #CCCCCC;"><table border="0" width="100%" style="margin: 5px 5px 5px 5px;"><tr><td valign="top" width="80%"><a href="'.$item['link'].'" style="font-weight: bold;">'.$item['title'].'</a></td><td valign="top" width="80%"><fb:share-button class="meta">
  <meta name="medium" content="blog" />
  <meta name="title" content="'.htmlspecialchars(strip_tags($item['title'])).'" />
  <meta name="description" content="'.htmlspecialchars(strip_tags($item['description'])).'" />
  <link rel="target_url" href="'.$item['link'].'" />
</fb:share-button></td></tr></table></div>';
        if($item['description']) $fbml .= $item['description'];
        $fbml .= '</div>';
}
$fbml .= '</div>';

$facebook->api_client->profile_setFBML($fbml, $user);
echo $fbml;
?>

Please replace the URL in $rss = @fetch_rss(‘http://www.Kreationnext.com/node/feed’); with your own RSS URL.

As you see, I’m caching the RSS feed here for 10 minutes (600 seconds). If you don’t like caching, you can change define(‘MAGPIE_CACHE_ON’, 1); to define(‘MAGPIE_CACHE_ON’, 0);.

I’m also using an interesting FBML feature here, the Share button. Using the <fb:share-button> syntax, you can place Share buttons next to single items of our feed and allow Facebook users to tell their friends about something interesting they’ve found in your feed. Take a look here to learn more about the Share button:

http://wiki.developers.facebook.com/index.php/Fb:share-button

Now let’s visit our application’s canvas page again. If you’ve done nothing wrong, you should now see your RSS feed:

22

Go to your profile, and you should see the RSS feed there as well:

23

Congratulations, your feed reader is working!

6 Fine-Tune The Feed Reader

We can now fine-tune the appearance of our RSS feed a little bit, for example we can add a title to it using the <fb:header> tag. Edit index.php and replace the $fbml = ‘<div style=”margin:0 10px 0 10px;”>’; line with this line:

vi /var/www/fb/htf_feed_reader/index.php

[...]
$fbml = '<fb:header>Kreationnext RSS Feed Reader</fb:header><div style="margin:0 10px 0 10px;">';
[...]

This is how it will look. Our feed has now a title/header:

25

The same on the profile page:

26

If you don’t want the title to consume that much space, you can disable padding like this:

vi /var/www/fb/htf_feed_reader/index.php

[...]
$fbml = '<fb:header decoration="no_padding">Kreationnext RSS Feed Reader</fb:header><div style="margin:0 10px 0 10px;">';
[...]

This is how it will look:

27

28

If you don’t want the title to consume that much space, you can disable padding like this:

vi /var/www/fb/htf_feed_reader/index.php

[...]
$fbml = '<fb:header decoration="no_padding">Kreationnext RSS Feed Reader</fb:header><div style="margin:0 10px 0 10px;">';
[...]

This is how it will look:

To find out our infinite session key, we create the script get_infinite_key.php, as shown on http://wiki.developers.facebook.com/index.php/Infinite_session_howto:

vi /var/www/fb/htf_feed_reader/get_infinite_key.php

<?php
require_once('appinclude.php');

// force a login page
$facebook->require_frame();
$user = $facebook->require_login();

// Echo the "infinite session key" that everyone keeps talking about.
echo $facebook->api_client->session_key;
?>

Now log out of Facebook in your browser and clear all cookies, or even better, use another browser in which you’ve never visited Facebook before (my default browser is Firefox, so I use SeaMonkey for this), and call that script in your browser (e.g. http://fb.Kreationnext.com/fb/htf_feed_reader/get_infinite_key.php).

You will then be prompted to log in to Facebook. Please make sure that you check the Save my login info to avoid logging in to Facebook again to use this application checkbox:

19

Afterwards, a page should show up showing your application’s infinite session key. Please write it down somewhere:

20

Delete get_infinite_key.php afterwards:

rm -f /var/www/fb/htf_feed_reader/get_infinite_key.php

In the cron job script that I will use here, I will use the function $facebook->api_client->fbml_refreshRefUrl() to call a URL that delivers the HTML/FBML to put on the profile pages. This URL should deliver nothing but the HTML/FBML code; our index.php script delivers HTML/FBML code (for the application’s canvas page in Facebook, using the echo $fbml; line), but it also changes the users’ profiles with the $facebook->api_client->profile_setFBML() function, for which we’d need the user IDs of each user that have installed our app if we used it in our cron job script. We don’t have these user IDs because we don’t track them with our app, and as I said before, we want to use the indirect method to update the profiles.

Therefore I’ll put the code for parsing the RSS and showing the HTML/FBML in a separate script, rss.php, which I will call in both index.php and our cron job script, cronjob.php. Furthermore, I’ll create a configuration file (conf.php) for our app that contains all variable settings and that is included in all other scripts.

So let’s start:

vi /var/www/fb/htf_feed_reader/conf.php

<?php
$appapikey = 'YOUR_API_KEY';
$appsecret = 'YOUR_SECRET';
$infinite_session_key = 'YOUR_INFINITE_SESSION_KEY';

$appcallbackurl = 'http://fb.Kreationnext.com/fb/htf_feed_reader/';

$rss_url = 'http://fb.Kreationnext.com/fb/htf_feed_reader/rss.php';

$feed = 'http://www.Kreationnext.com/node/feed';

$magpie_cache_dir = './magpie_cache';
?>

$feed is the URL of our RSS feed, and $rss_url is the URL of our (yet to be created) rss.php file. Please don’t mix these two up.

Now that we use conf.php, our new appinclude.php looks like this:

vi /var/www/fb/htf_feed_reader/appinclude.php

<?php
include('conf.php');

require_once 'facebook.php';

$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
  if (!$facebook->api_client->users_isAppAdded()) {
      $facebook->redirect($facebook->get_add_url());
  }
} catch (Exception $ex) {
  //this will clear cookies for your application and redirect them to a login prompt
  $facebook->set_user(null, null);
  $facebook->redirect($appcallbackurl);
}
?>

index.php looks like this:

vi /var/www/fb/htf_feed_reader/index.php

<?php
include('conf.php');

require_once('appinclude.php');

include('rss.php');

$facebook->api_client->profile_setFBML('<fb:ref url="'.$rss_url.'"/>', $user);
$facebook->api_client->fbml_refreshRefUrl($rss_url);
?>

rss.php looks like this (I’ve switched off the RSS cache for MagpieRSS here, but you can turn it on, if you like):

vi /var/www/fb/htf_feed_reader/rss.php

<?php
include('conf.php');
//define('MAGPIE_CACHE_DIR', $magpie_cache_dir);
define('MAGPIE_CACHE_ON', 0);
//define('MAGPIE_CACHE_AGE', 600);

require_once('rss/rss_fetch.inc');
$rss = @fetch_rss($feed);

$fbml = '<fb:header decoration="no_padding">Kreationnext RSS Feed Reader</fb:header><div style="margin:0 10px 0 10px;">';
$fbml .= '<table border="0" width="100%" style="margin: 5px 5px 5px 5px;"><tr><td valign="top" width="80%"><a href="'.$rss->channel['link'].'" style="font-weight: bold;">'.$rss->channel['title'].'</a></td><td valign="top" width="80%"><fb:share-button class="meta">
  <meta name="medium" content="blog"/>
  <meta name="title" content="'.htmlspecialchars(strip_tags($rss->channel['title'])).'"/>
  <meta name="description" content="'.htmlspecialchars(strip_tags($rss->channel['description'])).'"/>
  <link rel="target_url" href="'.$rss->channel['link'].'"/>
</fb:share-button></td></tr></table>';

foreach ($rss->items as $item) {
        $fbml .= '<div style="border-bottom: 2px solid #CCCCCC; padding-bottom:5px;"><br><div style="border-bottom: 1px dotted #CCCCCC; border-top: 1px dotted #CCCCCC;"><table border="0" width="100%" style="margin: 5px 5px 5px 5px;"><tr><td valign="top" width="80%"><a href="'.$item['link'].'" style="font-weight: bold;">'.$item['title'].'</a></td><td valign="top" width="80%"><fb:share-button class="meta">
  <meta name="medium" content="blog" />
  <meta name="title" content="'.htmlspecialchars(strip_tags($item['title'])).'" />
  <meta name="description" content="'.htmlspecialchars(strip_tags($item['description'])).'" />
  <link rel="target_url" href="'.$item['link'].'" />
</fb:share-button></td></tr></table></div>';
        if($item['description']) $fbml .= $item['description'];
        $fbml .= '</div>';
}
$fbml .= '</div>';

echo $fbml;

?>

And finally, cronjob.php looks like this:

vi /var/www/fb/htf_feed_reader/cronjob.php

<?php
include('conf.php');

require_once 'facebook.php';

$facebook = new Facebook($appapikey, $appsecret);

$facebook->api_client->session_key = $infinite_session_key;

// Now you can update FBML pages, update your fb:ref tags, etc.
$facebook->api_client->fbml_refreshRefUrl($rss_url);
?>

Now you can directly call cronjob.php in your browser (e.g. http://fb.Kreationnext.com/fb/htf_feed_reader/cronjob.php) to test if your RSS feed gets updated on your Facebook profile (of course, your RSS feed must be different than before…).

If everything is working as expected, you can create a cron job that calls cronjob.php every 30 minutes (or as often as you like):

crontab -e

0,30 * * * * /usr/bin/wget -O /dev/null http://fb.Kreationnext.com/fb/htf_feed_reader/cronjob.php &> /dev/null

From now on, the profiles of the Facebook users that have installed your RSS reader application will be updated automatically.

8 Provide An Icon For Your Application

To provide an icon (16 x 16px, will be resized if larger; format: gif, png, jpg) for your application, go to the My Applications page within the Developer application and click on Edit Settings:

6

Afterwards, scroll down to where it says Icon and click on the Change your icon link:

29

Select your icon from your hard drive, confirm that you have the right to distribute the icon and that it is not pornography, and click on Upload Image:

30

Afterwards, you should see your new icon on the settings page of your application. Scroll down to the bottom of the page and click on Save:

32

Afterwards, you will find your new icon next to anything that has to do with your app:

33

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, 'Kreationnext RSS Feed Reader', '<fb:name uid="'.$user.'" firstnameonly="true" /> wants you to check out this Kreationnext feed about the newest Linux tutorials!<fb:req-choice url="'.$facebook->get_add_url().'" label="Go for it" />', 'http://fb.Kreationnext.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 Kreationnext RSS Feed Reader.
</fb:success>
<?php
}
else {
  // Render the friend selector in an iframe.
?>
<div style="padding: 20px;">
<h1>Invite your friends to the Kreationnext RSS Feed Reader!</h1>
<p>Invite your friends here (max 10 per day).</p>
  <fb:iframe src="http://fb.Kreationnext.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.Kreationnext.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.Kreationnext.com/fb/htf_feed_reader/invite.php.

Now go to your application’s canvas page in Facebook. You should see an Invite tab there:

36

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:

37

On the next page you see the message that will be sent to your friends. Click on Send it:

38

If nothing goes wrong, you will see a confirmation that an invitation for the application has been sent to the selected friends:

39

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 Kreationnext rss feed invitation):

40

When they click on the link, they’ll see the invitation. To accept and install it, they must simply click on Go for it:

41

They’ll be redirected to the normal Facebook application installation page where they can finally install the application:

42

10 Submit The Application To The Application Directory

If your application has gained five or more users, you can submit it to Facebook’s Application Directory where every Facebook user can find and install it.

Go to the My Applications page within the Facebook Developer application and click on Submit Application >>:

34

Fill out the following form, upload a 75 x 75px logo for your application (do not mix this up with the application’s icon), and click on Save:

35

  • Kreationnext RSS Feed Reader: http://apps.facebook.com/htf_feed_reader
  • Facebook: http://www.facebook.com
  • Facebook Developers Page: http://developers.facebook.com
  • Facebook Developers Wiki: http://wiki.developers.facebook.com/index.php
  • MagpieRSS: http://magpierss.sourceforge.net
  • Easy RSS Syndication with MagpieRSS: http://www.Kreationnext.com/rss_syndication_magpieRSS
  • PHP: http://www.php.net

 

 

Comments

comments