Blog, HTML / CSS, Social Media

Facebook gefällt mir / like Button in Webseite einbinden

WordPress Entwickler und Webdesigner

Wenn du dich für das Einbinden eines Facebook „gefällt mir“ Buttons interessierst, dann solltest du nach diesem Artikel auch noch den Artikel: „Facebook gefällt mir und Open Graph“ lesen, um den Button noch effektiver zu nutzen.

Der „gefällt mir“ bzw. like Button von Facebook taucht in immer mehr Webseiten auf und dürfte auch nicht Facebook Usern mittlerweile ein Begriff sein. Über den „gefällt mir“ bzw. like Button können User mit einem einfachen klick ihren Facebook Freunden zeigen welche Webseiten bzw. konkrete Inhalte ihnen gefallen.

Da die Freunde die man in seiner Freundes-Liste auf Facebook hat in der Regel ähnliche Interessen haben, ist die Wahrscheinlichkeit das Freunde diesen Link auch anklicken relativ hoch. So ist der „gefällt mir“ Button eine einfache, gute und effektive Werbemöglichkeit die den Traffic auf der eigenen Webseite erhöhen kann.

Der Button selber lässt sich über die Facebook-Developer Seite mit Hilfe eines kleinen Generators relativ einfach in die eigene Webseite einbinden.

Anzeige:




In diesem Tutorial möchte ich euch noch 2 Varianten zeigen wie ihr die „gefällt mir“ / Like Buttons dynamisch in eure Webseiten einbinden könnt. Zum einen ein kleines Script mit dem ihr das Facebook-Like-Script dynamisch in so gut wie alle Webseiten und CMS Systeme (z.B. Joomla!, Drupal, WordPress, Mambo usw.) integrieren könnt und ein Script speziell für WordPress, dasselbe das wir hier auf dieser Webseite auch verwenden (siehe unten).

Statischer Standard Code für den „gefällt mir“ / Like Button
So würde der Code für den Like Button aussehen, wenn wir statisch die Domain https://www.webdesign-podcast.de mit einem „gefällt mir“ versehen wollen:

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

In dem href steht die Domain, auf die der „gefällt mir“ Button zeigen soll.

Dynamischer PHP-Code für „gefällt mir“ / Like Button
Diesen Code könnt ihr z.B. in eine mit einem CMS verwaltete Webseite einbinden und über den PHP-Befehl:

<?= $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ?>

Wird automatisch die aktuelle URL an das „gefällt mir“ / Like Script übergeben. Auf die Art und Weise muss nicht für jede einzelne Seite ein neuer Facebook Like Button generiert werden.

<iframe src="https://www.facebook.com/plugins/like.php?href=<?= $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Dynamischer PHP-Code für „gefällt mir“ / Like Button – Variante speziell für WordPress
Um den Button nun innerhalb von WordPress nutzen zu können muss der Permalink (aktuelle Seite/Artikel innerhalb von WordPress) in den Code eingebunden werden. inklusive integriertem Permalink sieht der abgewandelte Code dann so aus.

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

Diesen Code bindet ihr nun in eurem WordPress-Theme (z.B. in der single.php, index.php, page.php) innerhalb des Content Loops ein. Wie das ganze dann aussehen kann, könnt ihr euch direkt auf dieser Seite anschauen, seht euch einfach den Facebook Button am Ende dieser Seite an, er ist auf die selbe Art und Weise erstellt worden.

Viel Spaß damit!

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

