Facebook “Like”-Button auf eigener Homepage einsetzen

26 Kommentare Autor: Jürgen (jdo)

Facebook F-LogoFacebook hat wieder mal neue Funktionen vorgestellt. Einer der meist beachteten ist der universelle Like-Knopf – auf deutsch “Gefällt mir”. Das ist eine tolle Sache, weil so brauchen Besucher einer Webseite nur auf das Knöpfchen zu drücken und schon sehen alle Facebook-Freunde, was man gerne mag. Das einzige Problem ist, dass Facebook mal wieder nicht genau erklärt, wie sich das Ding dynamisch auf einer Webseite einsetzen lässt. Deswegen haben wir hier eine Schritt-für-Schritt-Anleitung für PHP zusammengestellt.

Facebook Application ID anlegen

Mit dem Wizard ist eine App-ID in 5 Sekunden angelegt.

Dieser Schritt ist anscheinend nicht (mehr?) zwingend notwendig. Der Wizard scheint seit einiger Zeit sowieso nicht mehr zu funktionieren. Zunächst einmal brauchen wir eine so genannte App-ID. Diese legen wir recht komfortabel mit der Hilfe von Facebook an. Hinter dem Link befinde sich ein Wizard, mit dem Sie nach dem Ausfüllen der drei Formularfelder im Besitz einer nagelneuen App-ID sein sollten.

Um XFBML zu nutzen, müssen wir die JavaScript-Bibliothek von Facebook referenzieren. Dazu fügen wir am besten direkt vor dem abschließenden </body>-Tag folgenden Code ein, wobei die Stelle your app id mit der tatsächlichen App-ID auszutauschen ist.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};

