Like-Box für Facebook-Seite (Page) auf eigener Hompage einrichten

35 Kommentare Autor: Jürgen (jdo)

Facebook F-LogoVor wenigen Tagen haben wir gezeigt, dass es sehr einfach ist, den Facebook-Like-Button auf der eigenen Seite einzurichten. Eigentlich noch simpler ist das Einpflegen einer so genannten “Like-Box” für eine Facebook-Seite. Wir zeigen Ihnen Schritt für Schritt wie das geht und machen die Box sogar noch etwas hübscher. Mit dieser Anleitung sollten Sie in der Lage sein, einen Mögen-Kasten binnen fünf Minuten auf Ihren eigenen Internet-Auftritt zu zaubern.

Facebook Page ID

So einfach finden Sie die ID Ihrer Facebook-Seite.

Zunächst müssen wir die Page- oder Seiten-ID herausfinden. Dazu besuchen wir einfach unsere eigene Seite und finden eine Nummer in der Browser-Leiste. Dies ist unsere Page-ID. Sie können Sie entweder in die Zwischenablage kopieren oder aufschreiben, aber wir werden diese gleich brauchen.

Facebook Like Wizard

Mit dem Like-Box-Wizard ist der Kasten schnell erstellt.

Im zweiten Schritt besuchen wir den Like-Box-Wizard von Facebook und ersetzen die vorgegebene Nummer durch unsere eigene. Danach sollte sich auf der rechten Seite auch schon die Box ändern und durch ihre persönliche Facebook-Page ersetzt haben. Im zweiten Feld können Sie die Breite der Box bestimmen. Das dritte Feld bestimmt, wie viele Bildchen von Freunden, Fans oder Mögern angezeigt werden sollen. Mit dem Haken darunter könnten Sie ihren “Stream”, also was Sie auf der Facebook-Seite veröffentlichen in die Box einbetten. Den Teil mit dem Header zu erklären sparen wir uns einfach. Sie werden sehr schnell selbst herausfinden, was dieser Haken macht. Nun können Sie sich den Code anzeigen lassen und diesen in ihre eigene Webseite kopieren.

Den Code, beziehungsweise Höhe, Breite und so weiter können Sie übrigens nachträglich auch bearbeiten. Dazu brauchen Sie nicht jedes Mal den Mögen-Kasten-Zauberer aufsuchen.

Facebook Like Box Höhe Breite

Hier könnten Sie nachträglich im Code die Höhe und Breite der Box ändern, ohne den Wizard wieder bemühen zu müssen.

Ein Sache ist allerdings sehr hässlich, wie wir finden. Es handelt sich dabei um den Footer und das “Facebook social plugin”. Mit einem kleinen Trick kann man das aber wesentlich hübscher machen und diese Anzeige verstecken. Dazu packen wir die Facebook-Like-Box einfach in einen Container und nageln diesen auf eine bestimmte Höhe, die kleiner als die Facebook-Box ist, fest. Also zum Beispiel <div id=”bb_like_box” style=”height: 150px; max-height: 150px; overflow: hidden;”>. Somit haben wir das hässliche Anhängsel versteckt. Mit den Höhen-Angaben einfach so lange herumspielen, bis es passt. Allerdings fehlt nun die der Strich unten, was auch nicht besonders hübsch ist. Kein Problem, ein border-bottom=1px solid #<Farbe> im Stylesheet, übernimmt diesen Part. Sie sehen, es ist wirklich einfach, einen Facebook-Mögen-Kasten auf die eigene Seite zu platzieren. Gutes Gelingen!

Facebook social plugin

Das "Facebook social plugin" am Ende ist nicht hübsch, oder?

Facebook ohne social plugin

Ohne das hässliche Anhängsel sieht es besser aus.




 Alle Kommentare als Feed abonnieren

