Facebook Like Buttons für jeden Artikel

Kategorie: facebook

Schon im April hat Facebook eine Möglichkeit für Seitenbetreiber geschaffen den „Like“-Button den wir bisher fast nur aus den Fanpages direkt kennen auf der eigenen Website zu implementieren.

So können eure Besucher direkt auf eurer Website zeigen das ihnen eure Website oder der entsprechende Artikel gefällt. So minimiert ihr den Arbeitsaufwand und könnt darauf hoffen das nun mehr Leute auf diesen Button klicken.

Das schöne bei dem Button ist das man ihn innerhalb von maximal 15 Minuten in seinen eigenen Blog integrieren kann, wenn man ein paar grundlegende Kenntnisse in HTML hat.
Es gibt natürlich auch Plugins die den Button für euch integrieren aber eigentlich verlangsamen solche Plugins den Blog nur uns es ist wirklich schnell selber gemacht.

1. Den Button Code erstellen

Damit ihr den benötigten Code für euren Button erstellen könnt, müsst ihr auch die Facebook Developer Seite gehen, ich habe jetzt einfach mal aus Zeitersparnis für euch direkt auf die passende Seite gelinkt. Auf der Social Plugins Seite habt ihr die Auswahl zwischen unterschiedlichen Plugins wobei wir uns heute nur mit dem Like Button beschäftigen werden.



Wenn die Seite so aussieht wie oben auf dem Scrennshot seid ihr richtig und müsst einfach nur etwas runterscrollen bis ihr in der grau hinterlegten Box alle nötigen Einstellungen für den Button machen könnt. Hier könnt ihr entscheiden wie breit der Button sein soll, ob Avatare angezeigt werden oder auch wie die Anzahl der Likes dargestellt wird.

Ich habe mich für einen ganz simplen Like-Button entschieden, das einzige wichtige, das ihr hier beachten müsst ist, gebt eine direkte URL an, auch wenn ihr sie in eine variable ändern wollt.



Sind alle Einstellungen so wie ihr sie haben wollt, dann klickt ganz unten am Ende der Box auf „Get Code“. Sobald ihr das getan habt, öffnet sich eine Art Pop-Up in dem euch zwei Codes zur Auswahl gegeben werden.



Hier wählt bzw. kopiert ihr den oberen der in einem IFrame steht, da man diesen leichter Anpassen kann.

2. Den Code im Blog einbinden

Jetzt wo wir den benötigten Code für unsere Button haben müssen wir ihn nur noch in unserem WordPress-Theme einbauen. Dazu ladet ihr die single.php von eurem Theme herunter und öffnet sie in einem Texteditor.

Denk Code fügt ihr dann dort ein, wo er später auf eurem Blog auch auftauchen soll, also entweder über dem Blogpost oder am Ende des Artikels.

Allerdings haben wir jetzt noch ein kleines Problem, denn der Button ist ja für eine direkte URL erstellt. Das müssen wir natürlich noch ändern bevor wir die Datei wieder hochladen.

Der relevante Teil des generierten Codes ist:

like.php=href=“http://netheweb.de“

Es kann natürlich auch sein, dass die Sonderzeichen in HTML-Code umgewandelt wurden. Der Link hört aber in jedem Fall vor dem ;layout=button auf.

Damit wir den Button universell auf jeder Seite unseres Blogs nutzen können sich die URL für die man auf „like“ klicken können soll sich anpasst müssen wir das http://netheweb.de ändern.

Ersetzt den oben gezeigten Ausschnitt des Codes also mit dem folgenden neuen Code-Snippet:

like.php?href=<?php echo urlencode(get_permalink()); ?>

Ich habe es selber als erstes mit dem direkten WordPress Code also <?php get_permalink(); ?> versucht was allerdings zu keinem Erfolg geführt hat.

Danach sollte eurer Code ungefähr so aussehen vom URL Format wie der in meinem Screenshot.



Die Farben sind abhängig ob euer Texteditor PHP und HTML Code mit Mark-Up darstellt.
Aber damit sind wir mit dem Verändern des Codes fertig und er lässt sich jetzt ohne Probleme für unterschiedliche Artikel verwenden.

3. Mehr Informationen übergeben

Fall ihr noch mehr Informationen an Facebook übermitteln wollt, zum Beispiel den Titel der Seite oder auch ein Bild für die URL könnt ihr dafür die Open Graph Tags nutzen die ihr in den Meta-Tags eures Blogs einbinden könnt.

Mehr Informationen zu den einzelnen Optionen die ihr hier habt findet ihr auch im Facebook Developement Center in der Open Graph protocol Dokumentation.

Mit diesem Thema werde ich mich in der nächsten Zeit aber noch in einem extra Artikel beschäftigen, da es den Rahmen des aktuellen Artikels sprengen würde.

Soweit wünsche ich euch schon mal viel Spaß mit den Like-Buttons.

Sensei

Geschrieben von Sensei am 04. 10. 2010
Abgelegt unter: facebook
Tags: , , , , ,

4 Kommentare zu “Facebook Like Buttons für jeden Artikel”

  • Tanja sagt:

    Statt dem Like Button, der bei mir schon wieder rausgeflogen ist, mangels Nutzung, hätte ich letztens den Facebook Share Button gesucht. Habe ihn aber leider nicht gefunden…

  • webmatr1x sagt:

    Leider lohnt sich der like-Button nicht immer! Ich hatte es auch mal bei mir eingebaut allerdings ist es auch bei 800-1000 visits kaum genutzt worden! Ich hab es dann zusammen mit ein paar diversen Social-bookmarks wieder gelöscht…

    Für Blogs kann ich es allerdings nur jedem empfehlen!

  • Sensei sagt:

    @webmatr1x ich kann bis jetzt sagen das der Button nutzt wird der Effekt aber noch nicht so groß ist. Wobei er schon wesentlich öfter genutzt wird als andere Bookmarking Buttons die ich vorher eingebaut habe.

  • Webmatr1x sagt:

    Wenn ein Button, dann der von Facebook! Da gebe ich dir schon recht…

Einen Kommentar hinterlassen