Advitum.de auf Google+

Einfache Einbindung des Facebook-Feeds mit PHP

Einfache Einbindung des Facebook-Feeds mit PHP
VN:F [1.9.22_1171]
Bewertung: 3.8/5 (6 Stimmen abgegeben)
Von am
Kategorien: PHP, Programmieren, Tutorials

Oft wollen Kunden auf Ihrer eigenen Webseite auch regelmäßig kurze Neuigkeiten einpflegen. Ein Content Management System ist hier oft schon zu viel des Guten. Ein kleiner Trick, um die News für den Kunden sehr einfach pflegbar zu machen und ganz nebenbei noch dafür zu sorgen, dass die Facebook-Seite auch gefüllt wird: Einfach den Facebook-Feed auf der Webseite anzeigen. Wie das am besten geht, zeige ich euch in diesem Artikel

Einfache Einbindung des Facebook-Feeds mit PHP, 3.8 out of 5 based on 6 ratings

Schritt 1: Download des PHP-SDK von Facebook

Facebook bietet über GitHub ein umfangreiches SDK an, mit dem man unter anderem auch die Graph-API von Facebook sehr einfach nutzen kann. Dieses SDK kann man sich hier herunterladen. Aus der Zip-Datei benötigen wir nur die drei Dateien im Ordner src.

Über die Graph-API von Facebook kann man Beiträge, Fotos und anderes von Facebook abfragen. Allerdings braucht man einen Access-Token. Diesen Token verwaltet das SDK von Facebook ganz automatisch, wir brauchen dafür nur eine App erstellen!

Schritt 2: Erstellen der App

Um an unseren Access-Token zu kommen, erstellen wir im Developer-Center von Facebook eine neue App.

Mit einem Klick auf diesen Button können wir eine neue App erstellen.
Mit einem Klick auf diesen Button können wir eine neue App erstellen.
Wir sollten der App eine Name geben, der mit der Webseite zusammenhängt. Ich verwende hier den Namen "Advitum-Test".
Wir sollten der App eine Name geben, der mit der Webseite zusammenhängt. Ich verwende hier den Namen „Advitum-Test“.
Hier finden wir nun endlich die benötigten Daten.
Hier finden wir nun endlich die benötigten Daten.

Schritt 3: Einbinden des SDK

Nun haben wir alle benötigten Informationen, also können wir das SDK nun in unser Script einbinden. Hier müsst ihr nun natürlich eure Daten aus eurer App einfügen:

require_once('facebook/facebook.php');
$fb = new Facebook(array(
	'appId' => '###############',
	'secret' => '#############################################'
));

Schritt 4: Anfrage an die Graph-API senden

Nun können wir über das Objekt $fb die Graph-API ansprechen.

$url = '/Advitum.de/feed';

$rawFeed = $fb->api($url);

Hier müsst ihr natürlich statt Advitum.de die ID eurer Seite einfügen, von der ihr die Informationen bekommen wollt. Mit /feed sorgen wir außerdem dafür, dass wir die Posts der Seite bekommen. Ansonsten bekämen wir nur die allgemeinen Informationen über die Seite ausgegeben.

Schritt 5: Filtern der Informationen

Nun finden wir in der Variable $rawFeed den Feed der Seite, diesen können wir nun noch etwas Filtern und Verarbeiten. Ich beschränke mich hier nur darauf, jeweils den Text, Link und das Bild des Posts zu übernehmen, man könnte hier jetzt noch viele weitere Dinge tun, wie zum Beispiel nach bestimmten Post-Typen zu filtern o.Ä. Das mache ich hier aber erst einmal nicht.

$feed = array();

foreach($rawFeed['data'] as $item) {
	$title = false;
	if($title === false && isset($item['story']) && !empty($item['story'])) {
		$title = $item['story'];
	}
	if($title === false && isset($item['message']) && !empty($item['message'])) {
		$title = $item['message'];
	}
	
	$image = false;
	if($image === false && isset($item['picture']) && !empty($item['picture'])) {
		$image = $item['picture'];
	}
	
	$link = false;
	if($link === false && isset($item['link']) && !empty($item['link'])) {
		$link = $item['link'];
	}
	
	$feed[] = array(
		'title' => $title,
		'link' => $link,
		'image' => $image
	);
}

