Facebook Like Box Integration in Magento

Mittlerweile dürfte so ziemlich jeder mit dem Begriff Facebook etwas anfangen können. Bei der rasanten Verbreitung des Social Networks online sowie offline ist das ja auch kein Wunder. Bei einem bekannten Modelabel, bei dem übrigens keinen Verkäufer sondern nur „Storemodels“ arbeiten, wird man z. B. mit den Worten „See you on Facebook“ verabschiedet.

Und auch sonst versuchen immer mehr Unternehmen Facebook in ihre Marketingstrategie zu integrieren. Warum auch nicht? Facebook liegt voll im Trend.

Vor allem im Onlinegeschäft liegen die Vorteile auf der Hand. Wo sonst, wenn nicht bei Facebook, kann ich mit wenig Aufwand eine so große Masse an potenziellen Kunden gewinnen. Meist muss nur wenig Zeit investiert werden, um auf Facebook aktiv Marketing zu betreiben.

Deshalb wollen wir in diesem Beitrag die Integration einer Facebook Like Box in Magento erläutern. Dazu gehen wir auf folgende Seite: http://developers.facebook.com/docs/plugins/.

In dieser Übersicht findet man natürlich auch jede Menge weiterer „Social Plugins“ von Facebook.

Klicken wir also in unserem Fall auf die Option Like Box. Die folgende Seite dürfte dann eigentlich fast für sich selbst sprechen. Wir gehen davon aus, dass bereits eine eigene Fanpage unter Facebook besteht.

    1. Facebook Page URL
      Hier wird die URL der Facebook-Fanpage eingetragen. In unserem Fall http://www.facebook.com/pages/Flagbit/262779171639
    2. Width
      Bestimmt die Breite der Box. Die Höhe der Box können wir hier nicht wählen. Diesen Parameter können wir aber später händisch ändern.
    3. Color Scheme
      Wir können hier aus zwei Varianten auswählen:

      1. light: Für hellere Shop-Layouts
      2. dark: Für eher dunklere Shop-Layouts
    4. Show Faces
      Zeigt die Profilbilder meiner Fans an.
    5. Stream
      Zeigt die letzten Einträge auf unserer Fanpage-Pinnwand an
    6. Header
      Ein- und Ausschalten der „Find us on Facebook“ Überschrift.

In unserem Fall haben wir folgende Einstellungen gewählt: Width=300, Color Scheme=light, Show Faces=no, Stream=no, Header=no;

Über „Get Code“ erhalten wir unser Code-Snippet zur Einbindung in unseren Shop.

Es stehen 2 Formate zur Verfügung.

      1. iframe
      2. XFBML

Um die XFBML-Variante einsetzen zu können, muss Facebook mein Konto bestätigen. Das kann ich entweder über die Eingabe meiner Mobilfunknummer(Key wird per SMS geschickt) oder über die Eingabe meiner Kreditkartendaten tun.
Da ich keinen Sinn darin sehe, für unser kleines Tutorial Facebook eine der beiden Informationen zur Verfügung zu stellen, machen wir mit der iframe-Variante weiter.
Zusätzliche Features durch die Verwendung von XFBML wie beispielsweise beim Like-Button, sind mir bei der Like Box nicht bekannt.

Wir kopieren uns also das iframe-Code-Snippet in die Zwischenablage und wechseln in unser Magento Backend. Unter CMS → Statische Blöcke legen wir uns einen neuen Block mit dem Titel Facebook-LikeBox und dem Seitenbeizeichner facebook-likebox an.
Wir schalten den Inhaltseditor aus und fügen unser Code-Snippet ein. Alternativ können wir ein div-Tag für Formatierungen sowie eine eigenen Headline drum herum packen.
Der Inhalt könnte wie folgt aussehen:

Join on Facebook

Hier haben wir nun noch die Möglichkeit den height-Parameter anzupassen, um die Box in der Höhe zu verändern.

Tipp: Den Code in einer Datei zwischenspeichern, um später Änderungen durchführen zu können. Wenn ich nämlich den Editor in Magento erneut öffne, ist mein iframe weg!

Die Box kann nun frei im Layout platziert werden. Da wir unsere Like Box im Footer unterbringen wollen, öffnen wir die page.xml unter app/design/frontend/meinTemplate/default/layout/page.xml.
Ab ca. Zeile 101 finden wir unseren Footer-Blog. Diesen erweitern wir nun um folgende Zeilen:

            facebook_likebox

Datei speichern, ggf. Cache leeren und die Arbeit bewundern.

1 Kommentar
  • Avatar

    Facebook ist eine nette Sache, aber gerade wenn pro Seite mehrere Like Buttons integriert werden, geht das ordentlich auf die Ladezeiten. Gibt wohl auch einige Entwickler die das daher alles cachen bzw. nachladen sobald die Seite komplett geladen wurde, würde mich interessieren ob ihr hier auch schon etwas in die Richtung gebaut habt?

    PS: XFBML soll ja sowieso eingestmapft werden …

Hinterlassen Sie einen Kommentar

Ihr Kommentar*

Name*
Website

Weitere Beiträge zum Thema
Mehrere Datensätze gleichzeitig bearbeiten – mit der Zwischenablage
UML-Diagramme aus Text mit PlantUML
Extension: RealURL Tweak
Visualisierung von Logdaten