Facebook “Like Box” Einbindung und CSS Anpassung

Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

Facebook "Like Box" Einbindung und CSS Anpassung

Facebook bietet neben dem „Gefällt mir“ Button auch das sogenannte „Like Box“ Plugin an. Voraussetzung für das Facebook Like Box Plugin ist eine vorhande Facebook Marken bzw. Fan Seite. Durch die Einbindung des Facebook „Like Box“ Plugins auf die Startseite, haben Besucher Ihrer Webseite, welche noch kein Fan Ihrer Facebook Marken-Seite sind, die Möglichkeit Ihre Facebook Seite zu „liken“. Vorteil dabei ist, dass Besucher die neuesten Nachrichten Ihrer Facebook Marken Seite lesen können ohne eingeloggt zu sein. Zudem erhöhen sich die Chancen neue Mitglieder für die eigene Marken bzw. Fan Seite zu bekommen. Auch die Anzahl der Mitglieder Ihrer Facebook Marken Seite ist klar ersichtlich.

Die Like Box ist in drei folgenden Bereichen aufgeteilt:

– (Header) Kopf Bereich des Plugins
– (Stream) Nachrichten der Markenseite
– (Faces) Bilder der Mitglieder mit den entsprechenden Verlinkungen

Je nach Konfiguration der Like Box können bestimmte Bereiche (Header, Stream oder Faces) angezeigt werden.

Wie und wo wird die Facebook „Like Box“ generiert und eingebunden?

Wie bereits am Anfang erwähnt ist eine Facebook Marken bzw. Fan Seite Voraussetzung zur Erstellung einer Facebook Like Box. Die Marken (Fan) Seite kann unter dem folgenden Link angelegt werden:

Facebook Marken bzw Fan Seite registrieren

Um einen Like Box zu generieren wird der folgende Link sowie die URL der eigenen Marken Seite benötigt:

– Facebook Developers: Like Box
– URL der eigenen Marken Seite, beispielsweise: http://www.facebook.com/pages/Online-Marketing-Solutions-AG/105960406233

Die Generierung der Like Box ist genauso einfach wie die Generierung der Like Buttons. Einfach die URL der eigenen Marken Seite unter „Facebook Page URL“ eintragen, die entsprechenden Bereiche wie z.B. „show Faces“, „show stream“ oder „show header“ auswählen und anschließend auf „Get Code“ klicken.

Im Grunde genommen war´s das auch schon. Einfach einen der unteren Codes kopieren und an die gewünschte Stelle im Quellcode der Webseite einfügen und fertig. Um die Deutsche Version zu erhalten müsste in dem Script en_US in de_DE abgeändert werden.

Facebook Like box & CSS Anpassung

Um die Like Box mit der gewünschten CSS anpassen zu können, muss der eigentliche Code der generiert wurde etwas umgeändert werden. Genauer gesagt muss gleich am Anfang des Codes „fb:like-box“ in „fb:fan“ abgeändert werden. Anschließend ist die Einbindung der eigenen CSS Datei möglich. Hierzu wird nun unter CSS=““ der komplette CSS Pfad übergeben. Wichtig und zu beachten ist am Ende des CSS Pfades die Variable „?1“! Nach jeder CSS Änderung muss diese Variable hochgeschraubt werden z.B. „?2“ oder nach 12 CSS Änderungen in „?13“ usw. Sollte die CSS Datei verändert werden jedoch nicht die Variable, dann wird die Änderung nicht angezeigt bis die Variable um eins hochgeschraubt wurde.

Die Profile-ID kann aus der URL der Marken Seite entnommen werden

http://www.facebook.com/pages/Online-Marketing-Solutions-AG/105960406233

Um die gewünschten Stellen per CSS ändern zu können, empfiehlt sich hier der Einsatz von Firebug. Mit diesem Firefox Add-On kann schnell ermittelt werden, welche CLASS oder ID Namen bei welchen stellen verwendet werden. Als Beispiel hab ich hier mal eine kleine CSS Änderung vorgenommen womit ich den Rahmen der Like Box entfernt, dem Profilbild einen feinen Rahmen verpasst und die Hintergrundfarbe verändert habe. Auch die Faces habe ich hier ausgeblendet.