Schritt 6: Ausgabe des Feeds

Nun finden wir in der Variable $feed den nach unseren Wünschen gefilerten Feed der Seite. Nun können wir diesen Feed sehr einfach ausgeben:

foreach($feed as $item) {
?>
<figure>
	<?php if($item['link'] !== false) { ?><a href="<?php echo htmlspecialchars($item['link']); ?>"><?php } ?>
	<?php if($item['image'] !== false) { ?><img src="<?php echo htmlspecialchars($item['image']); ?>" alt="" /><?php } ?>
	<?php if($item['title'] !== false) { ?><figcaption><?php echo htmlspecialchars($item['title']); ?></figcaption><?php } ?>
	<?php if($item['link'] !== false) { ?></a><?php } ?>
</figure>
<?php
}

An dieser Stelle sind wir eigendlich fertig, aber es gibt noch einen weiteren kleinen Schritt, den wir vornehmen sollten.

Schritt 7: Caching des Facebook-Feeds

Da sich der Feed nicht sonderlich oft ändert, reicht es, die Abfrage an Facebook in regelmäßigen Abständen auszuführen. Dazu legen wir uns einen neuen Ordner cache an und verändern unseren Code ein wenig, sodass das Ergebnis unserer Abfrage eine Stunde lang gecached wird.

$url = '/Advitum.de/feed';
$cacheName = 'cache/' . md5($url);
$cacheTime = 3600;

if(!is_file($cacheName) || filemtime($cacheName) + $cacheTime < time()) {
	require_once('facebook/facebook.php');
	$fb = new Facebook(array(
		'appId' => '#############',
		'secret' => '###################################'
	));
	
	$rawFeed = $fb->api($url);
	$feed = array();
	
	foreach($rawFeed['data'] as $item) {
		$title = false;
		if($title === false && isset($item['story']) && !empty($item['story'])) {
			$title = $item['story'];
		}
		if($title === false && isset($item['message']) && !empty($item['message'])) {
			$title = $item['message'];
		}
		
		$image = false;
		if($image === false && isset($item['picture']) && !empty($item['picture'])) {
			$image = $item['picture'];
		}
		
		$link = false;
		if($link === false && isset($item['link']) && !empty($item['link'])) {
			$link = $item['link'];
		}
		
		$feed[] = array(
			'title' => $title,
			'link' => $link,
			'image' => $image
		);
	}
	
	file_put_contents($cacheName, json_encode($feed));
} else {
	$feed = json_decode(file_get_contents($cacheName), true);
}

foreach($feed as $item) {
?>
<figure>
	<?php if($item['link'] !== false) { ?><a href="<?php echo htmlspecialchars($item['link']); ?>"><?php } ?>
	<?php if($item['image'] !== false) { ?><img src="<?php echo htmlspecialchars($item['image']); ?>" alt="" /><?php } ?>
	<?php if($item['title'] !== false) { ?><figcaption><?php echo htmlspecialchars($item['title']); ?></figcaption><?php } ?>
	<?php if($item['link'] !== false) { ?></a><?php } ?>
</figure>
<?php
}

Die Funktion filemtime() erweist sich hier als äußerst nützlich, denn sie liefert die Zeit, zu der eine Datei zuletzt modifiziert wurde. In unserem Fall ist dies natürlich die Zeit, zu der der Cache aktualisiert wurde. So können wir als einfach feststellen, wann die Cache-Datei veraltet ist.

Jetzt sind wir aber wirklich fertig und können uns über einen News-Feed auf unserer Webseite freuen.

Ich habe meine Ausgabe noch mit etwas CSS aufgehübscht und bekomme nun dieses Ergebnis.
Ich habe meine Ausgabe noch mit etwas CSS aufgehübscht und bekomme nun dieses Ergebnis.

