Facebook Page Plugin in Webseite einbinden – Neue Like Box

Achtung (seit 2016): LG Düsseldorf: Like-Button und Social-Plugins sind rechtswidrig (FAQ zum Urteil) Entscheide selbst, ob du die folgende Anleitung verwenden willst und das Risiko eingehst.


Ab dem 23. Juni 2015 wird sich die Like Box so wie wir sie kennen verabschieden und in ein neues frisches Design umwandeln. Laut Facebook bedarf es keiner Änderung, denn das „Upgrade“ wird automatisch durchgeführt. Der Code bleibt also derselbe.

Wer noch kein Facebook-Plugin in die Seite eingebunden hat, kann das hier nachholen: https://developers.facebook.com/docs/plugins/page-plugin

Die Vorteile des neuen Facebook Page Plugins

  • Der Call-to-Action Button ist (sofern er auf der Facebook-Seite eingerichtet ist) integriert
  • Die Seite kann mit einem Klick geteilt werden
  • Das Plugin wird eine schnellere Ladezeit haben

Über das Design lässt sich streiten, jedoch wird deutlich, dass nicht das komplette Titelbild sichtbar ist. Achte daher darauf, dass du dein Titelbild für das Plugin, die mobile Ansicht und auch die Web-Ansicht optimierst – mit dem Fokus auf die Mitte des Bildes.

Das Facebook Page Plugin in die Webseite einbinden

Facebook Page Plugin in Webseite einbinden

  1. Trage deine Facebook-URL ein. Wenn sie nicht so kurz ist wie hier bei mir, erstelle eine kurze URL hier: www.facebook.com/username
  2. (Optional): Trage eine maximale Höhe für dein Plugin ein (Angaben in Pixel)
  3. (Empfohlen): Wenn ausgewählt, wird sich das Plugin automatisch an die Größe der Webseite anpassen
  4. (Empfohlen): Gesichter von Freunden denen die Seite gefällt, werden angezeigt. Dies ist sehr empfehlenswert wegen dem Social Proof.
  5. (Optional): Trage eine maximale Breite für das Plugin ein (Angaben wieder in Pixel)
  6. (Optional): Nutze das dünne Titelbild. Das Titelbild wird oben und unten abgeschnitten. Nur empfehlenswert, wenn du wirklich keinen Platz hast.
  7. (Optional): Verstecke das Titelbild komplett.
  8. (Optional): Zeige auch Beiträge. Diese Option nutze ich meist nicht. Vor allem nicht im Webseiten-Footer oder der Sidebar. Verwende es nur, wenn du viel Platz hast.

Klicke „Get Code“ und füge beide Code-Schnipsel in deine Webseite ein.

z.B. auf einer Seite bei WordPress, indem du in den Text-Editor wechselst und dort im html Code die beiden Schnipsel einfügst:

text

Oder in der Sidebar bzw. dem Footer indem du ein Text-Element in die Widgets einfügst:

Widget für Facebook Page Plugin

Wichtig: Füge eine Facebook-Datenschutzerklärung in deine Webseite ein, wenn du dieses Plugin benutzt. Hier findest du ein Anleitung: www.e-recht24.de/muster-datenschutzerklaerung.html

Hast du Probleme beim Einbinden? Dann hinterlasse gerne einen Kommentar!


Wie findest du das neue Facebook Page Plugin?

