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.howtoforge.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.howtoforge.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:

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

Congratulations, your feed reader is working!