Die Presse

Sophiadesigns Blog

Internes & PMs · Sophiadesigns Blog · In der Presse

How-to ‘Like’ / ‘Gefällt mir’-Button Code von Facebook in die eigene Webseite einbinden

Update (13.11.2010): Fast 1000 Besucher im Monat auf diesen Artikel – das ist offiziell der Hammer! Jetzt würde uns aber interessieren, wo Sie den Button so verwenden – und über besonders coole Projekte berichten – mit Interview und allem Drum und Dran. Hinterlassen Sie uns einfach einen kurzen Kommentar und dann melden wir uns bei Ihnen!

Update (05.07.2010): Und wer den Button besser anpassen möchte, kann mal hier reinschauen, ob er was nettes findet.

Der neue “Gefällt mir”-Button für Webseiten ermöglicht, dass Ihre Leser per Klick auf den Button ihr Gefallen an dem Artikel nicht nur ausdrücken, sondern auch per kurzem Statusupdate dieses in Facebook kommunizieren.

Damit ist von Facebook ein weiterer Schritt ergriffen worden, über das soziale Netzwerk an sich heraus zu wachsen und die Fühler auch in andere Bereiche des Internet-Lebens auszustrecken.

Doch es gibt nicht nur positives von den auf der f8 artikulierten Zielen zu berichten. So schreibt online-affairs:

Damit wird Facebook zum personalisierten, allgegenwärtigen Beobachter des Internets, da die Verbindungen zwischen den Menschen nicht nur innerhalb der Social Networking Site, sondern darüber hinaus Interessen bezogen über andere Webseiten möglich wird.

Einbindung des Facebook Like-Buttons

Aber wie bindet man den Like-Button denn nun ein? Dazu schreiben Sie einfach folgenden Text an die entsprechende Stelle im Quellcode Ihrer Seite…
Bababa, nicht einfach nur Code raus-kopieren! Roten Text oben beachten – danke!

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

Wichtig ist weiterhin, dass Sie ordentliche Meta-Tags im HTML-Head Ihrer Seite verwenden um damit Facebook zu ermöglichen die Informationen für das Status-Update zu sammeln. Ersetzen Sie dann noch die Beispiel-URL durch die zu likende und fertig. Das ganze sieht dann so aus:

- via Facebook for Web Sites – Facebook-Entwickler.



