Hallo liebe/r Leser/in,
ich habe ganz frisch mein mini CMS mit dem Namen simpleCE veröffentlicht und würde mich freuen, wenn du dir mein System ein mal anschauen würdest. Die Info-Seite ist unter simpleCE.com (englisch) zu finden, ein paar Kurzinfos auf deutsch gibt es in diesem Artikel.
Facebook gefällt mir / like Button in Webseite einbinden
verfasst von Pascal Bajorat, veröffentlicht am 5. Oktober 2010 und 81 mal kommentiert
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.
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 http://www.webdesign-podcast.de mit einem “gefällt mir” versehen wollen:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webdesign-podcast.de&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&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="http://www.facebook.com/plugins/like.php?href=<?= $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&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="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&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!
Related posts:
- Fonts in Webseiten einbinden
- The Social Network – FaceBook Kinofilm
- Suchmaschinenranking der eigenen Webseite ermitteln und optimieren
Flattr
Hat dir dieser Artikel, Video-Podcast oder Tutorial gefallen? Dann würden wir uns über deinen Klick auf den Flattr Button freuen. Du hast noch keinen Flattr Account? Hier kostenlos registrieren.
Anzeige - Hier werben…
[...] Read more here: Facebook gefällt mir / like Button in Webseite einbinden, PHP … [...]
[...] here to see the original: Facebook gefällt mir / like Button in Webseite einbinden, PHP … Share and [...]
[...] P.S. Wer selber einen Facebook “gefällt mir” Button auf seiner Webseite einbauen möchte, der kann dieses Tutorial verwenden: Facebook gefällt mir / like Button in Webseite einbinden [...]
[...] ein paar Tagen habe ich euch gezeigt wie man den allseits bekannten Facebook “gefällt mir” / like Button in eine Webseite integrieren kann. Doch auch der Twitter ReTweet Button mit dem schnell mal ein Tweet über die gerade besuchte [...]
[...] erste Artikel zum einbinden eines Facebook “gefällt mir” bzw. like Buttons ist aktuell der meistgelesenste Artikel in diesem Blog. Da euch dieses Thema scheinbar [...]
[...] Oktober 2010 habe ich hier den Artikel “Facebook gefällt mir / like Button in Webseite einbinden” veröffentlicht und seit diesem Tag gehört dieser Artikel Tag für Tag zu den [...]
[...] Die Antwort ist recht einfach. Über das Plugin sociable hatte ich wechselweise alle möglichen weiterleitenden Dienste ausprobiert und eingebunden, und nur zwei haben tatsächlich spürbar zu meinem Blog-Marketing beigetragen: Twitter und Facebook. [...]
[...] ersetzt werden, wie zum Beispiel Empfehlungen durch Googles Plus One Button oder den “gefällt mir” Button von Facebook. Noch aber haben Backlinks eine ausreichende Wertigkeit, dass es sich nicht nur lohnt sich mit [...]
Kommentar schreiben
Webdesign Podcast auf Facebook
Newsletter
Immer auf dem neusten Stand bleiben, mit unserem Newsletter. Einfach E-Mail eintragen und los geht's
Anzeigen - Hier werben…
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!
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
Einwandfrei! Klappt super, auch unter Joomla und WordPress. Vielen Dank für deinen Service!
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…
Am Besten schmeißt du den Code am Ende des Maincontent-Bereichs in dein Joomla! Template, also ja in die index.php vom Template
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?
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
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?
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
Okay, jetzt weiß ich was du meinst. Dazu benötigst du Open Graph, damit das funktioniert. Sieh dir mal diese Doku von Facebook an: http://developers.facebook.com/docs/opengraph
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!
Der iFrame Code stellt sich automatisch anhand der Standard Sprache in deinem Browser ein.
Der Browser ist bereits auf Deutsch eingestellt. Woran kann es sonst noch liegen?
Überprüfe noch einmal ganz sicher die Einstellungen in deinem Browser, nur weil er deutsch ist heißt das nicht, dass er als Standard Sprachcode nicht doch z.B. “en” überträgt.
Des Weiteren kannst du probieren an die Parameterliste noch “&lang=de” anzuhängen
Jetzt klappts – musste im Quellcode die Endung en_US auf de_DE ändern. Danke für die Hilfe.
Okay, dann hast du aber nicht den iFrame Code sondern den XFBML Code verwendet, ich bin von dem iFrame Code ausgegangen, den ich auch oben als Beispiel aufgeführt hatte.
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?
Ja klar das geht, lies dir einmal den Artikel: Facebook “gefällt mir” / like und Open Graph durch, da ist alles erklärt, was du noch zusätzlich brauchst: http://www.webdesign-podcast.de/2011/01/08/facebook-gefallt-mir-like-und-open-graph/
Viel Spaß damit
kann man die AdminSetien-Ausgabe nicht unterdrücken ?
http://www.fewo-balogh.de/index.php?m=1&c1=4
Was genau meinst du mit “AdminSeiten-Ausgabe” – Der eingebundene Code sieht doch soweit gut aus.
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
Hallo Frank,
ich kann leider keinen Fehler finden.
Weder der Facebook URL Linter zeigt Fehler: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.fewo-balogh.de%2Findex.php%3Fm%3D1%26c1%3D4
Noch kann ich Fehler sehen, wenn ich selber auf den gefällt mir Button klicke. Sowohl auf deiner Seite und in meinem Facebook Profil sind alle Angaben korrekt und so wie du es dir vorgestellt hast.
Ich kann also keinen Fehler finden und auch deine Fehlerbeschreibung nicht nachvollziehen. Bei mir funktioniert alles: Getestet in Safari 5
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
Danke, klappt jetzt alles soweit
Super, woran lag es denn? Weil wie gesagt, bei mir waren ja keine Fehler zu sehen.
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)
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
Was mit PHP möglich wäre, ist das du mit Hilfe eines bestimmten Kriteriums entweder die eine oder die andere Angabe einbindest, siehe: http://php.net/manual/de/control-structures.if.php
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
Mal den Facebook Linter testen: http://developers.facebook.com/tools/lint/und damit die Fehler suchen.
Hallo
Danke für die zügige Antwort. Leider kann ich mit den Angaben vom Linter nicht viel anfangen. Wäre nett, wenn du mal kurz drüber schauen könntest. Vielen Dank!!
Jens
Hm um welche Seite geht es denn überhaupt? Die mit deinem Namen verlinkte?
Da könnte z.B. der fehlende doctype ein Problem sein: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fight-academy-merseburg.de%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
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
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
Ja genau so ist es: Fanpage und Inhalte sind getrennt – Es gibt extra Buttons für Fanpages und es gibt einen Extra Button für Inhalte, diese werden mit OpenGraph allerdings wie eine Fanpage behandelt. Sieh dir mal diesen Artikel an: http://www.webdesign-podcast.de/2011/01/08/facebook-gefallt-mir-like-und-open-graph/
Danke für die schnelle Antwort!
das ist ja schade… dann werden wir wohl bei den fanpage buttons bleiben.
Hat Facebook auch was in richtung W3C, im iFrame document sind keine tags, css müll, damit versaut man sich den ersten Platz bei google.
Ja, einfach mit JavaScript einbinden, sieh dir mal den XFBML des Generators an.
Immer wieder das selbe, das brauch doch einfach kein Mensch mehr
Naja du musst es doch nicht lesen, oder? Die Zugriffszahlen auf diesen Artikel zeigen jedoch, dass es wohl doch Menschen gibt die es brauchen!
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… ?
Mit Open Graph, schau dir mal den weiterführenden Artikel hier an:
Facebook “gefällt mir” / like und Open Graph
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ß
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.
super, danke
Paul
Hallo, wie kann ich den Facebook “gefällt mir” Button so realisieren, dass nur der Button und rechts daneben die Zahl/der Counter zu sehen sind?
Gruss, tommi
Hi, bitte über den Generator erstellen -> https://developers.facebook.com/docs/reference/plugins/like/
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
Hallo, ich möchte meine Seite bei Facebook bewerben, indem Besucher meiner Website auf den Button “like” klicken können und damit den Button auf meiner Facebookseite auslösen.
Anders formuliert: wer auf http://www.igel-mizzi.de den Button anklickt soll automatisch die Anzahl der “gefällt mir” auf http://www.facebook.com/pages/Igel-Mizzi/219525004758323 erhöhen.
Geht soetwas mit einem Code?
Beste Grüße
Andre
Nein, dazu brauchst du so eine Box wie bei uns rechts in der Seitenleiste.
Vielen lieben Dank! Wie komme ich zu diesen Zauberkasten und wie kann so eine tolle Sache in Flash integriert werden?
Liebe Grüße
Andre
Das Plugin bekommst du über den Link, wo es auch den gefällt mir Button gibt, du musst nur die andere Box wählen
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 !!??
Tut mir leid, den Baukasten kenne ich leider nicht – kann ich nichts zu sagen…
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
Du musst in dem Fall die URL dynamisch einsetzen, siehe PHP Beispiel.
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
Wollte nochmal nachfragen wie das bei html in cgi ist.
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^^
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.
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
Hi,
einfach im Template an der entsprechenden Stelle einbauen, etwas HTML Erfahrung Vorausgesetzt…
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!
Hi,
ja klar geht das musst mir nur per Email mitteilen um welche Seite es geht.
Dann klären wir das ab.
Beste Grüße
Pascal
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
Guck mal im Quelltext deines Codes nach einem “en” und änder es in “de”
hallo,
ich habe meine homepage mit 1&1 baukasten ertellt und würde gerne den fb-like button einfügen. wie kann ich das am besten ?
lg
Mit dem Baukasten von 1&1 habe ich leider keinerlei Erfahrung, ggf. mal da beim Support nachfragen…
Wie schaut denn die dynamische variante für python django aus ?