links rechts

Facebook: Den Social Graph nutzen

4

Facebooks “Like”-Button erfreut sich enormer Beliebtheit was sicherlich auch an dem tatsächlich messbaren Zuwachs an Besuchern liegt, die man durch diesen Button gewinnen kann. Einige meiner Artikel profitieren schon stark davon, dass manche Personen sie mögen. Als Blogger und Webseitenbetreiber lohnt es sich daher vielleicht auch, den nächsten Schritt zu gehen und die eigene Webseite besser mit Hilfe des Open Graph Protocol in facebook zu integrieren.

Wichtigster Schritt hier ist es zunächst die Inhalte der eigenen Seite in Graph Objekte umzuwandeln und diese mit Hilfe von meta-Tags auszuzeichnen. Facebook nutzt hierfür eingene Tags was uns dazu zwingt zwei Namensräume in unser HTML-Dokument zu integrieren. Die weiteren Tags erklären sich dann fast von selbst:

  1. <html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
  2. <head>
  3. <title>The Rock (1996)</title>
  4. <meta property="og:title" content="The Rock"/>
  5. <meta property="og:type" content="movie"/>
  6. <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
  7. <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
  8. ...
  9. </head>
  10. ...
  11. </html>

Für das Open Graph Protokoll sind fünf Elemente ausgezeichnet worden:

  • og:title – Der Titel des Objekts
  • og:type – Der Typ des Objekts, z.B. “movie”. Eine Liste aller verfügbaren Typen findet Ihr übrigens hier.
  • og:image – Eine Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss mindestens 50×50px groß sein und darf maximal ein Verhältnis von 3:1 aufweisen.
  • og:url – Der URL als permanente ID für das Objekt im Social Graph, z.B. http://www.imdb.com/title/tt0117500/.
  • og:site_name – Ein durch Menschen lesbarer Name der Seite, z.B. “IMDb”

Um die Integration der Objekte in facebook abzuschließen empfiehlt es sich noch eine Beschreibung der Seite og:description und Adminstratoren für diese Daten auf facebook zu definieren. Dies könnte dann so aussehen:

  1. <meta property="fb:admins" content="USER_ID"/>
  2. <meta property="og:site_name" content="IMDb"/>
  3. <meta property="og:description" content="Beschreibung"/>

Die USER_ID sollte dann natürlich der ID eines Nutzers bei facebook entsprechen. Wenn Ihr eine Fan-Seite bei facebook betreibt könnt ihr natürlich auch diese als Adminstrator einrichten mit fb:app_id und einer mit Komma getrennten Liste von IDs.

Sobald ich etwas mehr Zeit habe werde ich die Integration hier auf ugotit.de ebenfalls vornehmen und dann auch darüber bloggen, wie man facebook und WordPress bequem verbinden kann. Idealerweise natürlich ohne ein weiteres zusätzliches Plugin.

“Like”-Button mit Facebooks JavaScript-SDK einbinden.

18

Ein eigener “Gefällt mir”-Button auf der Seite ist schon praktisch. Facebook macht sich dran das Web zu erobern und erlaubt Webseitenbetreibern in wenigen Schritten den besagten Button in die eigene Webseite einzubauen.

Variante 1: mit iframe

  1. <iframe src="http://www.facebook.com/plugins/like.php?href=http://domain.com&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>

Variante 2: Facebooks JavaScript-SDK

Etwas komplizierter aber viel schöner ist es die JavaScript-SDK von facebook zu nutzen. Für diese muss man sich zwar bei facebook anmelden aber das Formular ist noch gerade so erträglich.

Eigene Seite bei facebook als Applikation registrieren

Eigene Seite bei facebook registrieren

Das Forumlar unter http://developers.facebook.com/setup/ möchte von Euch nur den Namen der Seite, die URL zur Seite und Eure Sprache wissen. Mehr nicht und schon bekommt ihr nicht nur Eure App ID sondern auch gleich den Code, den ihr braucht, um das facebook JavaScript-SDK einzubinden.

facebook JavaScript-SDK einbinden

  1. <div id="fb-root"></div>
  2. <script>
  3. window.fbAsyncInit = function() {
  4. FB.init({appId: 'APP ID', status: true, cookie: true, xfbml: true});
  5. };
  6. (function() {
  7. var e = document.createElement('script');
  8. e.type = 'text/javascript';
  9. e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
  10. e.async = true;
  11. document.getElementById('fb-root').appendChild(e);
  12. }());
  13. </script>

Jetzt haben wir Zugriff auf einige Methoden, die facebook uns zur Verfügung stellt. Um einen “Like”-Button in die Seite zu integrieren brauchen wir zunächst ein XFBML-Element, welches ihr an der gewünschten Stelle in Eure HTML-Datei einfügt. Eure Domain müsst Ihr entweder manuell eintragen oder mit dem CMS Eurer Wahl dynamisch einfügen:

  1. <fb:like href="http://domain.com/" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

Für WordPress sieht das dann so aus:

  1. <fb:like href="<?php echo urlencode(get_permalink($post->ID)); ?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

Meiner Meinung nach viel schöner als ein iframe und, wenn man sich das facebook JavaScript-SDK mal ansieht, auch viel mächtiger.

50 nützliche Quellen für Entwickler von Facebook Anwendungen

Kommentare deaktiviert

Interesse daran, Anwendungen für Facebook zu programmieren? Über @yeebase_t3n bin ich auf eine interessante Quellensammlung gestossen.

Developing a successful Facebook application isn’t an easy task. If you’re just getting started or you’re trying to figure out what it takes to create a successful application, you’ll find the list of resources below very helpful.

Read more: http://blog.kissmetrics.com/50-resources-for-facebook-application-developers/#ixzz0b6IBLdms

kissmetrics