Wie erstelle ich einen Facebook RSS Feed Reader für meinen Blog

Version 1.0
Author: Falko Timme


Diese Anleitung veranschaulicht, wie man einen RSS Feed Reader für das soziele Netzwerk Facebook erstellt, der Deinen Blog's/Web Site's RSS Feed auf den Profilseiten der Facebook Benutzer (die den RSS Feed Reader installiert haben) anzeigt. Jedes Item des RSS Feeds hat ein Share Feld, damit man die Story mit seinen Freunden teilen kann. Außerdem wird die Anwendung einen Invite Link haben, damit man bis zu 10 Leute zur gleichen Zeit einladen kann um den Feed Reader ebenfalls zu installieren. Ich werde PHP5 verwenden um den RSS Feed Reader zu bauen. Um den RSS Feed zu parsen und HTML zu generieren, verwende ich Magpie RSS.

Du siehst diese Anwendung in Aktion wenn Du den HowtoForge RSS Feed Reader für Facebook installierst.

Diese Anleitung ist ohne jegliche Gewähr! Ich übernehme keine Garantie, dass dies auch bei Dir funktioniert!

1 Vorbemerkung

Diese Anleitung basiert auf einem wirklichen Beispiel, dem HowtoForge RSS Feed Reader für Facebook, und ich werde die wirklichen URLs und Skripte in diesem Beispiel verwenden (ich ersetze nur vertrauliche Daten wie den API Key und das Passwort).

Wie bereits erwähnt verwende ich PHP5 um diese Anwendung zu bauen, unter Verwendung von Facebooks PHP Client Library. Du kannst theoretisch auch PHP4 verwenden, jedoch ist die Client Platform für PHP5 optimiert, also solltest Du lieber das nach Möglichkeit verwenden.

Ich verwende in diesem Beispiel den Host fb.howtoforge.com um die Anwendung zu hosten; es ist eine PHP5-fähige Website.

Bevor Du Deine eigene Facebook Anwendung schreiben kannst, musst Du Dich auf Facebook (wenn Du noch kein Konto haben solltest) anmelden und die Facebook Developer Application Deinem Konto hinzufügen, was hier beschrieben wird: http://developers.facebook.com/get_started.php:


Danach solltest Du mit diesen Beispielen beginnen um Dich mit dem Erstellen von Facebook Apps vertraut zu machen. Ich werde diese Beispiele am Anfang dieser Anleitung wieder verwenden um sicher zu gehen, dass alles wie erwartet funktioniert, bevor ich versuche, meine eigenen Sachen zu schreiben.

2 Eine neue Anwendung einrichten

Bevor wir eine neue Anwendung programmieren, müssen wir Facebook über unsere Absichten informieren. Facebook stellt uns dann einen API Key und ein Passwort zur Verfügung, das wir benötigen, um die Anwendung zu erstellen.

Da Du nun die Facebook Developer Application Deinem Konto hinzugefügt hast, gehe auf Deine Facebook Seite - in der linken Navigation solltest Du die Developer App nun sehen. Klicke darauf. Die Developer Seite öffnet sich, auf der Du auf das  + Set Up New Application Feld klickst (rechts oben):


Nun befinden wir uns auf der New Application Seite. Ich möchte, dass meine App "HowtoForge RSS Feed Reader" heißt, also gebe ich das als "Application Name" ein. Ich stimme den Bedingungen der Facebook Platform zu, als mariere ich das Ankreuzfeld unter dem Namensfeld. Dann gebe ich eine Support E-Mail Adresse ein (es sollte eine Adresse sein, mit der Du oder Deine Co-Developer kontaktiert werden können). Die "Callback URL" ist der Ort, an dem die App gehostet wird. Meine wird unter http://fb.howtoforge.com/fb/htf_feed_reader/ gehostet, also gebe ich das ein. Die "Canvas Page URL" ist die Facebook Adresse, die Deine App haben soll. Gib eine Adresse Deiner Wahl ein (z.B. http://apps.facebook.com/htf_feed_reader) und Dir wird mitgeteilt, ob die Adresse noch frei ist. Wähle dann "Use FBML" und "Website" (beides sollte bereits ausgewählt sein):