Wer von euch macht das auch so? Oder ist das jetzt neu für euch? Ich freue mich auf euer Feedback!

Einfache Einbindung des Facebook-Feeds mit PHP, 3.8 out of 5 based on 6 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Markus schrieb am Antworten

Hallo Lars – eine Frage hätte ich: Kann man das script auch so verändern, dass man nur die letzten zwei Posts der Facebook-Seite einbinden, so dass man immer die zwei aktuellesten NAchrichten dort findet?
Ansonsten – Danke für die tolle Anleitung!
M.

    Lars Ebert schrieb am Antworten

    Hallo Markus, du musst an die Request-URL einfach &limit=2 anhängen, dann gibt Facebook nur die zwei letzten Posts zurück.

      Markus schrieb am Antworten

      Hallo Lars – habe erst eben deine Antwort gesehen. Ich bin nicht ganz sicher, wo ich das anhängen soll. Ich bin jetzt nicht so der PHP-Experte, um ganz ehrlich zu sein…
      Grüße
      Markus

        Lars Ebert schrieb am Antworten

        Hallo Markus,

        du kannst den Limit-Parameter einfach an die Query-URL anhängen:

        $url = '/Advitum.de/feed&limit=2';
          Markus schrieb am

          Ah ja. So einfach kann es macnhmal sein. Ich probiert das jetzt mal aus. Danke nochmals.
          M.

Markus schrieb am Antworten

Hallo Lars – ich nochmal. Ich bin mir nicht ganz sicher, was ich mit der facebook.php machen soll. Soll die auf meinem Server liegen…?

Zur Zeit bekommen ich folgende Fehlermeldung:

Fatal error: main() [function.require]: Failed opening required ‚facebook/facebook.php‘ (include_path=‘.:/usr/lib/php‘) in /homepages/2/d132775660/htdocs/index_fbnews.php on line 262

Danke schon jetzt für die Antwort.

Grüße
Markus

    Lars Ebert schrieb am Antworten

    Hallo Markus, die facebook.php kannst du dir von Facebook runterladen im Developer Center. Das heißt da glaub ich Facebook SDK für PHP oder so. Diese Datei (und noch zwei weitere Dateien die dabei sind) müssen auf deinem Server liegen. Der Pfad in der Require-Funktion muss dann eben zur facebook.php zeigen.

    Markus schrieb am Antworten

    Ah das hab ich jetzt. Neues Problem:

    Parse error: syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‚}‘ in /homepages/2/d132775660/htdocs/facebook/facebook.php on line 26

    Irgendwie blick ich nicht durch.
    Grüße
    Markus

      Lars Ebert schrieb am Antworten

      Hallo Markus, ist das die facebook.php die Du von Facebook heruntergeladen hast? Ansonsten poste hier mal die entsprechenden Zeilen, in denen der Fehler auftritt.

        Markus schrieb am Antworten

        Hallo Lars – also hier mal alles:

        <?php
        $url = '/SommelierConsult/feed&limit=2';
        $cacheName = 'cache/' . md5($url);
        $cacheTime = 3600;
        if(!is_file($cacheName) || filemtime($cacheName) + $cacheTime ‚550485721666243‘,
        ’secret‘ => ‚f44b22080b93ca07e6f8652ef908aa95‘
        ));
        $rawFeed = $fb->api($url);
        $feed = array();
        foreach($rawFeed[‚data‘] as $item) {
        $title = false;
        if($title === false && isset($item[’story‘]) && !empty($item[’story‘])) {
        $title = $item[’story‘];
        }
        if($title === false && isset($item[‚message‘]) && !empty($item[‚message‘])) {
        $title = $item[‚message‘];
        }
        $image = false;
        if($image === false && isset($item[‚picture‘]) && !empty($item[‚picture‘])) {
        $image = $item[‚picture‘];
        }
        $link = false;
        if($link === false && isset($item[‚link‘]) && !empty($item[‚link‘])) {
        $link = $item[‚link‘];
        }
        $feed[] = array(
        ‚title‘ => $title,
        ‚link‘ => $link,
        ‚image‘ => $image
        );
        }
        file_put_contents($cacheName, json_encode($feed));
        } else {
        $feed = json_decode(file_get_contents($cacheName), true);
        }
        foreach($feed as $item) {
        ?>

        <a href="“>
        <img src="“ alt=““ />

        Dann habe ich einen Ordner facebook auf meinem Server mit den drei unveränderten files.

        Die Fehlermeldung momentan ist:

        Warning: session_start() [function.session-start]: Cannot send session cookie – headers already sent by (output started at /homepages/2/d132775660/htdocs/index_fbnews.php:2) in /homepages/2/d132775660/htdocs/facebook/facebook.php on line 49

        Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /homepages/2/d132775660/htdocs/index_fbnews.php:2) in /homepages/2/d132775660/htdocs/facebook/facebook.php on line 49

        Fatal error: Uncaught OAuthException: Unknown path components: /feed&limit=2 thrown in /homepages/2/d132775660/htdocs/facebook/base_facebook.php on line 1271

        Keine Ahnung, was ich jetzt machen soll.
        Grüße
        Markus

          Lars Ebert schrieb am

          Hallo Markus,

          irgendwas stimmt mit deiner PHP-Datei ganz gewaltig nicht. Bei diesen Zeilen sieht es aus, als fehlt mittendrin irgendwas:

          if(!is_file($cacheName) || filemtime($cacheName) + $cacheTime ’550485721666243′,
          ‘secret’ => ‘f44b22080b93ca07e6f8652ef908aa95′
          ));

          Die von dir angegebenen Fehlermeldungen deuten darauf hin, dass Du Inhalt ausgibst, bevor du die Facebook-Dateien einbindest. Probier mal, diese direkt am Anfang zu inkludieren, ohne vorher irgendwas ausgegegen zu haben!

