Facebook: Gefällt mir/Like/Empfehlen-Button in WordPress-Blog einbauen (ohne Plugin)

Frank Ritter

Facebook Like-Gefällt mir-Button
Facebook hat gerade eine technische Möglichkeit veröffentlicht, mit der Webseiten-Betreiber einen Facebook-„Like“-Button (deutsch: „Gefällt mir“) einbinden können. Vorteil: Andere Facebook-Nutzer, denen der Inhalt gefällt, können direkt Ihre Zuneigung kundtun. Wer auf „Gefällt mir“ klickt, verbreitet den Link auch über seine eigene Timeline und zieht auf diese Weise unter Umständen neue Besucher an. Wir zeigen, wie man den Button in ein WordPress-Blog einbaut.

Besitzer eines (selbst gehosteten) WordPress-Blogs können diesen Like-Button sehr schnell und einfach auf ihre Seite einbauen. Achtung, hierzu ist Basiswissen in HTML und ein wenig PHP nötig. Wer schon einmal in WordPress-Themes herumgehackt hat, sollte jedoch keine Probleme haben. Zwar gibt es zum derzeitigen Zeitpunkt noch kein fertiges Plugin, jedoch ist der entsprechende Code schnell generiert. Diesen fügt man einfach an der gewünschten Stelle (zum Beispiel unterhalb der Artikelüberschrift oder unter dem Artikel) in der Datei single.php ein. Der Button wird über einen iframe geladen. Vorteile: Der Seitenaufbau wird beim Laden der Website nicht an der Stelle unterbrochen, auch ist der Button nicht SEO-relevant und der Button funktioniert auch mit Caching-Plugins wie WP Super Cache.

Im Code-Generator in der Developer-Sektion bei Facebook lässt sich das Aussehen des Buttons einstellen. Leider kann man dort nur statische URLs angeben. Der Code soll jedoch ins WordPress-Theme integriert werden und sich dynamisch auf die jeweilige Artikel-URL beziehen.

Die feste URL lässt sich, hat man erst einmal das fertige Code-Schnipselchen, im Nachhinein noch durch eine dynamische austauschen ändern. Dazu muss man nur im fertigen Code die angegebene URL, etwa

like.php?href=http://www.loadblog.de/

ersetzen durch den PHP-Code

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

Das komplette Snippet noch in die single.php des WordPress-Themes an der gewünschten Stelle einfügen, zum Beispiel unterhalb der Artikelüberschrift oder zwischen Artikel und Tags.

Als Beispiel übernehmen wir hier mal das Code-Snippet von cordobo.com. Der Code sieht folgendermaßen aus:

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

Fertig eingebunden sieht das Facebook Widget so aus:

„Gefällt mir“ klicken ist natürlich ausdrücklich erwünscht. ;)

Neue Artikel von GIGA SOFTWARE

  • SVG zu PNG: Rastergrafiken in Vektorgrafiken umwandeln – und andersrum

    SVG zu PNG: Rastergrafiken in Vektorgrafiken umwandeln – und andersrum

    Skalierbare Vektorgrafiken bieten sich gegenüber herkömmlichen Rastergrafiken für Logos, Illustrationen, Cliparts oder Karten an, da sie ohne Qualitätsverlust vergrößert und gedreht werden können. Wenn ihr jedoch eine SVG-Datei in einem normalen Grafikprogramm bearbeiten wollt, müsst ihr sie zunächst in ein anderes Bildformat wie PNG umwandeln.Auch andersrum könnt ihr ein erstelltes PNG in eine Vektorgrafik...
    Thomas Kolkmann
  • Microsoft Office 2019: Neuerungen im Überblick

    Microsoft Office 2019: Neuerungen im Überblick

    Office 2019 erscheint in der zweiten Jahreshälfte 2018, wie gewohnt wird es auch bei dieser Version einige neue Features geben. Wir geben euch einen Ausblick, welche Neuerungen euch bei Office 2019 erwarten.
    Selim Baykara
  • Bilder vektorisieren: So wandelt ihr Bitmap-Grafiken mit Inkscape um

    Bilder vektorisieren: So wandelt ihr Bitmap-Grafiken mit Inkscape um

    Um aus einer Bitmap-Grafik eine wirklich frei skalierbare Vektorgrafik zu machen, muss diese zwingend nachgezeichnet werden. Zum Glück bietet das freie Vektorgrafikprogramm Inkscape ein automatisches Werkzeug an, mit dem sich Bilder schnell und einfach vektorisieren lassen.
    Thomas Kolkmann
* gesponsorter Link