.fan_box .full_widget {background: none; border:none; border-bottom:1px solid #7F7F7F;}
.fan_box .full_widget .connect_top {background-color:#FFFFFF;}
.fan_box .profileimage {border:1px solid #CFCFCF; padding:5px; margin: 0 10px 4px 0; background-color:#FFFFFF;}
.fan_box .connect_action .name {font-size:12px;}
.connections {display:none;}

Facebook-Plugin Datenschutzerklärung

Wichtig und zu empfehlen ist die Einbindung der dazugehörige Datenschutzerklärung, da der Webseitenbetreiber sonst eine Abmahnung riskiert! Weitere Infos dazu und Vorlagen für die Datenschutzerklärung finden Sie bei Google: Suche nach „Facebook Social Plugins Datenschutzerklärung“

Verfasst von Arwin Barsekhian

Hat dir dieser Beitrag gefallen?

Über den Autor

Blog
Unter „Blogredaktion“ werden Fachbeiträge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch dafür gerne hier zur Verfügung.

Hinterlasse einen Kommentar

  • Marco 11.03.2011, 18:42 Uhr

    Hallo Arwin,
    ich bin schlicht begeistert, von der Mühe die Du Dir machst. Nicht nur Texte sind Klasse, auch die vielen Screenshots machen das Arbeiten leichter.
    Ich habe mir doch sogleich eine Fan Seite angelegt und werde damit mal Testen.

  • Matondo 15.03.2011, 9:40 Uhr

    genial für vereinsseiten

  • AdminIsTraitor 21.03.2011, 15:58 Uhr

    Ich finde nicht gut, dass der Button entfernt wurde. So verursachen unbedarfte Nutzer oder Neulinge die Funktion vielleicht automatisch, ohne dass sie es wollten. Wenn dann auch noch der „Like“-Button entfernt wird, seh ich schwarz. Aber ich will mich nicht aufregen, schließlich verwende ich Facebook nicht (auch in Zukunft nicht). Danke trotzdem für den Artikel. 🙂

  • Kathrin Gerlach 06.04.2011, 14:41 Uhr

    Gibt es diese Anpassungsmöglichkeiten auch für die Version mit dem Like Button?
    Ansonsten ist es super!

  • Arwin Barsekhian 27.04.2011, 10:35 Uhr

    Ich persönlich würde den Like Button bzgl. Style nicht ändern, da der Like Button ein Wiedererkennungswert hat. Wer aber dennoch den Facebook „Like Button“ ändern möchte, sollte einen Blick auf den von mir erstellen Beitrag werfen: http://www.omsag.de/blog/facebook-like-gefallt-mir-button-per-css-anpassen/

  • Manuela Wenkmann 13.07.2011, 18:50 Uhr

    Wer hinter dieser Arbeit steckt, dem zolle ich echt meinen Respekt. Geht ja nicht nur ums Schreiben, auch die Diversen Bilder und Screenshots. Super und vielen Dank für die Info…

  • Phire 02.11.2011, 12:08 Uhr

    habe das Plugin installiert vor ein paar Monaten, aber irgendwie scheint es nicht richtig synchronisiert zu sein…Es zeigt 194 Likes an, doch auf unserer Facebook-FanPage „mögen“ uns nur 55. Zählt die Box noch andere Dinge mit?

  • Arwin 02.11.2011, 14:53 Uhr

    Hallo Phire,

    bnei der Like Box wird eigentlich keine Anzahl der Fans angezeigt sondern ledigt der „Gefällt mir“ Button.

    Wenn es jedoch um die Like Buttons geht, dann kann es nur an der eingetragenen URL liegen. Überprüfe ob die URL auch wirklich die richtige ist.

  • Steffi 03.12.2011, 1:13 Uhr

    Hey.
    Eine Frage, hier steht: „Einfach den unteren Code kopieren und an die gewünschte Stelle der Startseite einfügen und fertig.“ … WO muss ich diesen Code nur einfügen, WO? Auf die Pinnwand meiner Fanseite? sodass jeder der auf meine seit geht, meinen Code lesen kann?
    Ich verstehe nicht wohin ich den Code einfügen muss. Bitte ganz schnelle antwort!!! 🙂 Danke im Vorraus

  • Lukas 03.12.2011, 19:48 Uhr

    Kann man diese Like Box auch nur für ein Profil anlegen?, oder braucht man eine „Facebook Dienstleistung“?

  • Arwin Barsekhian 07.12.2011, 14:39 Uhr

    Hallo Ihr beiden,

    @ Steffi

    den entsprechenden Code bindest du an der gewünschten Stelle im Quellcode der Webseite ein.

    @ Lukas

    Vorraussetzung für die Facebook Like Box ist eine Fan Seite. Für ein privates Profil ist das nicht möglich.

  • Herbrich 27.05.2012, 4:34 Uhr

    Also ich finde da ja alles sehr intresant, aber ich kann leider die LikeBox nicht wircklich gut in mein Konzept integrieren. Aber ich würde gerne mal den Text hinter den Like Button Anpassen. Also der Text wo drinen steht wie vielen personen das gefält.

  • AdiOnline 20.07.2012, 9:20 Uhr

    Ihr habt gerade mir die Denkanregung gegeben, einen Facebook-Content-Locker einzubauen 🙂 $$

  • BadFrog 04.11.2013, 9:26 Uhr

    Hey eine tolle Idee. Ich habe das einmal ausprobiert.
    Allerdings schaffe ich es nicht die Anpassungen für das CSS.
    Ich bin exakt nach dem Guide vorgegangen. Ich habe auch die Nummer nach der CSS immer erhöht. Leider zeigt er garkeine Änderungen.
    Wo könnte noch das Problem liegen?

  • Wolle 21.11.2016, 19:15 Uhr

    Hallo und vielen Dank für diesen Guide.
    Leider hat sich der Facebook-Code seit der Veröffentlichung geändert.
    Man muss zwei generierte Codes für Javascript oder einen für den iFrame in seine Seite einfügen.

    Include the JavaScript-SDK on your page once, ideally right after the opening tag.

    (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/sdk.js#xfbml=1&version=v2.8";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    Platziere den Code dort, wo das Plug-in auf deiner Seite erscheinen soll.

    <blockquote cite="https://www.facebook.com/mission2party"><a href="https://www.facebook.com/mission2party" rel="nofollow">[Seitenname]</a></blockquote>

    iFrame: Platziere den Code dort, wo das Plug-in auf deiner Seite erscheinen soll.

    Was muss man nun ändern, um z.B. die Rahmen und Hintergründe zu entfernen bzw. transparent zu gestalten und ggf. die Schriftfarbe im Header zu ändern.
    Wäre es auch möglich, die Timeline an sich, also die einzelnen Beiträge, an die Farben der eignen Homepage anzupassen?
    Evtl. könnte Sie, Herr Barsekhian, ja einen kompletten Code veröffentlichen, der alle Angaben enthält, die geändert werden können.
    .

    Gruß
    Wolle

    • Blogredaktion 23.11.2016, 16:02 Uhr

      Hallo Wolle,

      danke für deinen Kommentar bzw. deinen Hinweis! Gerne möchten wir auf deine Frage eingehen: Da die Like Box über einen iFrame eingebunden, ist diese wie eine Seite einer externen Domain anzusehen. Die individuellen Gestaltungsmöglichkeiten sind daher begrenzt. Den Rahmen, Hintergründe, Schriftfarben oder die Timeline kannst du leider nicht beeinflussen.

      Über die „data-„-Attribute kannst du aber zum Beispiel diese Bereiche anpassen:

      <div class="fb-page"
      data-href="https://www.facebook.com/Online.Marketing.Solutions.AG"
      data-tabs="timeline"
      data-small-header="true"
      data-adapt-container-width="true"
      data-hide-cover="true"
      data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/Online.Marketing.Solutions.AG" class="fb-xfbml-parse-ignore">
      <a href="https://www.facebook.com/Online.Marketing.Solutions.AG" rel="nofollow">Online Marketing Solutions AG</a>
      </blockquote>
      </div>

      Zur Erklärung:

      data-tabs=“timeline“
      → Zeigt an, ob die Timeline angezeigt werden soll. Weitere Möglichkeiten sind: events/messages (Standard: timeline)

      data-small-header=“true“
      → Zeigt einen kleineren Header an (Standard: false).

      data-hide-cover=“true“
      → Entfernt das Titelbild der Facebook-Seite (Standard: false).

      data-show-facepile=“true“
      → Zeigt Profilfotos an, wenn Freunde eines Nutzers die Seite bereits mit „Gefällt mir“ markiert haben (Standard: true).

      Weitere Infos zu Gestaltungsmöglichkeiten, wie zum Beispiel Breite und Höhe des Plug-ins, findest du zudem unter https://developers.facebook.com/docs/plugins/page-plugin.

      Wir hoffen, wir konnten dir weiterhelfen.

      Viele Grüße