Facebook hat soeben ein neues Featurepaket vorgestellt, welches es ermöglicht eine Reihe von Facebook-Komponenten in der eigenen Website zu verwenden (Bericht auf t3n). Die spontan spannendste Funktion ist wohl der “Like-Button”, der nun von jedermann auf der eigenen Website platziert werden kann.

Und weil das gar so einfach geht, wollen wir es gleich einmal machen. Begeben Sie sich dazu auf die Facebook Developer Seite http://developers.facebook.com/docs/reference/plugins/like, geben Sie die gewünschten Parameter wie z.B. den URL Ihrer Website ein und lassen Sie sich Ihren Code generieren. Das Ganze sieht dann etwa so aus:

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

Diesen Code können Sie nun einfach an die gewünschte Stelle ihrer Internetpräsenz einfügen und schon haben Sie einen “Like-Button”. Wie Sie sehen wird der Facebook Code über einen iframe geladen. Wenn Sie wollen, können Sie noch etwas am style-Tag ändern oder das Ganze einfach in einen div-Container packen und es schön zu positionieren.

Natürlich lassen sich auch dynamische URLs einfügen. Dazu müssen Sie nur den Teil zwischen “…href=” und “&layout=…” durch Ihren PHP-Code ersetzen. Beim Blog-CMS WordPress beispielsweise können Sie den Code in die datei /templates/IHRTEMLATE/single.php nach dem Content-Tag

 < ?php the_content(); ?> 

einfügen. Als URL nehmen Sie den Permalink auf Ihren Blogeintrag:

 < ?php echo urlencode(get_permalink($post-&amp;amp;amp;amp;gt;ID)); ?> 

.

Update 23.02.2011:

Es gibt nun einen neuen, einfacheren Code namens “XFBML” der wie bei Twitter über ein externes JavaScript eingebunden wird:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.mountcrow.de" send="false" width="450" show_faces="true" font="verdana"></fb:like>

Open Graph Tags

Einen Schritt weiter gehen die sogenannten “Open Graph Tags”. Dies sind einfache Metatags, welche man in den Head Bereich der eigenen Webseiten einfügen kann. Sie beschreiben die Art der Seite, also ob es sich z.B. um einen Blog oder um einen Firmenauftritt handelt. Des Weiteren kann man den Titel und ein repräsentatives Bild, bspw. ein Logo angeben, welches die Site repräsentiert. Den gesamten Code kann man sich ebenfalls unter http://developers.facebook.com/docs/reference/plugins/like/ generieren lassen. Er sieht folgendermaßen aus:

<meta property="og:title" content="Mountcrow Page" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.mountcrow.de" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="Mountcrow" />
<meta property="fb:admins" content="123456" />

Der Wert des Attributs “property” enthält jeweils das Prefix “og” für Open Graph.
Facebook nutzt die Werte der Open Graph Tags wenn ein User die Seite auf Facebook teilt (share) um so Sachen wie den Titel, das Bild, den URL, etc. zu übergeben.