Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Mit JSON Inhalte von Facebook „entführen“

Mit JSON Inhalte von Facebook „entführen“

War Facebook bislang ein geschlossenes System, erlaubt es das soziale Netz mittlerweile, Inhalte auszulesen und auf anderen Websites darstellen zu lassen. Machbar ist das mit der „Graph API“, einer Schnittstelle, die den Zugriff auf Facebook-Inhalte ermöglicht.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 3 Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 20. August 2010
Bookmarke mich
Share on pocket

TYPO3 & Shopware Agentur - 3m5.

Webagentur klickbeben

Trend Maker Marketing - Webdesign Agentur Regensburg

One Step Webdesign

Warscher - Digital Experts

Webdesign DOERRER

War Facebook bislang ein geschlossenes System, erlaubt es das soziale Netz mittlerweile, Inhalte auszulesen und auf anderen Websites darstellen zu lassen. Machbar ist das mit der „Graph API“, einer Schnittstelle, die den Zugriff auf Facebook-Inhalte ermöglicht.

Mit „Graph API“ kann man auf die sogenannten Facebook-Objekte zugreifen. Zu diesen Objekten gehören Benutzer, Seiten, Links, Fotos und Veranstaltungen – also alles, womit man befreundet sein kann, was einem gefallen oder was man teilen kann. Jedes dieser Objekte wird über eine ID angesteuert und stellt objektspezifische Werte zum Auslesen bereit. Bei Benutzern lassen sich zum Beispiel Name, Geschlecht oder Herkunft ermitteln. Natürlich stellt die API nur solche Inhalte zur Verfügung, die frei zugänglich sind.

JSON als Austauschformat

Der Austausch der Inhalte solcher Facebook-Objekte erfolgt über das Format JSON, was für JavaScript Object Notation steht. JSON ist es kompaktes Datenformat, welches Daten in Textform zwischen verschiedenen Anwendungen austauschen kann. Es ähnelt von seiner Funktion dem XML-Format, ist allerdings deutlich einfacher und schlanker.

Über JSON können Eigenschaften – dazu zählen Arrays,  Zeichenketten, Zahlen sowie boolsche Werte – ausgetauscht werden. Eigenschaften werden in Objekten, die in geschwungenen Klammern stehen, dargestellt. Jede Eigenschaft hat einen Schlüssel und einen Wert. Während Zeichenketten in Anführungszeichen stehen, werden Zahlen und boolsche Werte ohne Anführungszeichen dargestellt. Arrays stehen in eckigen Klammern.

Objekte lassen sich verschachteln, wobei verschachtelte Objekte wie auch die Eigenschaften über einen Schlüssel verfügen:

{
  "Name": "Manfred Mustermann",
  "Mitgliedsnummer": 1484,
  "Anschrift": {
    "Strasse": "Musterweg 11",
    "Ort": "Musterstadt",
    "PLZ": 57842
  }
  "Hobbys": [ "Reiten", "Lesen", "Schwimmen" ],
  "Alter": 35,
  "Mitgliedsbeitrag": 10,
  "Lastschrift": true
}

Ein JSON-Objekt ist ein gültiges JavaScript, welches über die JavaScript-Funktion eval() ausgelesen werden kann. Aber auch andere Programmiersprachen verfügen über Funktionen, mit denen JSON-Objekte ausgelesen und konvertiert werden können. PHP stellt dazu die Funktion json_decode() zur Verfügung.

Aufruf der „Graph API“

Um ein Facebook-Objekt über die API aufzurufen, benötigt man die ID des Objektes oder den Benutzernamen.

Beispiel: Über den Aufruf von „http://graph.facebook.com/220439“ oder alternativ „http://graph.facebook.com/btaylor“ erhält man als JSON-Objekt die objektspezifischen Daten des Facebook Benutzers Bret Taylor (wird von Facebook für Demozwecke genutzt):

{
  "id": "220439",
  "name": "Bret Taylor",
  "first_name": "Bret",
  "last_name": "Taylor",
  "link": "http://www.facebook.com/btaylor",
  "gender": "m\u00e4nnlich",
  "locale": "en_US"
}

Sonderzeichen wie die deutschen Umlaute werden als Unicode-Escape-Sequenz ausgegeben, also als Backslash gefolgt vom Unicode-Wert. Die über das JSON-Objekt dargestellten Werte des Facebook-Benutzers lassen sich nun zum Beispiel mittels PHP auslesen und weiterverarbeiten.

Über die API lassen sich, wie anfangs bereits erwähnt, alle Facebook-Objekte auslesen (insofern sie frei zugänglich sind).

Beispiel: Über „http://graph.facebook.com/40796308305“ erhält man Zugriff auf die Facebook-Seite „Coca-Cola“:

{
  "id": "40796308305",
  "name": "Coca-Cola",
  "picture": "http://profile.ak.fbcdn.net/profile-ak-snc1/object3/
    1853/100/s40796308305_2334.jpg",
  "link": "http://www.facebook.com/coca-cola",
  "category": "Consumer_products",
  "username": "coca-cola",
  "products": "Coca-Cola is the most ...",
  "fan_count": 10171036
}

Neben den allgemeinen Informationen zu Benutzern, Gruppen und Seiten lassen sich auch die Inhalte der einzelnen Objekte auslesen, etwa die Inhalte einer Pinnwand. Über den Aufruf von „http://graph.facebook.com/40796308305/feed“ erhält man ein JSON-Objekt mit den Meldungen der Pinnwand der Seite „Coca-Cola“.