(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Nun müssen wir nur noch den Like-Button an einer geeigneten Stelle anlegen. Nachdem der Knopf dynamisch sein soll, fragen wir einfach den Server nach der aufgerufenen URI und übergeben diese dem Like-Button.

<fb:like href="<?php echo "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

Was man hier für Einstellmöglichkeiten hat, findet man ganz gut mit dem Like-Generator von Facebook für einzelne Seiten heraus. Als Layout könnte man zum Beispiel standard oder button_count anzeigen. Wer show_faces auf true stellt, der bekommt neben dem Namen noch das Profilbild des Facebook-Anwenders angezeigt.

Siehste, Facebook! Erklärungen könnten so einfach und verständlich sein, ohne lang sein zu müssen und auf gefühlte 400 andere Artikel zu linken.

Wordpress Facebook Like-Button Footer

So initialisieren Sie die JS-Bibliothek von Facebook

Facebook Like Button WordPress Single

Einfach einfügen, wo Sie möchten.

Wer das Ganze in WordPress auf den Einzel-Seiten ohne ein schwindeliges Plugin benutzen möchte das mit der nächsten WordPress-Version wieder nicht mehr funktioniert 🙂, der fügt das erste Code-Schnipssel in seinem Template einfach in der Datei footer.php vor dem </body>-Tag ein. Den zweiten Code eben da, wo man ihn haben möchte. BITblokes.de hätte ihn gerne unter jedem Einzel-Artikel und deswegen kommt der Like-Schnippsel an geeignete Stelle in die Datei single.php. Und nun nehmen wir uns das Recht heraus, unseren eigenen Artikel als Erster zu “Liken”!




 Alle Kommentare als Feed abonnieren

26 Kommentare zu “Facebook “Like”-Button auf eigener Homepage einsetzen”

  1. Basti says:

    Bei mir nimmt er irgendwie die Website nicht an? Ich bekomme als Fehlermeldung immer invalide URL. Irgendeinen Lösungsvorschlag?

  2. jdo says:

    Wo bekommst Du invalid URL? Wenn Du ein bisschen genauer beschreibst, was Du bisher gemacht hast und wo was nciht funktioniert, kann ich vielleicht helfen.

  3. Tice says:

    Habe das gleiche Problem. Invalid URL.

    Beim Anlegen gibt es ja die drei Felder:
    Site name: Meine Seite
    Site URL: http://www.meineseite.de
    Sprache: Deutsch

    Wenn man dann "Anwendung erstellen" klickt erscheint in rot darüber "Invalid url". Sonst nichts - auch kein Hinweis warum eine normale URL als "invalid" bezeichnet wird.

  4. jdo says:

    Wo erscheint das invalid URL? Bei Facebook direkt? Das hab ich auch schon mal gesehen. Probier mal diese Varianten:

    http://www.example.org/
    http://www.example.org?ignore=1 oder
    http://www.example.org/?ignore=1

    Klappt es dann? Und manche Dienste zicken, wenn Du Großbuchstaben in der URL verwendest. Mich würde echt auch interessieren, wo der Fehler liegt.

    Gruß,
    Jürgen

  5. Andy says:

    das obige problem ist meines erachtens der schrägstrich am ende, denn ein link zu einer bestimmten datei nimmt er bei mir nicht.

    ich hab leider auch ein problem, denn bei mir führt facebook die registrierung nicht zu ende und endet einfach nach einer zeit lang mit einem abbruch

    kann das problem vl jemand nachvollziehen?
    also obs grad ein fehler von FB ist, oder ob da sonst noch was falsch gemacht wird?

    • jdo says:

      Ich hatte vorhin auch versucht eine Applikation zu registrieren und hab den selben Effekt beobachtet. Es gab einen Timeout, die Applikation wurde aber trotzdem angelegt. Vielleicht hat Facebook heute etwas Schluckauf 🙂

  6. Matthias says:

    Wie es scheint ist der Schluckauf mittlerweile zur Magenverstimmung geworden. Statt die App zu kreieren gibt mir Facebook nur eine (nicht näher spezifizierte) Fehlermeldung... habe diverse url-Varianten probiert und bin grad etwas ratlos...

  7. skietz says:

    wenn der die Application trotzdem angelegt hat, wo finde ich dann die AppID??? Ich brauche die für mein I Like Button...

  8. Hugo says:

    sehr cool und somit auch I like!

    werde ich die tage bei mir mal ersetzten!

    cya

    HUgo

  9. Chris says:

    Hi!

    Habe es gerade ausprobiert, und habe ebenfalls die Error-Seite von Facebook bekommen.

    Dann habe ich einfach im Script die App-ID entfernt (wozu eigentlich auch?). Und was soll ich sagen es klappt.

    ich kann den Button klicken und einen Kommentar eingeben, danach wird es in Facebook angezeigt. Die App-ID ist doch wirklich nur wenn man eine Page haben möchte, oder?

    Gruß
    Chris

    • jdo says:

      Vielleicht haben die das mit der App-ID geändert. Als ich den Artikel geschrieben hatte, brauchte man jedenfalls eine. Ich werd das mal nachprüfen und bei Zeiten ändern 🙂

  10. Eve says:

    Aha, und gibt´s sowas dann auch in html oder braucht man java script?

    • jdo says:

      Da wirste um JavaScript nicht rumkommen. Allerdings musst Du nicht viel selbst machen, weil ja eigentlich alles von Facebook bereitgestellt wird. Oder meinstest Du PHP statt JavaScript? Dann einfach diesen Part austauschen href="" mit href="meine-seite.html"

  11. Manuel says:

    Wenn man aufLike klickt und dann über seinen Namen hovert, pop darunter noch so ein Fenster auf, in dem man seinen "Like" noch Teilen kann. Kann man das abstellen?

    • jdo says:

      Hallo Manuel, da diese Funktion von Facebook so bereitgestellt wird, hat man da wahrscheinlich weniger Einfluss drauf.

      Gruß,
      Jürgen

  12. Nicklas says:

    Hi leute...will auch einen Ilike button....habe die kleinigkeiten bearbeitet Farbe usw. dann auf "get code" geklickt.....jetzt steht da ein saulanger iframe code...was soll ich damit machen?? will einfach nur einen kleinen ilike button auf meien quiz-planet-quiz -.-

    • jdo says:

      Den saulangen iframe code fügst Du nun genau da ein, wo Du den Facebook-Button haben möchtest 🙂

  13. Nicklas says:

    thx...aber kapiers immer noch nicht ^^ will ihn einfach unter oder neben der überschrifft bzw. quiznamen oder bild haben.....den code einfach iwo auf die seite ziehen..?

    • jdo says:

      Verständnisfrage: Möchtest Du den Button auf Deiner eigenen Homepage einbaun oder irgendwo anders?

      Wenn woanders, dann muss Dir das Portal natürlich erlauben, iFrame-Code einzubetten.

  14. Nicklas says:

    Also ich habe auf Facebook per "Quiz-Planet" ein quiz erstellt....dann kamen da tipp u.a. der link für die Like Box...habe da dann alles eingestellt farbe etc. vom button...dachte man kann den dann einfach iwie auf die seite draufziehen..ist ja leider nicht so...würde den button halt gern unter dem bild von meinem quiz haben...

  15. Nicklas says:

    da kamen dann tipps* wie die seite vom quit öfter aufgerufen wird

  16. Nicklas says:

    ohh...dachte würde doch bisschen leichter gehen....endlich einen gefunden der sagt das ich noch programme brauche...webdesigner 6 oda so..hoffe damit klappts..aber thx trotzdem =)

  17. Programme says:

    vielen Dank ,

    Ich habe schon dannach langer Zeit gesucht

  18. Hallo,
    leider funktioniert das Anlegen der APP-ID über die Entwicklerseite von Facebook nicht mehr. Kann mir jemand einen Tipp geben, wie ich trotzdem an die ID komme?

    Danke
    Kaffee-Fritze