Von in Blog am 25. April 2010 mit 24 Kommentaren »

  1. Hahnefeld sagte am 15. Juni 2010 #

    Statt dem Button würde es mir gefallen, wenn ich das als Text angeben könnte. Also keine Grafik, nur ein Text,d en ich definieren kann. Ist sowas auch möglich?

  2. P. M. W. Hoffmann sagte am 15. Juni 2010 #

    Das wäre mir nicht bekannt, da der Button ja nicht bei Ihnen auf dem Server liegt, sondern über facebook aufgerufen wird. Ich hab den Artikel oben mal mit einem Link geupdatet. Das können Sie sich ja mal angucken.

  3. Konstantin sagte am 16. Juni 2010 #

    Weiß zufällig jemand wie man heraus bekommt, wer auf den Button schon geklickt hat? Hier sind es ja 3 Personen – nur wer genau?

  4. P. M. W. Hoffmann sagte am 16. Juni 2010 #

    Wenn Ihre Freunde “Liken” müßten Sie das je nach Formatierung ja direkt am Button sehen, z.B. “Max Mustermann, Ihnen und 3 anderen gefällt das”.

    Ansonsten hat wahrscheinlich nur facebook die volle Kontrolle über den Output der Buttons, insbesondere weil ja der Button nicht mit Ihrem Account in irgendeiner Weise verknüpft ist.

    Vielleicht hilft Ihnen das hier noch:
    http://answers.yahoo.com/question/index?qid=20100519201700AAahgXq

  5. Konstantin sagte am 16. Juni 2010 #

    Ja der Yahoo-Link hilft leider auch nicht weiter. Da steht ja nur das was man eh schon sieht. Ich vermute jetzt irgendwie auch, dass man die fremden Personen so einfach nicht ausfindig machen kann.

    Schade, falls jemand doch etwas findet, würde ich mich freuen.

  6. Alexander sagte am 21. November 2010 #

    Hab es nun auch bei meiner Seite genuzt.

    Vielen Dank für die kleine aber feine Erklärung ;)

  7. Rainer sagte am 28. Dezember 2010 #

    Super…mein Ei-Leik.de hat zwar reichlich
    Like Button, aber auf der Gewinnspiel Seite hat mir genau dieser hier gefehlt.

  8. Kalibo sagte am 4. März 2011 #

    Danke, habe auf der Developper-Seite nur den engl. “Like”-Button gefunden…
    Ein SCHRITT WEITER in der Nutzung des SocialMediaNetworks!

  9. nicole sagte am 23. März 2011 #

    ich möchte ihn für meine HOmepage nutzen für Bernsteinschleiferei :-)

  10. kringl96 sagte am 26. März 2011 #

    @kalibo Ich habe meinen Button bei http://www.gefällt-mir-button.de erstellt der ist auf Deutsch.
    Eurer kringl96

  11. kringl96 sagte am 26. März 2011 #

    Achso und nutzen tue ich den auf meine freggers homepage
    http://freggers-times.egoditor.com/

  12. a sagte am 12. Juni 2011 #

    Ich habe es auf meinem 90210 Blog eingebunden!

    90210de.blogspot.com

  13. Elmar Thompson sagte am 14. September 2011 #

    Endlich hat die Einbindung auf http://www.ethnoherbarius.de/ geklappt, bei dem Code direkt von Facebook gab es immer Fehler. Danke an Sophiadesigns.

  14. franziska sagte am 2. November 2011 #

    Hey, das klingt jz sicherlich doof, aber ich weiß nicht wo ich das einfügen soll (also html) ich weiß das es in den Quelltext kommt, nur wo finde ich den und wie kann ich den bearbeiten?
    Dankeschön :-)

  15. P. M. W. Hoffmann sagte am 2. November 2011 #

    Hi Franziska,

    was verwendest du denn für eine Software um deine Webseite zu pflegen? Am Besten postest du mal deine Seite, dann kann ich dir eventuell am schnellsten sagen, wie es geht.

    Grüße,
    Philipp

  16. Franziska sagte am 2. November 2011 #

    Ich habe keine Homepage oder so.. ich will das bei meiner Facebookseite drauf machen… aber ich komm nicht weiter, ich dachte das wäre gaanz leicht und nicht so schwer… :(

  17. P. M. W. Hoffmann sagte am 11. November 2011 #

    Auf die Facebook-Seite selber kannst du das leider nicht machen :) Da gibt es ja den “Teilen”-Button für Fans und den “Gefällt mir”-Button, wenn die Leute noch keine Fans sind.

  18. Schumann sagte am 7. Dezember 2011 #

    Leider kommt bei mir diese Fehlermeldung wenn ich den Button anklicke:

    “Mit Facebook Platform Opt In ist ein Fehler aufgetreten. Bitte versuche es später noch einmal.”

  19. Maikel sagte am 4. August 2012 #

    moin,
    wie ist das, habe hier n link zu ner website, die verspricht,, das ganze zu generieren: http://www.gefaelltmirbuttoneinbinden.com
    funktionniert das wierklich? kann ich den button damit ohne probleme einbinden auf meiner seite?

  20. Carina sagte am 16. August 2012 #

    Hallo ich verzweifle, ich möchte die Facebook Like Buttons und Pinterst und Twitter unter meine Artikel einbauen, aber schaffe es nicht – könnt Ihr mir helfen? Tausend Dank

  21. Aveleen Avide sagte am 3. November 2012 #

    Leider hat dieser Link nicht funktioniert (wird nicht angezeigt und ich habe mich aus Facebook und blog.de ausgeloggt und je wieder eingelocht – aber nichts ist passiert):

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/de_DE/all.js#xfbml=1″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    und bei diesem hier kam dann ein Fehler (parisen-Fehler oder so ähnlich):

  22. Aveleen Avide sagte am 3. November 2012 #

    den hatte ich vergessen in meine vorherige Nachricht reinzusetzen:

  23. Aveleen Avide sagte am 3. November 2012 #

    oh … der wird hier nicht angezeigt

  24. Sophiadesigns sagte am 3. November 2012 #

    Hallo Aveleen,

    versuch mal hier deinen Button-Code zu holen. Ich habe jetzt nicht geguckt, ob an deinem Code was falsch ist, aber vielleicht ist der Code von mir oben veraltet. Wenn der offizielle aktuelle facebook-Code auch nicht funktioniert, dann liegt’s wahrscheinlich an blog.de :)

    Viel Erfolg noch,
    Philipp


Name (erforderlich)
e-Mail (erforderlich)
URL (no no-follow)
Kommentar (erforderlich)
XHTML: Diese HTML-Tags dürfen Sie verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>