89 Antworten zu “Facebook gefällt mir / like Button in Webseite einbinden”

  1. Hallo,

    ich möchte das gerne dynamisch mit Joomla realisieren. Ich erhalte aber einen Fehler. Was muss ich denn noch eingeben bei:

    Meinen Server???

    Ich habe unter Joomla „Search Engine Friendly URLs“ eingestellt.

    Danke!

  2. Der Code sollte bei dir eigentlich funktionieren, wenn du es dynamisch verwenden möchtest. Die $_SERVER Variablen sind unabhängig von CMS-Systemen wie Joomla und sollten immer funktionieren.

    Was bekommst du denn genau für eine Fehlermeldung

  3. Wo muss ich denn die -Informationen auf meiner Joomla-HP einbinden? Irdendwo in der index.php? Wenn ich bei einem neuen Artikel erstelle und auf den Button „html“ klicke, um dort den Code reinzukopieren, wird dieser nach einem Klick auf „aktualisieren“ wieder gelöscht. Nichts passiert? Bin irritiert…

  4. hallo, habe soeben bei mir den iframe code eingebaut – wie oben beschrieben.
    Wird richtig angezeigt, doch leider wird die url nicht richtig übernommen?
    Es wird nur „index.php?option=com_jshopping“ übermittelt und dieser sollte es sein „index.php?option=com_jshopping&controller=product&task=view&category_id=90&product_id=449&Itemid=121“

    wird aber richtig ausgelesen?

  5. Hallo Andreas,
    versuch es doch mal mit der PHP Funktion urlencode() und / oder htmlentities() um die Variable $_SERVER[‚REQUEST_URI‘]:

    htmlentities(urlencode($_SERVER[‚REQUEST_URI‘]))

    Beste Grüße
    Pascal

  6. Guten Tag, ich bin am verzweifeln mit meiner Seite! Ich versuchte den dynamischen Code einzubinde in http://i-likes.me jedoch funktioniert es einfach nicht! Es funktioniert insofern nicht weil es nicht auf der „Hauptseite“ gepostet wird. Sondern nur im Profil angezeigt wird; hier mein Code :

    Was kann ich hier machen ich bitte um hilfe!
    mfg.

    • Aber auf deiner Seite ist doch soweit alles richtig eingebunden? Die Url wird richtig angezeigt oder meinst mit Hauptseite nicht deine Webseite sondern die Facebook Seite?

  7. Nein,also wenn man auf gefällt mir klickt klappt alles wunderbar!
    Es wird aber nur auf der eigenen Seite eingebunden nicht wo es alle sehen können.

    Damit meine ich die Profilseite .
    Die Hauptseite wo man das aktuelle der anderen Freunde sieht …
    Hab das ganze NUR per PHP nicht per Javascript kann es sein das es daran liegt ?
    mfg

  8. Hallo, was muss ich ändern, damit auf meiner Seite nicht die englische Version des „Like“ Buttons erscheint, sonder die deutsche „Gefällt mir“ Version? Vielen Dank im voraus für die Hilfe!

  9. Hallo, mit der ganzen Website funktioniert das super. Aber Du schreibst, dass das auch mit konkreten Inhalten möglich ist!?
    Ich würde gerne unter mehrere Beiträge einen Like Button machen, so dass dann auch wirklich nachher in facebook steht: „Maik gefällt [BEITRAGSNAME] auf [HOMEPAGE]“. am besten auch mit einem Beitragsbild und -kurztext dazu. Ist das möglich?

  10. bei mir lese ich Folgendes:
    „Gefällt mir

    Dir gefällt Ferienwohnungen Balogh und Elger.Gefällt mir nicht mehr · Administratorenseite · FehlerFrank Balogh, Manuela Lehmann und 3 weiteren Personen gefällt das.Manuela Lehmann, Andrea Balogh und 2 weiteren Personen gefällt das.Gefällt mir nicht mehr · Administratorenseite · Fehler
    Frank Balogh
    Manuela Lehmann
    Andrea Balogh
    Stephan Balogh“

    ich weiss leider nicht, was falsch gemacht haben soll
    Gruß
    frank

  11. angezeigt werden sollte ein Feldchen, ähnlich wie auf Eurer Seite oben.
    Tatsächlich wird zwar ein „f“ angezeigt allerdings werden auch Bilder dargestellt.

    Gruß
    frank

  12. Ich hab jetzt Open Graph eingebunden. Wenn ich allerdings als „Seite“ agiere (Ferienwohnungen-Balogh-und-Elger/196396747039830), wird der Nutton nicht angezeigt, da 100001924945580 eingebunden ist.

    Ist es deshalb möglich, auf einer Seite auch eine zweite „APP-ID“ einzubauen, um zu zwitschen ??

    MfG
    frank

    • Du kannst pro Unterseite ein Open Graph Element einbinden – Es ist möglich auf index.html andere Elemente und App-ID /fb:admins als z.B. auf wohnung.html – allerdings kannst du nicht mehrere verschiedene Angaben auf einer Seite einbinden (z.B. index.html)

  13. Dank für die schnelle Antwort ;-))
    „allerdings kannst du nicht mehrere verschiedene Angaben auf einer Seite einbinden (z.B. index.html)“
    das wärs allerdings gewesen, da die WebSite mit Templates via php den Content einliest.
    Schade, da ich von php keine große Ahnung habe, dachte ich, es wären Scriptlösungen denkbar
    MfG
    frank

  14. Hallo

    Ich habe nun auch probehalber den Facebookbuton eingebaut und auch die opengraph geschichte, jedoch erscheint bei facebook nicht die anzeige mit bild und infos, sondern nur wie es ohne opengraph aussehen würde. Als Bild wird ein willkürliches Logo von meiner Seite angezeigt. Was habe ich falsch gemacht?

    Jens

  15. Hallo,
    versuche verzweifelt den Like-Button auf einer dynamischen Seite (hat eine URL mit einer dynamischen ID) einzubinden. Für die Website an sich klappt das auch, aber die dynamischen Seiten weigern sich noch. Komischerweise saget der URL Linter „Webseite nicht verfügbar“ – obwohl ich sie doch ganz normal aufrufen kann. Hab die OpenGraph Metas eingebunden, das mit den Servervariablen und dem URL encoding probiert, klappt bisher alles nicht. Hat jemand einen Rat?

    Vielen Dank
    Jens

    • Oh Mann, ich glaube der Fehler ist gefunden. Eigene Doofheit. Wenn die Seite nur aufrufbar ist, wenn eine Session ID vorhanden ist, ist es kein Wunder, dass Facebook sagt sie können die Seite nicht aufrufen.
      Der Beitrag kann gelöscht werden 😉

  16. Hi!
    Ich habe bis jetzt nur den „i like it“ button eingebunden, funktioniert auch soweit wie er soll, jeder der „like it“ klickt wird ein Fan unserer Fanpage.
    ich möchte aber jetzt anfangen bestimmte inhalte wie artikel direkt zu verklinken. Wenn ich das richtig verstehe gehen mir aber ja damit die Fans flöten, oder?
    Denn mit einem Klick mag man dann die ursprungsURL und nicht die FbFanpage?
    Danke im Vorraus, Super Service den Du hier bietest!
    Gruß, Holger

  17. Hallo, wie kann ich bestimmen, welches Bild von der I-Like-Homepage mit in den I-Like-Beitrage auf Facebook geziegt wird. Im Moment nimmter Facebook einfach das Logo eines Werbepartners und nicht das FavIcon etc… ?

  18. hallo
    ich habe eine fotogalerie. da möchte ich gerne einen like button unter jedem foto haben. ich habe schon ein plugin gefunden, aber da sieht man nicht wer gedrückt hat. ist es möglich das zu realisieren?
    danke und gruß

    • aber da sieht man nicht wer gedrückt hat

      Du siehst nur klicks von direkten Freunden, ansonsten von Niemandem, da steht dann nur eine Zahl: z.B. dir, Freund, Freund und 10 weiteren Personen gefällt das.
      Anders geht es nicht.

  19. Hallo Pascal,

    danke für die Infos zum Facebook-Button. Ich bastle diesbezüglich auch gerade etwas an meiner Hobby-Seite herum. Bei meinem Webspace habe ich kein PHP dabei, bedeutet das für mich, dass ich immer den URL manuell abändern muss? Beim Twitter-Button ist dies meiner Meinung nach anders, hier genügt ein „einheitlicher“ Code.

    Danke für Deine Antwort!

    Andi

  20. Hallo – ich habe eine kleine Homepage mit dem GMX-Sitebuilder erstellt und möchte nun das facebook „gefällt mir“ einbinden. Weiß jemand, wie das geht? GMX verweigert eine Auskunft !!??

  21. Hallo,

    ich habe eine Webseite bei der html-Dateien über cgi angesteuert werden. Da ich bei google&co nicht fündig geworden bin, stelle ich hier mal die Frage, wie der Code für den „Gefällt mir“- Button bei mir aussehen muss.
    In der index habe ich den Standartcode und das funktioniert auch. Nur nicht bei den Unterseiten wie z. Bsp. http://www.mein-bauportal.de/eintrag-9.html
    Dort wird eine 7 angezeigt, obwohl das keinem gefällt 😉
    Dasselbe in bei http://www.mein-bauportal.de/eintrag-1.html

    Vielen Dank und Grüße aus dem Norden der Republik.
    Thomas

    • Habe ich ja. Das funktioniert so aber nicht. Kann mode_rewrite dafür verantwortlich sein? Deshalb wird die 7 auf allen Katalogseiten angezeigt. Was ja nicht Sinn und Zweck ist. Ich weiß auch garnicht woher die 7 kommt. Denn niemandem gefällt das außer mir 😉

    • Den statischen Button kannst du einfach über den Generator genau so einbauen.
      P.S. Die Kommentare müssen erst freigeschaltet werden, musst also nicht so oft abschicken.
      Habe deine doppelten Kommentare mal gelöscht^^

  22. Hallo Pascal,

    ich habe ein Problem mit der Anpassung des Like-Buttons und ich hoffe, dass du mir helfen kannst.

    Und zwar habe ich unter meinen Artikeln eine neue Box mit Google Plus, Twitter und Facebook.

    Aber der Facebook-Button will sich einfach partou NICHT an die erste Stelle setzen lassen. Was mach ich falsch? Ich hab schon echt alles versucht und bin echt am verzweifeln >.<

    Hier eine Beispiel-URL, ganz runter scrollen: http://www.promicabana.de/daniela-katzenberger-bringt-memoiren-raus/

    Danke!
    Martin

    • Hi,
      also im Quellcode ist die Reihenfolge genauso wie sie auch angezeigt wird – daher solltest du einfach mal die Reihenfolge anpassen und checken, dass auch wirklich die richtige Datei hochgeladen wird.

  23. Guten Tag

    Ich würde gerne einen I Like Button auf meiner Joomla Homepage einbinden. Den Code zu generieren ist kein Problem, aber ich habe keine Ahnung wie ich den in die HP integrieren kann. Können Sie mir helfen?
    Grüsse

    Daniel

    • Vielen Dank für die Antwort, leider habe ich tatsächliche weder HTML Erfahrung noch Joomla Kentnisse. Wenn ich Ihnen den Benutzername und passwort geben würde, würden Sie das ev für mich machen ? Könnte ja per email die Angaben und den FB Code schicken, ich würde auch gerne dafür bezahlen, wenn Sie denke das das so gehen würde!

  24. ich will eine seite erstellen , aber ich muss ein gefällt mir button einstellen
    und bei mir ist alles englisch ich verstehe nichts und ich komm nicht klar

  25. ich habe eine frage ich habe auch eine facebook fanpage und ich möchte wissen wie man ganz außen auf der seite den gefällt mir boutten reinmacht um dan erst den inhalt der seite zu sehen ?

  26. Hallo!

    Erst mal ein grosses Lob an Eure Seite. Habe sie gerade entdeckt und muss sagen, dass die Antworten selbst mir als Laien und Anfänger – na ja, ich sage mal: zumindest verständlich erscheinen. Klasse!

    Nun zu meiner Frage: Wie schon erwähnt bin ich Anfänger und gerade dabei eine homepage mit Joomla 2.5.4 zu erstellen. Bestandteil dieser homepage soll u.a. eine kleine Gallerie sein, und ich möchte, dass man bei jedem einzelnen Bild „gefällt mir“ klicken kann, so dass das entsprechende Bild dann mit der Nennung der Domain bei Facebook (falls möglich ggf. auch bei anderen social media Diensten – natürlich entsprechenden zusätzlichen buttons) erscheint. Ist so etwas möglich? Wenn ja, wie funktioniert’s und ist das von einem Anfänger überhaupt zu beweltigen? Für Hilfe wäre ich sehr dankbar!

    Liebe Grüsse

    Ollie

  27. Hallo Pascal,

    danke für das ausführliche Tutorial. Was ich nicht verstehe ist, auf der Site die ich erstellt habe funktioniert der Like-It Button nicht für jedes FB-Profil. ZB das aktuell eingestellte (mein Test-Profil) funktioniert… geben ich aber eine andere ID (100000240289118) ein, kommt nur eine Fehlermeldung.

    Muss das FB-Profil _öffentlich_ sein um überhaupt zu funktionieren?

    Grüße
    Blazinoo

  28. Ich habe in meinem Facebook Acount 3 Acounts. Wie kann man für jeden einzelnen Acount einen gefällt mir Button einrichten?

    Viele grüße
    Stefan

  29. Hi,
    danke für die ausführlichen Anleitungen zum FB-Like Button und Open Graph. Habe da seit Tagen dran gesessen und nun klappts endlich 🙂
    Allerdings hab cih ein Problem mit der dynamischen Seitentitel-Generierung.
    Und zwar habe ich die Meta Tags in die header.php geschrieben (statisch), da das Einfügen in den HTML-Teil der jeweiligen Seite nicht funktionierte. Kann ich nun in der header.php den Titel und die Beschreibung dynamisch generieren lassen, bzw. diese beiden Meta Tags seitenspeziefisch überschreiben?
    Viele Grüße,
    Robin

    • Verwendest du WordPress oder ein ähnliches CMS? Wenn ja, such mal nach OpenGraph Plugins, damit kannst du die OpenGraph Metadaten pro Seite extra einstellen.

    • Das ist je nach Theme und Position an der du es ausgeben willst, ganz unterschiedlich, aber schau mal nach der single.php, page.php und / oder index.php

  30. Hallo Pascal,
    weißt du, ob man auf einer wordpress webseite mit einer Galerie, einzelne Fotos aus der Galerie mit einem FB like Button versehen kann?
    Beste Grüße
    Suse

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.