Der “Like”-Button gehört mittlerweile zur Standardfunktion bei vielen Blogs. Dank Facebooks Developer-Support kann jeder Webmaster mit mehr oder weniger Aufwand den eigenen Lesern helfen, interessante Blogposts in der Facebook Community zu verteilen.

Auf Wunsch einiger meiner Stammleser, habe ich diesen Post aktualisiert!

Grundsätzlich gibt es zwei populäre Wege, den Button einzubinden. Einaml via iFrame, dieser Weg ist relativ schnell zu realisieren, bietet aber nicht so viele Möglichkeiten der Anpassung. Und dann via XFBML – für HTML5-Fans auch mit kompatiblem Markup. Letztere Methode ist minimal aufwändiger, da zuvvor das Facebook Javascript-SDK eingebunden werden muss. Aber auch das ist machbar

Facebook Like-Button via iFrame einbinden

Dies ist die schnelleste und einfachste Variante – vorher muss allerdings eine kleine Veränderung am Code vorgenommen und die Zeilenumbräche entfernt werden, die ich der Übersichtlichkeit halber eingesetzt habe. Danach: Copy & Paste – That´s it!

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.avianex.de&amp;send=false&amp;layout=standard&amp; width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

WordPress-Nutzer: Den Parameter “?href=” muss mit folgendem Code befüllt werden, der immer den aktuellen Permalink integriert.

<?php the_permalink() ?>

… also um beim obigen Beispiel zu bleiben: http%3A%2F%2Fwww.avianex.de muss 1:1 durch den Code ersetzt werden.

Jetzt sollte der Beitrag “likebar” sein!

Facebook Like-Button via XFBML einbinden

Diese Variante ist minimal komplexer, aber man hat auch deutlich mehr Möglichkeiten, so können z.B: auch Kommentare zu den Likes angezeigt werden oder gleich eine ganze Like-Box mit den letzten Kommentaren.

Dazu muss zunächst das Javascript-SDK eingebunden werden. Dieses sollte direkt vor das schließende -Tag eingefügt werden.

<div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Danach müssen im Header-Bereich die Open Graph Meta Tags implementiert werden – und zwar innerhalb des -Tags. Die Metatags verbinden die eigene Seite mit dem Facebook Open Graph. Was bedeutet das? Mit Hilfe dieser Angaben erhält die eigene Seite die EIgenschaften einer Facebook Page. Klickt jemand auf Like, verbindet sich die Seite mit Facebook und die Informationen der Seite erscheinen beim Liker z.B. unter den Interessen oder können über Updates informiert werden.

<meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="<?php the_permalink() ?>" /> <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'größe-des-bildes' ); $url = $thumb['0']; ?> <?php if ( has_post_thumbnail()) {?><meta property="og:image" content="<?php echo $url; ?>" /> <?php } ?> <meta property="og:site_name" content="Name der Seite" /> <meta property="fb:admins" content="<strong>Hier die eigene Facebook ID</strong>" />

Wie erhalte ich meine eigene Facebook-ID?

Ganz einfach folgendes im Browser eingeben:

http://graph.facebook.com/hier-der-eigene-username

Unter “id” findet sich die User-ID.

An der Stelle im Template an der der Like-Button erscheinen soll, muss folgendes Snippet eingefügt werden:

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>

Was bedeuten die Parameter?

data-send: Soll auch der Send-Button angezeigt werden (true) oder nicht (false)?
data-width: Die Breite des Facebook-Contents, kann verändert werden
data-show-faces: Sollen die Gesichter der Liker angezeigt werden (true) oder nicht (false)?

Mehr dazu in wenigen Stunden …