Meldungen einer Pinnwand als JSON-Objekt und wie Facebook sie darstellt
Meldungen einer Pinnwand als JSON-Objekt und wie Facebook sie darstellt

Die Anzahl der dargestellten Meldungen lässt sich über den Parameter „limit“ ebenso definieren wie die erste darzustellende Meldung über den Parameter „offset“. Über „http://graph.facebook.com/40796308305/feed?limit=10&offset=5“ werden also zehn Meldungen angezeigt, wobei ab Meldung fünf begonnen wird. Insgesamt werden also die Meldungen fünf bis fünfzehn dargestellt.

Über die Parameter „until“ und „since“ lassen sich Meldungen auch aufgrund ihres Datums darstellen. So werden mit „http://graph.facebook.com/40796308305/feed?since=yesterday“ alle Meldungen seit „gestern“ angezeigt.

Jede einzelne Meldung der Pinnwand hat wiederum eine eigene ID und lässt sich separat ansteuern.

Facebook-Inhalte mit PHP darstellen

Eine konkrete Anwendung für die „Graph API“ ist das Darstellen von Facebook-Inhalten auf der eigenen Website. Im folgenden Beispiel werden die Pinnwandmeldungen einer Facebook-Seite über ein PHP-Script ausgelesen und ausgegeben. Wer eine Seite bei Facebook pflegt, kann so die Pinnwandmeldungen, die sonst nur Facebook-Besucher sehen, auf seiner eigene Website darstellen lassen.

Zunächst wird das JSON-Objekt mit den Meldungen der Pinnwand der entsprechenden Seite (wir bleiben bei Coca-Cola) über „fopen()“ eingelesen:

$fb_feed = fopen("http://graph.facebook.com/40796308305/feed", "r");

while (!feof($fb_feed)) {
  $fb = fgets($fb_feed);
}

fclose($fb_feed);

Die Variable $fb enthält nun alle Pinnwandmeldungen der Seite als JSON-Objekt. Anschließend wird das eingelesene JSON-Objekt in eine PHP-Variable konvertiert:

$fb = json_decode($fb, true);

Die Pinnwandmeldungen sind in dem Array data gespeichert. Mit $fb["data"] hat man Zugriff auf das Array, das aus dem JSON-Objekt übernommen wurde. Über eine for-Schleife werden alle Objekte des Arrays ausgelesen. Jeder Wert des Arrays enthält eine Pinnwandmeldung. Je nach Art der Meldung (Statusmeldung, Bild, Veranstaltung) lassen sich objektspezifische Werte abfragen.

In diesem Fall lassen wir den Namen des Posters und den Meldungstext wiedergeben:

for ($i = 0; $i < sizeof($fb["data"]); $i++) {

  $fb_eintrag = $fb_daten[$i];

  echo "<strong>".$fb_eintrag["from"]["name"].":</strong> ";
  echo $fb_eintrag["message"]."</p>";
  echo "<hr />";

}

Die Art der Darstellung lässt sich noch verfeinern, indem man die unterschiedlichen Typen von Meldungen abfragt (in diesem Fall über „$fb_eintrag[„type“]“) und die Ausgabe entsprechend anpasst.

Fazit

Das hier dargestellte Beispiel zeigt nur einen Teil der Möglichkeiten, die man die der „Graph API“ von Facebook hat. Insbesondere beschränkt sich das Beispiel auf Inhalte, die frei verfügbar sind.

Mit der API können Sie auch auf Daten von Benutzern zugegreifen, die sonst nur „Freunden“ dieser Benutzer zugänglich sind. Allerdings bedarf es der Zustimmung des jeweiligen Benutzers. Facebook stellt hierfür ein spezielles Protokoll zur Authentifizierung zur Verfügung.

(mm),

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

VABELHAVT

Innsbruck

JOHDA Webdesign

Berlin

Webtronix Media GmbH

Hanau

marketer UX

Düsseldorf

wolli ruf – mediendesign

Freiburg im Breisgau

Alle Agenturpartner

Jobs

SEO Manager – Vollzeit

Remote

Webtexter für SEO Agentur

Salzburg (Österreich)

Grafik-Designerin

Freiburg im Breisgau

Junior Webdesigner/ Mediengestalter

Innsbruck

Elektroinstallateur – Rechenzentrum

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

3 Antworten zu „Mit JSON Inhalte von Facebook „entführen““
— was ist Deine Meinung?

  1. Joel Bladt sagt:
    16. April 2014 um 13:34 Uhr

    Hallo Denis,

    sehr interessanter Beitrag den du da veröffentlicht hast. Nun habe ich das selber einmal probiert mit der Pinnwand auslesen jedoch bekomme ich folgende Fehlermeldung wieder: „An access token is required to request this resource.“
    Als type erhalte ich den Wert OAuthException und den Code 104

    Kannst du mir weiterhelfen, was für einen access token ich benötige?
    Vielen Dank schon einmal im voraus und mach weiter so.

    Schöne Grüße,
    Joel von htaccess24.de

    Antworten
    1. Mike sagt:
      12. Februar 2015 um 20:51 Uhr

      Hallo Joel, da bei Facebook praktisch jeden Tag irgendwas verändert wird vermute ich dass der Code einfach nicht mehr aktuell ist. Informier dich mal bei Facebook selbst. Falls das Thema für dich überhaupt noch Relevant ist…ich seh nämlich grad dass deine Frage fast ein Jahr aus ist.

      Antworten
  2. D9n sagt:
    20. Juni 2012 um 23:26 Uhr

    Hallo,

    kann man mit der API auch die privaten Nachrichten an die Seite abrufen?

    Gruß,
    D9n

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.