Günter schrieb am Antworten

Hallo Lars,

wir haben den selben Fehler wie Markus:
Parse error: syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /homepages/2/d132775660/htdocs/facebook/facebook.php on line 26

Wir haben die facebook.php von GitHub verwendet, d.h. die sollten ja in Ordnung sein. Hast Du noch eine Idee für uns? Oder kannst Du einen Link teilen auf andere Downloadseiten?

Merci und Grüße,
Günter

Florian schrieb am Antworten

Hallo Lars,

vielen Dank erstmal für die gute Anleitung. Es funktioniert im Prinzip einwandfrei. Jetz habe ich noch eine Frage:
Derzeit werden Statusmeldungen auf Englisch angezeigt (also z. B. „…updated their cover photo.“). Kann man das umstellen, dass dies auf Deutsch kommt?

Gruß
Florian

    Lars Ebert schrieb am Antworten

    Hallo Florian, die Antwort ist sehr einfach: Übergib der API einfach den Parameter locale=de und schon sind die Textbausteine auf Deutsch!

      Florian schrieb am Antworten

      Sensationell! Vielen Dank

        Florian schrieb am Antworten

        Hallo nochmal Lars,

        ich habe gerade festgestellt, dass bei Posts für neue Fotoalben nur das Bild, nicht jedoch der Albumname angezeigt wird (im FB-Feed steht aber der zuerst der Albumname und dann ein Bild und drei Thumbs).

        Ist es möglich, dass bei diesen Posts auch der Albenname angezeigt wird? Sonst steht das Bild nämlich so alleine.

        Vielen Dank schon mal!
        Florian

      ronny schrieb am Antworten

      Hallo Lars

      wo genau muss man den Parameter locale=de mitgeben?
      Danke für dein Feedback….

        Lars Ebert schrieb am Antworten

        Hallo Ronny,

        der Parameter stellt die Sprache für die Text-Schnipsel wie »Lars Ebert hat ein Video hochgeladen.« Diese wären standardmäßig auf Englisch.

Daniel schrieb am Antworten

Sehr gutes Tutorial! Danke :)