45 Kommentare
  1. Dagmar sagte:

    Liebe Katrin,
    seit vielen Monaten versuche ich das facebook-Seiten Plugin auf meiner Seite zum Laufen zu bringen und bin gescheitert. Heute habe ich bei dir endlich den entscheidenenden Hinweis gefunden. Es lag an den Einstellungen für meine Fanpage, in denen ich bestimmte Altersgruppen ausgeschlossen habe. Das habe ich zurückgenommen und jetzt funkt es endlich. Vielen dank.

    Antworten
  2. Tibor sagte:

    Liebe Katrin

    Vielleicht magst Du Dich auch meines Problems annehmen. Die Einbindung der FB Social Plugins funktioniert problemlos http://parkfreunde-weissensee.berlin/pumpen-wuerdig, aber die Website „spricht“ nicht mit unserer Facebook Seite. Es gibt am entsprechenden FB-Post Kommentare, die nicht auf der Site gespiegelt werden und auch Likes von Freunden (deren Gesichter ich ja eigentlich auch sehen müsste): https://www.facebook.com/ParkfreundeWeissensee/posts/1618807124842158

    App-ID ist korrekt eingestellt. Kennst Du das Problem und kannst mir ggfls. weiterhelfen?

    Antworten
    • Katrin
      Katrin sagte:

      Welche Beiträge werden denn nicht gezeigt? Die von den Fans dürften nicht gezeigt werden. Warum es nicht klappt, kann ich mir nicht erklären…

      Antworten
  3. Serdar sagte:

    Hallo, ich möchte nur die Likes Zahl meiner Fanpage „auslesen“ und auf meiner Seite einbauen. Also die aktuelle Zahl (beispielsweise 12862) soll direkt von fb abgerufen werden und wie die aktuelle Uhrzeit an einer bestimmten Position auf meiner Seite angezeigt werden. Nicht in diesem blauen Button. Kann man diese Zahl auslesen?

    Antworten
  4. Jörg sagte:

    Hallo Katrin,

    vielen Dank für Deinen netten Blog zum Thema Facebook-Einbindung.
    Ich habe nach einigen Versuchen alles soweit hinbekommen, allerdings habe ich jetzt kein Facebook-Symbol in meiner Seitenleiste, sondern nur einen kleinen Textlink zu Facebook. Der Textlink hat den Namen meiner Homepage bzw. URL.
    Wie bekomme ich das Facebooksymbol an dessen Stelle?

    Libe Grüße

    Jörg

    Antworten
    • Katrin
      Katrin sagte:

      Hallo Jörg, dann ist wohl bei der Einbindung was schief gegangen. Versuche es noch einmal. Ansonsten liegt es sicherlich an deinem WordPress Theme. Da kann ich dir leider nicht helfen.

      Antworten
  5. Cabal sagte:

    Hallo. Gibts auch eine Methode die Facebook-Timeline, nach dem einbinden, farblich zu gstalten? (background, text)

    Antworten
    • Katrin
      Katrin sagte:

      Du kannst das helle oder dunkle Layout wählen – je nach Hintergrundfarbe. Für alles andere bräuchtest du sehr gute Programmierkenntnisse.

      Antworten
  6. Martina sagte:

    Liebe Katrin
    Versuche seit Stunden das „Facebook Page Plugin“ auf meiner WordPress-Seite zum laufen zu bringen. Leider vergeblich…. Habe extra einen ganz neue und frische WordPress-Seite aufgeschaltet und Deine Anleitung benau befolgt.

    Kannst Du mir einen Link zu irgendeiner WordPress-Seite schicken wo ich das „“Facebook Page Plugin“ einmal „live“ in am laufen sehen kann? Das wäre supertoll von Dir!!!

    Gruss Martina
    Martina kürzlich veröffentlicht…Kratzfeste Eheringe? Ja das gibt’s!My Profile

    Antworten
    • Martina sagte:

      Entwarnung!!!! Das Problem ist gelöst!!!
      Ein Sicherheits-Add-On in meinem Firefox-Browser hat alle „Facebook Page Plugin“ Inhalte rausgelöscht.
      Sobald ich das „Add on“ deaktiviere, funktioniert alles bestens!

      Tipp: Am besten bei Problemen die Seite in Firefox, Chrome und Internet Explorer angucken 😉

      Gruss Martina

      Antworten
  7. Alexandra sagte:

    Hallo, ich versuche derzeit verzweifelt, das Plugin in meinen WordPress-Blog einzubinden. Leider geht es mir auch so, dass kein Bild eingezeigt wird. Du schreibst, dass es möglicherweise am Theme liegt? Bin völlig ratlos. Viele Grüße, Alexandra

    Antworten
  8. Christine sagte:

    Hallo Katrin. Mir geht es genauso wie Frauke! Auch bei meiner neuen Site gekomme ich es mit blogspot nicht so recht hin wie es sein sollte! Hab mal nach dem Begriff „„facebook page plugin für blogspot““ gegoogelt … aber so gute Anweisungen wie bei dir findet man leider nicht so leicht 🙂 :-(… Hat Frauke mitlerweile etwas gefunden? LG Christine

    Antworten
  9. Rogalski sagte:

    Hallo Katrin,

    danke für den tollen Beitrag. Ich habe es jetzt mal ausprobieren, Allerdings wird nur mein Name angezeigt, also kein Bild von der Seite. Das finde ich irgendwie seltsam. Du kannst es gerne kurz unter http://www.tatjana-rogalski.de anschauen. Ich würde mich über dein Feedback freuen. Gerne auch via Mail.

    Schöne Grüße

    Mahdiya Tatjana

    Antworten
    • Katrin
      Katrin sagte:

      Hallo Tatjana,
      die falsche Ausgabe des Plugins liegt an deinem Theme. Die Codes können sich überschreiben. Wie du das im Einzelfall lösen kannst, müsste ich mir direkt anschauen. Vielleicht findest du ein Plugin dafür, das den anderen Code überschreibt.
      Liebe Grüße
      Katrin

      Antworten
    • Katrin
      Katrin sagte:

      Hallo Christin,
      ich denke dass hier dein Theme mit dem Plugin kollidiert und daher der Fehler entsteht. Wie man es lösen kann, weiß ich derzeit leider auch nicht. Wenn ich über eine Lösung stolpere, sage ich dir aber Bescheid.

      Liebe Grüße
      Katrin

      Antworten
    • Spree♥Liebe Hochzeitsfotografie sagte:

      Liebe Christin, ich habe das selbe Problem wie du gehabt. Mit einem Plugin wie z.B. Easy Facebook Likebox konnte ich das Problem lösen. Ist zwar unschön ein zusätzliches Plugin am laufen zu haben, aber dieses verbraucht relativ wenig Systemressourcen von WordPress. Ich hoffe ich konnte dir helfen und wünsche dir einen schönen Tag.

      Liebe Grüße aus Berlin,
      Alex 🙂

      Antworten
  10. Birgit sagte:

    Hallo,
    ich habe da mal eine Frage. Ich habe das Page Plugin auf meiner Webseite zum Test eingefügt.
    Bei dem Header unter dem Logo steht da ja auf der linken Seite der “gefällt mir”-Button und rechts normalerweise “teilen”
    Jetzt habe ich z.B. auch gesehen, dass dort bei manchen Webseiten eine der “Call-back-Aktionen” steht, wie z.B. “Kontakt aufnehmen”, “Jetzt einkaufen” usw.
    Habe auf meiner Facebook-Seite auch so einen “Kontakt aufnehmen”-Button, aber ich bekomme es nicht hin, bei der neuen Like-Box, dies dann da anzeigen zu lassen.
    Wie muss ich da vorgehen?

    Antworten
    • Birgit sagte:

      Sie schreiben:
      Der Call-to-Action Button ist (sofern er auf der Facebook-Seite eingerichtet ist) integriert –
      Das verwunderliche dabei ist, ich habe diese Schaltfläche „Kontakt aufnehmen“, trotzdem wird diese nicht bei dem neuen Plugin angezeigt, sondern „teilen“
      Vielleicht haben Sie ja eine Idee, woran das liegen kann?

      Antworten
    • Katrin
      Katrin sagte:

      Hallo Birgit, das kommt auch auf die Größe der Page Plugins an. Bei mir ist es so klein, dass der Call-to-Action nicht ausgeschrieben wird, sondern nur ein Stift-Symbol ist. Kann es bei dir auch daran liegen? Ansonsten schicke mal einen Link zu deiner Seite. Dann schaue ich mal.

      LG Katrin

      Antworten
      • Birgit sagte:

        Hallo Katrin,
        also nein an der Größe liegt es nicht.
        Ich schicke dir eine Mail mit Screenshots direkt an deine Email, da ich das Page Plugin noch nicht auf meiner Seite eingebaut habe, nur getestet.

        Gruß Birgit

        Antworten
    • Katrin
      Katrin sagte:

      Hallo Frauke,
      mit blogspot kenne ich mich leider nicht sehr gut aus. Vielleicht kannst du das mal googlen: „facebook page plugin für blogspot“. LG Katrin

      Antworten
      • Martin sagte:

        Hallo, hier der Code für Bloggspot. Dort wo ich ihn her habe gibt es auch eine Anleitung wo man was einsetzten muss.

        (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‘));
        LG Martin

        Antworten
        • Martin sagte:

          Beim ersten Post wurde etwas verschluckt…hier nochmal.

          (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‘));

          Antworten

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

CommentLuv badge