Eine wichtige Notiz bezüglich der "Callback URL": Es ist extrem wichtig, dass die URL mit einem Slash (/) endet; wenn nicht, erhalten die Leute später einen "The URL ... did not respond" Fehler, wenn sie Deine App in ihren Konten besuchen:
Immer noch auf der New Application Seite, gib als Nächstes die anderen Optionen ein. Beantworte die Frage "Can your application be added on Facebook?" mit "Yes". Das "TOS URL" Feld kannst Du frei lassen, wenn Du keine Bedingungen des Dienstes hast. Füge weitere Developer hinzu, wenn es welche geben sollte. Als "Post-Add URL" verwendest Du die Canvas Page URL (http://apps.facebook.com/htf_feed_reader in meinem Fall). Gib für Deine Anwendung eine Beschreibung ein. Die "Post-Remove URL" kann auch frei gelassen werden. Im "Default FBML" Feld kannst Du einen Text eingeben, der auf den Profilen der Benutzer erscheinen soll, wenn Deine App keinen Inhalt für die Profil-Seite liefert. Wähle dann aus, ich welcher Spalte Dein Inhalt erscheinen soll. Da es im RSS Feed eine Menge Text gibt, ist die breite Spalte "wide" in unserem Fall eine gute Wahl:Weiter unten auf der New Application Seite gibt es noch ein Feld, das wir ausfüllen müssen, die "Side Nav URL". Das ist das gleiche wie die "Canvas Page URL" (http://apps.facebook.com/htf_feed_reader in meinem Fall). Alle anderen Felder können frei gelassen werden. Klicke danach auf "Submit":
Nun solltest Du Dich auf der "My Applications" Seite befinden, auf der Du den API Key und das Passwort für Deine App findest. Kopiere beide, wir brauchen sie später für unsere App.


Weiter unten auf der "My Applications" Seite siehst Du einen Link zur PHP (4 und 5) Client Library:


3 Die PHP5 Client Library aufsetzen

Nun laden wir die PHP Client Library in das Verzeichnis unserer Website, in dem sich unsere Feed Reader App befinden wird (z.B. http://fb.howtoforge.com/fb/htf_feed_reader/). In diesem Beispiel gehe ich davon aus, dass der Dokumenten-Root von  fb.howtoforge.com  /var/www  ist (passe folgende Befehle an, wenn Du einen anderen hast). Also erstellen wir zuerst das Verzeichnis /var/www/fb/htf_feed_reader:

mkdir -p /var/www/fb/htf_feed_reader

Dann laden wir die PHP Client Library in das Verzeichnis und entpacken sie:

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

Damit wird das Verzeichnis Facebook-platform/ mit dem Unterverzeichnis  client/ erstellt, das die Client Libraries für PHP 5 (facebook.php und facebookapi_php5_restlib.php) enthält. Wir kopieren diese beiden Dateien nach /var/www/fb/htf_feed_reader und löschen facebook-platform.tar.gz sowie 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 Unsere erste einfache Anwendung

Nun können wir unsere erste, sehr einfache App schreiben. Zunächst erstellen wir die Datei appinclude.php, die einige Grundeinstellungen wie den API Key, das Passwort und die Callback URL beinhaltet und die wir in jede Datei unserer App einschließen:

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.howtoforge.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); } ?>
Dann erstellen wir index.php, die Datei, die ausgeführt wird, wenn die callback URL (http://apps.facebook.com/htf_feed_reader) aufgerufen wird. In diesem einfachen Beispiel zeigt sie nur etwas wie "hello" an, plus die Facebook Benutzer ID:

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


<?php
require_once 'appinclude.php'; echo "<p>hello $user</p>"; ?>
Öffne jetzt einen Browser und gib entweder die callback URL (http://fb.howtoforge.com/fb/htf_feed_reader) oder die canvas URL (http://apps.facebook.com/htf_feed_reader) Deiner Anwendung ein. Unabhängig von dem, was Du eingibst, solltest Du wie folgt zu einer Seite weitergeleitet werden:


Klicke auf das "Log in to HowtoForge RSS Feed Reader" Feld. Ändere auf der nächsten Seite nichts an den Markierungen und klicke auf das "Add HowtoForge RSS Feed Reader" Feld um diese Anwendung in Deinem Konto zu installieren:


Wenn eine App installiert wird, wird zuerst die callback URL (http://fb.howtoforge.com/fb/htf_feed_reader) aufgerufen. Also solltest Du etwas wie "hello <userid>" sehen können, was tatsächlich der Fall ist und bedeutet, dass unser Setup funktioniert:


Auf Deiner Profil-Seite solltest Du nun das "HowtoForge RSS Feed Reader" Feld in der breiten Spalte sehen (das die Standard-FBML anzeigt, die wir festgelegt haben, als wir die Anwendung auf Facebook eingerichtet haben - unsere einfache App erzeugt noch keine eigene FBML) sowie einen Menüeintrag in der linken Navigation:


Lass uns nun index.php ein bisschen modifizieren und ein Eingabe-Feld hinzufügen, in das Du einen Text eingeben kannst, der dann auf der Profil-Seite anstelle der Standard-FBML auftaucht:

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>'; ?>
Wie Du siehst kann die FBML auf der Profil-Seite mit der Funktion $facebook->api_client->profile_setFBML() geändert werden.
Gehe nun wieder zur Canvas Seite Deiner Anwendung (http://apps.facebook.com/htf_feed_reader in meinem Fall). Unter der "hello" Zeile solltest Du nun eine Text-Box sehen:


Gib einen Text ein und klicke auf das "Display text on profile" Feld:


Gehe dann wieder zu Deiner Profilseite. Nun solltest Du den Text, den Du in die Text-Box eingetragen hast, dort finden:


Im nächsten Beispiel verwenden wir mock-AJAX um die Inhalte der Canvas Seite und das Profil zu aktualisieren:

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; ?>
Auf der Canvas Seite solltest Du nun die neue Text-Box sehen:



Gib einen Text ein und klicke auf das "Draw text below" Feld...


...und der Text sollte sofort unter dem Feld erscheinen:


Die gleiche Funktionalität ist nun auch auf der Profil-Seite verfügbar:

5 Den Feed Reader erstellen

Da Du nun einen kleinen Einblick in die Funktionsweise von Facebook Anwendungen gewonnen hast, können wir unseren RSS Feed Reader erstellen. Zuerst benötigen wir eine Art Skript, das RSS Feeds parsen kann und uns hilft, daraus HTML zu erstellen. MagpieRSS ist dafür am Besten geeignet (in PHP geschrieben). Bitte sieh Dir diese Anleitung an um zu erfahren, wie MagpieRSS verwendet wird (ich werde hier nicht ins Detail gehen): Easy RSS Syndication with MagpieRSS
Lass uns nun MagpieRSS in ein Unterverzeichnis unserer Feed Reader App, /var/www/fb/htf_feed_reader/rss, runter laden und installieren:

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*

Als Nächstes erstellen wir ein Cache Verzeichnis (in dem MagpieRSS den Feed cachen kann, wenn Du diese Funktion nutzen möchtest) namens magpie_cache und räumen allen Benutzern Schreibrechte ein, damit der Apache Benutzer (oder der Benutzer, der PHP Skripte ausführt, wenn Du suPHP verwendest) darin schreiben kann:

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

Nun integrieren wir MagpieRSS in unser index.php Skript (sieh Dir Easy RSS Syndication with MagpieRSS an, - das folgende Skript verwendet bereits RSS Caching und 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; ?>
Bitte ersetze die URL in $rss = @fetch_rss('http://www.howtoforge.com/node/feed'); mit Deiner eigenen RSS URL.

Wie Du siehst, cache ich den RSS Feed hier für 10 Minuten (600 Sekunden). Wenn Du Caching nicht magst, kannst Du define('MAGPIE_CACHE_ON', 1); zu define('MAGPIE_CACHE_ON', 0); ändern.

Außerdem verwende ich hier eine interessante FBML Funktion, das "Share" Feld. Unter Verwendung des <fb:share-button> Syntax kannst Du "Share" Felder neben einzelnen Items Deines Feeds anbringen und Facebook Benutzern erlauben, ihren Freunden mitzuteilen, dass sie etwas Interessantes in Deinem Feed gefunden haben. Sieh Dir Folgendes an um mehr über das "Share" Feld zu erfahren:

http://wiki.developers.facebook.com/index.php/Fb:share-button
Nun besuchen wir wieder die Canvas Seite unserer Anwendung. Wenn Du alles richtig gemacht hast, solltest Du nun Deinen RSS Feed sehen:


Gehe zu Deinem Profil. Auch dort solltest Du den RSS Feed sehen:


Glückwunsch, Dein Feed Reader funktioniert!

6 Den Feed Reader abstimmen

Nun können wir den Auftritt unseres RSS Feeds ein wenig abstimmen. Zum Beispiel können wir einen Titel hinzufügen indem wir den <fb:header>tag verwenden. Bearbeite index.php und ersetze die $fbml = '<div style="margin:0 10px 0 10px;">'; Zeile mit dieser Zeile:

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


[...]
$fbml = '<fb:header>HowtoForge RSS Feed Reader</fb:header><div style="margin:0 10px 0 10px;">'; [...]
So wird es aussehen. Unser Feed hat nun einen Titel/eine Überschrift:


Das Gleiche auf der Profil-Seite:


Wenn Du nicht möchtest, dass der Titel so viel Platz benötigt, kannst Du padding wie folgt deaktivieren:

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


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



7 Den RSS Feed automatisch im Profil aktualisieren

Du wirst vielleicht schon festgestellt haben, dass der RSS Feed im Profil nur aktualisiert wird, wenn Du die Canvas Seite Deiner Anwendung in Facebook besuchst. Das stellt ein Problem dar, da sich die Leute die meiste Zeit auf der Profil-Seite aufhalten. Um den RSS Feed auf der Profil-Seite automatisch zu aktualisieren, müssen wir einen Cron Job dafür auf unserem Server anlegen, der den RSS Feed auf den Facebook Profilen automatisch aktualisiert.

Es gibt zwei verschieden Möglichkeiten Profile zu aktualisieren: direkt und indirekt (siehe http://wiki.developers.facebook.com/index.php/Changing_profile_content). Wenn Dein Inhalt für jeden Benutzer individuell ist, musst Du die direkte Methode verwenden. Ist er für alle Bentuzer gleich, ist es viel einfacher, die indirekte Methode zu verwenden. Da unser RSS Feed für alle Benutzer gleich ist, verwenden wir die indirekte Methode, für die wir einen unbeschränkten Session Key für unsere Anwendung brauchen, damit sich der Cron Job zu jeder Zeit bei Facebook anmelden kann.

Um unseren unbeschränkten Session Key herauszufinden, erstellen wir das Skript get_infinite_key.php, wie auf http://wiki.developers.facebook.com/index.php/Infinite_session_howto gezeigt wird:

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; ?>
Melde Dich nun in Deinem Browser in Facebook ab und lösche alle Cookies oder noch besser, verwende einen anderen Browser mit dem Du noch nie auf Facebook warst (mein Standard Browser ist Firefox, slso verwende ich dafür SeaMonkey) und rufe dieses Skript in Deinem Browser auf (z.B. http://fb.howtoforge.com/fb/htf_feed_reader/get_infinite_key.php).

Du wirst dann aufgefordert, Dich bei Facebook anzumelden. Bitte achte darauf, dass Du "Save my login info to avoid logging in to Facebook again to use this application" markierst:


Danach sollte sich eine Seite öffnen, die den unbeschränkten Session Key Deiner Anwendung anzeigt. Schreib ihn bitte irgendwo auf:


Lösche danach  get_infinite_key.php:

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

Im Cron Job Skript, das ich hier verwenden werde, nutze ich die Funktion $facebook->api_client->fbml_refreshRefUrl() um die URL aufzurufen, welche die HTML/FBML Seite für die Profil-Seiten ausliefert. Diese URL sollte nichts anderes als den HTML/FBML Code liefern; unser index.php Skript liefert den HTML/FBML Code (for the application's canvas page in Facebook, using the echo $fbml; line) und ändert außerdem die Profile der Benutzer mit der  $facebook->api_client->profile_setFBML() Funktion. Wenn wir diese Funktion in unserem Cron Job Sript verwenden würden, würden wir die Benutzer ID jedes Bentuzers, der unsere App installiert hat, benötigen. Wir haben diese Benutzer IDs allerdings nicht, da wir sie mit unserer App nicht verfolgen und wie bereits erwähnt möchten wir die indirekte Methode verwenden um die Profile zu aktualisieren.

Daher setze ich den Code zum Parsen von RSS und Anzeigen der HTML/FBML in ein separates Skript, rss.php, das ich im index.php und unserem Cron Job Skript, cronjob.php, aufrufen werde. Ich werde außerdem eine Konfigurationsdatei (conf.php) für unsere App erstellen, die alle variablen Einstellungen beinhaltet und die in allen anderen Skripten enthalten ist.

Also lass uns anfangen:

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.howtoforge.com/fb/htf_feed_reader/'; $rss_url = 'http://fb.howtoforge.com/fb/htf_feed_reader/rss.php'; $feed = 'http://www.howtoforge.com/node/feed'; $magpie_cache_dir = './magpie_cache'; ?>
$feed ist die URL unseres RSS Feeds und $rss_url ist die URL unserer rss.php Datei (die noch erstellt werden muss). Bitte verwechsle diese beiden nicht.

Da wir nun conf.php verwenden, sieht unsere neue appinclude.php wie folgt aus:

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 sieht wie folgt aus:

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 sieht wie folgt aus (ich habe den RSS Cache für MagpieRSS hier  ausgeschaltet, Du kannst ihn aber anschalten, wenn Du magst):

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">HowtoForge 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; ?>
cronjob.php sieht wie folgt aus:

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); ?>
Nun kannst Du cronjob.php direkt in Deinem Browser öffnen (z.B. http://fb.howtoforge.com/fb/htf_feed_reader/cronjob.php) um zu überprüfen, ob Dein RSS Feed auf Deinem Facebook Profile aktualisiert wird (natürlich muss Dein RSS Feed anders als zuvor sein...).

Wenn alles wie erwartet funktioniert, kannst Du einen Cron Job anlgegen, der cronjob.php alle 30 Minuten (oder so oft wie Du magst) aufruft:

crontab -e


0,30 * * * * /usr/bin/wget -O /dev/null http://fb.howtoforge.com/fb/htf_feed_reader/cronjob.php &> /dev/null
Von nun an werden die Profile der Facebook Benutzer, die Deine RSS Reader Anwendung installiert haben, automatisch aktualisiert.

8 Ein Symbol für Deine Anwendung erstellen

Um ein Symbol (16 x 16px, die Größe wird angepasst wenn es größer sein sollte; Format: gif, png, jpg) für Deine Anwendung zu erstellen, gehe zur "My Applications" Seite in der Developer Application und klicke auf "Edit Settings":


Scrolle danach etwas runter, dorthin wo von "Icon" die Rede ist und klicke auf den "Change your icon" Link:


Wähle Dein Symbol von Deiner Festplatte aus, bestätige, dass Du das Recht hast, das Symbol zu verbreiten und dass es sich nicht um Pornographie handelt und klicke auf "Upload Image":


Danach solltest Du Dein neues Symbol auf der Settings Seite Deiner Anwendung sehen können. Scrolle bis ans Ende der Seite und klicke auf "Save":


Danach findest Du Dein neues Symbol neben allem, was mit Deiner Anwendung zu tun hat:


9 Eine Einladungs-Seite erstellen

In diesem Kapitel erstelle ich eine Einladungsfunktion, die es den Benutzern Deiner Anwendung erlaubt, bis zu 10 Freunde auf einmal einzuladen, Deine App ebenfalls zu installieren. Die Vorgehensweise wird hier beschrieben: http://wiki.developers.facebook.com/index.php/Invite_Page, ich werde jedoch den Code für unsere Anwendung anpassen:

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 } ?>
Nun müssen wir index.php modifizieren um eine Einladungs-Registerkarte auf unserer Anwendungsseite in Facebook beizufügen, die mit unserer invite.php vernetzt ist:

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); ?>
Mit <fb:tabs> und <fb:tab-item> können wir Registerkarten auf der Canvas Seite unserer Anwendung definieren. Bitte beachte, dass ich mich mit http://apps.facebook.com/htf_feed_reader/invite.php verlinke, obwohl sich meine invite.php auf http://fb.howtoforge.com/fb/htf_feed_reader/invite.php befindet. Wenn Du zu  http://apps.facebook.com/htf_feed_reader/invite.php gehst, wird der Inhalt automatisch von  http://fb.howtoforge.com/fb/htf_feed_reader/invite.php geholt.

Gehe nun zu der Canvas Seite Deiner Anwendung in Facebook. Dort solltest Du eine Einladungs-Registerkarte sehen:


Wenn Du darauf klickst öffnet sich eine Seite, auf der Du bis zu 10 Freunde auswählen kannst, die die App noch nicht installiert haben. Klicke danach auf "Invite Friends":


Auf der nächsten Seite siehst Du die Mitteilung, die Deinen Freunden geschickt wird. Klicke auf "Send it":


Wenn alles klappt, siehst Du eine Bestätigung, dass eine Einladung für die Anwendung gesendet wurde:


Wenn sich Deine Freunde in ihr Facebook Konto einloggen, sehen sie, dass eine Einladung zu Deinem RSS Reader auf sie wartet (in der oberen rechten Ecke heißt es "1 howtoforge rss feed invitation"):


Wenn sie auf diesen Link klicken, sehen sie die Einladung. Um diese zu akzeptieren und zu installieren, brauchen sie nur auf "Go for it" zu klicken:


Sie werden zur normalen Facebook Application Installation Seite weitergeleitet, auf der sie die Anwendung schließlich installieren können:

10 Die Anwendung dem Anwendungsverzeichnis hinzufügen

Wenn Deine Anwendung fünf oder mehr Benutzer gewonnen hat, kannst Du sie Facebooks Anwendungsverzeichnis hinzufügen, in dem es jeder Facebook Benutzer finden und installieren kann.

Gehe zur "My Applications" Seite in der Facebook Developer Application und klicke auf "Submit Application >>":


Fülle folgendes Formular aus, lade ein 75 x 75px Logo für Deine Anwendung hoch (verwechsle das nicht mit dem Symbol Deiner Anwendung) und klicke auf "Save":

11 Links