Peter schrieb am Antworten

Moin Lars,
cooles Script. Genau so etwas habe ich gesucht.
Wie kann ich denn Bilder und / oder Videos auslesen lassen?

ED schrieb am Antworten

Hallo Lars

Danke für den tollen Beitrag :)

Leider ist bei mir ein Fehler aufgetreten:
Fatal error: Uncaught OAuthException: Unknown path components: /20min/feed thrown in C:\xampp\htdocs\socialleague\facebook\base_facebook.php on line 1325

leider kann ich damit nichts anfangen…
dies ist in $url drinnen: $url = ‚/www.facebook.com/20min/feed‘;

Danke für die Hilfe
Gruss
ED

    ED schrieb am Antworten

    Fehler gefunden…
    Falsche url angabe 😉

Fizzy schrieb am Antworten

Guten Tag Leute,
ich habe den kompletten PHP-Code in eine extra PHP-Datei gepackt und rufe diese Datei dann in der entsprechenden HTML Datei auf.

Leider erscheint dennoch kein Feed, was mache ich Falsch?

Danke.

Stefan schrieb am Antworten

Hallo Lars,

ich konnte dein PHP script eins zu eins für meine facebook Fanpage verwenden. Jedoch versuche ich öffentliche Daten von meinem Facebook Profil auf meiner Webseite zu integrieren. Die dazugehörige ID habe ich an mein Profil angepasst. Es kommt trotz öffentlicher posts nichts als eine leere Seite an. Ist das einbinden von facebook profil chroniken mit diesem Code überhaupt möglich, oder habe ich einfach noch etwas vergessen?

Vielen Dank für dein Tutorial und evtl. Tipps 😉

Beste Grüße
Steven

Robin schrieb am Antworten

Hallo, vielen Dank für das Skript.
Ich habe jetzt vieles probiert und ich fürchte, es funktioniert so nicht mehr. Jdfls. bekomme ich höchstens die Titel der Facebook Einträge zu sehen z.B. „added a new Foto“. Jedoch weder Fotos noch Inhalt. Es ist hierbei auch egal, ob ich eine App ID & Secret habe oder nicht. Kann es sein, dass FB hier etwas geändert hat ? Für eine Antwort wäre ich dankbar. Eine entsprechende Anpassung des Tuts wäre ein Traum 😉

    Michael schrieb am Antworten

    Scheinbar wurde da wirklich was bei FB geändert, denn ich habe das gleiche Problem und konnte es damit lösen, dass man einfach die Felder übergeben muss, welche man via API bekommen möchte:

    &fields=message,link,from,type,name,caption,created_time,description,picture

      Karin schrieb am Antworten

      Hallo Michael,

      wie und wo genau haste denn das reingeschrieben?
      Stehe vor dem selben Problem, denn die Ausgabe des API-Arrays listet mir keine
      Bilder und gerade die wollte ich!

        Miri schrieb am Antworten

        Dank einer Hilfe in meiner Lieblings-Facebook Gruppe WordPress & SEo habe ich gelernt, wo das besagte Teil hin muss – es muss mit einem Fragezeichen diretkt hinter die url:
        $url = ‚/xxxxxxx/feed?fields=message,link,from,type,name,caption,created_time,description,picture‘;

          Mark schrieb am

          Danke für den tipp! Funktioniert fast perfekt bei mir.
          Zumindest werden jetzt Bilder und Smileys von Facebook angezeigt :)

Johannes schrieb am Antworten

Super Tutorial – hat mir vor einiger Zeit schon sehr weitergeholfen.
Leider hat die SDK 5 nun alles durcheinandergebracht :( Ist hier auch ein Tutorial geplant? Das wäre genial :)

Viele Grüße
Johannes

Jakob schrieb am Antworten

Moin,

kann mir jemand verraten, wie ich den Feed von einer FB Seite Filtern kann, sodass nurnoch Beiträge von der Seite angezeigt werden und keine Fremdbeiträge?

Diese Artikel könnten dir auch gefallen