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
- Trage deine Facebook-URL ein. Wenn sie nicht so kurz ist wie hier bei mir, erstelle eine kurze URL hier: www.facebook.com/username
- (Optional): Trage eine maximale Höhe für dein Plugin ein (Angaben in Pixel)
- (Empfohlen): Wenn ausgewählt, wird sich das Plugin automatisch an die Größe der Webseite anpassen
- (Empfohlen): Gesichter von Freunden denen die Seite gefällt, werden angezeigt. Dies ist sehr empfehlenswert wegen dem Social Proof.
- (Optional): Trage eine maximale Breite für das Plugin ein (Angaben wieder in Pixel)
- (Optional): Nutze das dünne Titelbild. Das Titelbild wird oben und unten abgeschnitten. Nur empfehlenswert, wenn du wirklich keinen Platz hast.
- (Optional): Verstecke das Titelbild komplett.
- (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:
Oder in der Sidebar bzw. dem Footer indem du ein Text-Element in die Widgets einfügst:
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?
ist das noch aktuell? danke
Es ist nicht mehr DSGVO-konform, aber technisch würde es so noch funktionieren. Im Zweifel wende dich einfach an deinen Anwalt oder deine Rechtsberatung und frage nach einer Alternative. Liebe Grüße, Heike (Team Katrin Hill)
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.
Danke für die Info
danke für den informativen Beitrag
ich glaub da brauch ich nen Consultant für meine Anwendung. Bekomm das nicht hin leider
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?
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…
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?
Hallo Serdar,
ja, das geht. Über die Facebook-App. Ein Programmierer kann das für dich einrichten. LG Katrin
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
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.
das hab ich genau gesucht 🙂 alles gute im neuen Jahr und mehr solcher toller Beiträge bitte
Hallo. Gibts auch eine Methode die Facebook-Timeline, nach dem einbinden, farblich zu gstalten? (background, text)
Du kannst das helle oder dunkle Layout wählen – je nach Hintergrundfarbe. Für alles andere bräuchtest du sehr gute Programmierkenntnisse.
Gilt das auch noch für die neuen FB „likes“ mit all den verschiedenen Variationen die es nun gibt? Danke 🙂
Hallo Anna,
diese neuen Likes haben mir dem oben beschriebenen Plugin nichts zu tun. Oder was meinst du genau?
LG Katrin
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
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
Hallo Martina,
super, dass du uns hier Bescheid gibst 🙂 Ein sehr guter Tipp!
Herzliche Grüße
Katrin
Dein Blog ist sehr gut! Allerdings ich zu doof und hab jetzt das Problem an nen Dritten verlagert 🙁
schon gelöst dein Problem Astrid? Ich hatte auch einige Probleme damit
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
Hallo Alexandra,
manchmal sieht man die Bild-Vorschau erst nach der Veröffentlichung. Ansonsten kannst du bei der Erstellung des Codes unter https://developers.facebook.com/docs/plugins/page-plugin mal schauen ob du aus versehen „Hide Cover Photo“ ausgewählt hast und damit etwas rum spielen… Wenn auch das nicht klappt, schreibe mir doch noch einmal.
Liebe Grüße
Katrin
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
Wo genau bleibst du denn stecken Christine? Vielleicht kann ich dir ja helfen 🙂 LG Katrin
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
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
Liebe Katrin, danke für die schöne Anleitung, deinen Marketing-Blog werde ich sicherlich öfter mal einen Besuch abstatten.
Liebe Grüße von der Spree,
Alex 🙂
Das freut mich sehr zu hören Alex 🙂
Hallo Katrin
Danke vielmal für die tolle Anleitung!
LG Inga
Sehr gerne Inga 🙂
Hallo Katrin!
Vielen Dank für die Anleitung. 🙂
Bei mir funktioniert die Box nicht vernünftig, hast du vielleicht eine Idee, woran es liegen könnte?
In der Vorschau wird mir alles richtig angezeigt, in meiner Sidebar ist allerdings nur ein Link zu meiner Facebook-Seite und nicht die eigentliche Box.
Viele Grüße
Christin
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
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 🙂
Herzlichen Dank für deinen Tipp!!!
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?
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?
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
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
Hallo Katrin,
bei blogspot will das plugin nicht funktionieren. Gibt es da einen Trick?
LG und ein schönes WE,
Frauke
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
Hatte das gleiche Problem mit blogspot. habe den passenden Code gefunden.
Kann ich den hier posten?
Nur zu 😉
Liebe Grüße,
Heike
(Team Katrin Hill)
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
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‘));
auch ich danke 🙂 ist mir auch aufgefallen
Hallo Martin,
vielen Dank für den Code genau danach habe ich gesucht.
LG
Marek