35 Kommentare zu “Like-Box für Facebook-Seite (Page) auf eigener Hompage einrichten”

  1. LARS says:

    und wie schaffe ich es das das ganze auch deutsch ist? also z.b. "gefällt mir" da steht?

  2. jdo says:

    Bei mir steht gefällt mir ... der Action-Tag sollte das eigentlich lösen action="recommend". Aber ich glaube, es kommt auch auf die eigenen Facebook-Einstellungen an. Im Moment werden laut Facebook nur die Verben like und recommend unterstützt.

  3. schremj says:

    Danke für die gute Anleitung. Die Page-Id aus der facebook URL meiner Seite funktioniert nicht - auch nicht in dem Wizard. 100001427784894

    Ist kein Vertipper drin oder so. Irgendeine Idee ?
    Grüße
    schremj

  4. jdo says:

    @schremj: Bist Du sicher, dass diese Nummer Deine ID für eine Seite/Page und nicht Die User-ID einer Person ist?

    Das geht nämlich:
    http://www.facebook.com/profile.php?id=100001427784894, und das ist eigentlich eine Person und keine Page (profile.php? ... ), da sehen die Links anders aus.

    Grüße,
    Jürgen

  5. bikershrek says:

    Tolle Beschreibung - nur leider ist das bei mir anders.
    Finde beim besten Willen keine SiteID - bei mir steht da statt einer Nummer - mein vollständiger Name.
    Und dieser funktioniert in dem Tool nicht.
    Weder als kompletter Link - noch alleine - nix geht.

    Kann bitte jemand helfen.
    Danke.

    • jdo says:

      Du hast schon eine Page (Seite) angelegt, oder? Eine Like-Box für den Namen/ das Konto selbst gibt es meines Wissens keine Like-Box.

      Grüße,
      Jürgen

  6. Phil says:

    Bezüglich der Frage wie man das Deutsch stellt:

    Füge hinter

    likebox.php?

    einfach locate=de_DE&

    ein. Das & Zeichen verknüpft dann den rest, danach kommt glaube die ID.

  7. bobblebobble says:

    Hallo

    Wie muss ich den code einbinden das es so schön aussieht wie bei euch auf der rechne seite die box ?

    div id=”bb_like_box” style=”height: 150px; max-height: 150px; overflow: hidden;”>.

    wo muss da mein code genau hin ?

    und wo in meiner Stylesheet muss der code hin ? border-bottom=1px solid #

    gruss

    • jdo says:

      einfach wie im Beispiel den Facebook-Code von dem div umschließen lassen facebook-code ... dann sollte das eigentlich klappen

  8. PiMp says:

    ich habe gehört man darf die box nicht veröffentlichen auf seiner seite.
    wegen datenschutz. kann man sich dagegen absichern ?

    gruss

    • jdo says:

      hmmm ... da die Page ja auch öffentlich ist und man dort alle Fans sehen kann, wüsste ich nun nicht, warum das nicht erlaubt sein sollte. Aber ich bin kein Anwalt und kann das leider nicht beantworten. Facebook sollte das wissen - vielleicht mal in deren FAQ stöbern.

  9. PiMp says:

    ich bekomme die box einfach nicht hin so schön klein und zentriert wie ihr sie hier habt.

    könnte ich eueren code eventuell haben so das ich nur meine id austauschen muss ?

    das wäre super nett.

    • jdo says:

      Ist die Mail-Adresse, die Du angegeben hast gültig? Die xbox[at]...
      dann schick ich Dir meinen Code-Schnipssel da hin

      Ich muss aber gleich weg, kann sein, dass ich erst heute Abend dazu komme ...

  10. Frank says:

    ich jab mich an die Vorgabe gehalten. Die Box wird mit zwar kleiner, jedoch wird der Footer nicht "weggedrückt" ???
    Schade, sonst ein toller Tipp
    Hat facebook da was "gedreht" oder bin ich nur zu dumm ?
    Vielleicht kann ich ja auch das Code-Schnipssel bekommen -wäre toll, wenn ginge ;-))
    hArzlichen Gruß

    • jdo says:

      Das wundert mich nun aber. Sollte Facebook was geändert haben, würde es auf meiner Seite ja auch nicht mehr funktionieren - deswegen schließ ich das mal aus. Ich helfe Dir gerne, schick mir doch bitte mal Deine Webadresse (sollten reichen, oder den Code an) die E-Mail-Adresse, die Du im Impressum findest.

      Grüße,
      Jürgen

  11. Hallo!
    Ich habe versucht die Facebook-Like-Box auf einer Website einzubauen, habe jedoch Probleme damit. Sie hat an Sich funktioniert, nur wurde die Box immer nur bis zu einer bestimmten Zeile angezeigt und obwohl ich die Höhe auf 800 gestellt hatte, hörte die Box mittendrin auf und man konnte die unteren Einträge gar nicht mehr bzw. sogar den ersten nur teilweise lesen. Kann mir jemand sagen, woran das liegt?

    Lieben gruß

  12. Steve says:

    Hallo, bin zufällig auf die Site gegoogelt und wollte mal Fragen ob dieser Fehler bekannt ist. Er erscheint immer wenn ich die URL unserer Site einsetze. Anscheinend hat Facebook wieder was geändert, denn eigentlich hatte ich die Like-Box schon erfolgreich in die Site eingebettet. Kennt jemand die Fehlermeldung und evtl. auch eine Lösung dazu?

    Plugin cannot be rendered with the specified parameters.

    Danke vorab
    TPU

    • jdo says:

      Der Fehler kann auftreten, wenn Du zum Beispiel statt einer Page eine Gruppen-URL eingiebst. Hilft das?

      • Michael says:

        @jdo: Danke soweit für die Auskunft. Allerdings hilft diese Info nur relativ, denn es hat auch bei uns vorher mit einer Gruppe funktioniert. Erst seit einigen Tagen erscheint statt der Box plötzlich diese Fehlermeldung!

  13. Hendrik says:

    War bei mir das Gleiche.. Kam zuletzt auch immer der Fehler.. Habs nun aber nochmal neu gemacht und bei ID nicht nur die Nummer sondern die komplette URL genommen. Nun funktionierts wieder!

  14. yannitro says:

    also ich bin eher ein einfacher pc benutzer. wo füge ich denn den code überhaupt ein 😛 ???? ich check das nicht

    • jdo says:

      Auf Deiner Webseite, da wo es hinsoll irgendwo zwischen und <body> und </body>

      • yannitro says:

        ok. also ich glaub ich bin einfach zu dumm aber, wäre cool wenn du mir detailierter helfen könntest 😛

        ich habe diesen iframe code kopiere den und füge den wo genau ein ? checks nich tut mir leid.

        • jdo says:

          einfach in Deine Webseite ... da müssen ja irgendwo öffnende und schließende html- und body-Tags sein. Und genau in den Bereich gehört auch der Code ... recht präziser geht es leider nicht, weil wenn Du hier nicht weisst, wovon ich spreche, kann ich Dir nur wärmstens das ursprünglich von Stefan Münz bereitgestellte SelfHTML (http://de.selfhtml.org/) ans Herz legen. Es ist im Prinzip, wie jeden anderen iFrame in eine Webseite einfügen.

          Alternativ kann ich Dir meine unfreien Dienste als Web-Entwickler anbieten und ich erledige das für Dich. Wenn diese Option in Frage kommt, kontaktiere mich bitte unter presse [at] bitblokes.de.

  15. ben says:

    Hallo,

    wie kann ich die Like-Box auf Deutsch umstellen??

    Hab meinen Code (XFBML) von folgender Seite bezogen:
    developers.facebook.com/docs/reference/plugins/like-box/

    Besten Dank für Antwort!

  16. shinobi says:

    Ich frag mich jetzt seit zwei Tagen, ob ich wirklich der einzige bin, der seiner Seite (Unternehmensseite) einen Namen gegeben hat, denn ich finde im Internet nur genau solche Themen / Fragen und Hilfestellungen und nirgendswo wird gefragt "Wie komme ich an die ID meiner Facebook Seite und nicht Profil?".

    Ich mein, so wie du es erklärt hast (einfach aus der Adressleiste es auslesen) ist es ja nicht (wenn man schon einen Namen vergeben hat und anscheinend unter 25 Fans nur bestückt ist). Oder nehmen mich meine Browser auf den Arm und zeigen MIR nicht das was allen anderen angezeigt wird?

    • jdo says:

      der Artikel ist ja schon etwas aelter und Facebook aendert auch alle 5 Minuten irgendwas. Fuer die like box brauchst Du gar keine ID mehr. Klick mal auf den Link mit dem Wizard. Da kannst Du einfach di URL Deiner Seite eingeben.

  17. shinobi says:

    Ja das stimmt mit den Änderungen alle 5 minuten (vorallem da jetzt auch Google langsam aber sicher Facebook einholt - zumindest von Funktionsumfang her).

    Ja, das mit der Like Box stimmt auch, aber mein Problem mit der ID bezieht sich nicht auf die Like Box, sondern einfach nur das typische f von Facebook als Link zu meiner Facebook Seite. Dafür brauche ich die ID, damit es auch ohne 25 Fans und somit ohne angemeldet sein des Users auf die Seite zu kommen (und nicht zur Anmeldeseite). Ja, das hatte ich vor fast einem Jahr gemacht (wo ich noch der Seite keinen Namen vergeben hatte) und es hatte funktioniert.

    Leider komm ich nicht an meine ID ran und ich will weder 25 Fake-Fans gestalten, noch um Fans betteln 😉

    Aber um kurz zur Like Box zu kommen - da hab ich das Problem, dass ich da auch vor ca. einem Jahr ein Like Button ohne Zähler usw. und mit einem selbsterstelltem Image / Button (mit samt Hover-Effect) gemacht hatte (was auch bei den Tests gut funtkionierte) und jetzt, entweder stelle ich mich jetzt blöder an oder auch da hat Facebook etwas geändert und ich kriege es nicht mehr hin.
    Ironisch ist nur, als ich mich vor einigen Monaten mal kurz mit Google Plus beschäftigt hatte, regte ich mich auf, dass das mit Facebook ging und Google nicht - und jetzt ist es anscheinend genau umgekehrt.

    Das Problem ist mit den beiden (Google und Facebook), dass sie ein betimmtes Erscheinungbild vor geben und da nur ein klitze kleines Spielraum einräumen - man kann bisschen mit der Größe hantieren, die Zahlen an der Seite oder Oben / Unten anzeigen lassen und bei FB die Auswahl light / dark - für mein Geschmack, ist das noch ein absolutes Defizit.

    Ich würde mich freuen, wenn jemand da schon erfolgreich deren Gestaltungs- und Vorgabenrahmen gesprengt haben sollte und evtl. verratet wie. 😀

  18. shinobi says:

    Das mit der ID hat sich erledigt - hab auf´m Server ne Zeile gefunden, wo es noch drin stand und natürlich getestet, aber es funktioniert nicht MEHR - anscheinend hat FB das nun endgültig gekillt 🙁

  19. Oliver says:

    Hallo JDO,
    bei der fb-Like-Box bin ich auf ein Problem aufmerksam gemacht worden. Es scheint "nur" Mac-Benutzer zu betreffen. Wenn man als Besucher einer Seite mit fb-Like-Box gleichzeitig mit dem Admin der entsprechenden Page "befreundet" ist, werden nicht die Stream-Meldungen der Page in der Box angezeigt, sondern die "privaten" Pinwandeinträge vom Profil des Admins.
    Dies ist mir aus verlässlicher Quelle berichtet worden, bin selbst PC-Anwender.
    Meine Fragen: Ist dir dies Problem bekannt? Tritt das regelmäßig so auf oder nur in bestimmten Sonderfällen? Gibt es Lösungen?
    Bin gespannt,
    Oliver

    • jdo says:

      Hallo,

      uff ... das weiß ich nicht ... der Artikel ist schon zwei Jahre alt und seit Facebook immer mehr und mehr Daten sammelt habe ich die Like-Box wieder von meiner Seite entfernt.

      Dass es ein Mac-spezifisches Problem sein soll ... eigentlich hängt es ja vom Browser ab ... aber wie gesagt, ich weiß es nicht und hab auch keine einfach Gelegenheit, das zu testen.

      Dennoch danke für den Hinweis.
      Grüße, Jürgen

  20. madesign says:

    Hallo, danke für die Anleitung.Was mich interessieren würde ist wie ich "LIkes" auf meiner Facebook Seite einsehen kann. Immer wenn ich auf den entsprechenden Link klicke bekomme ich die Meldung ich mag keine anderen Seiten. Sind nur Facebook Seiten zu sehen oder auch normale Seiten mit Like Link?

    Grüße, Michael