Facebook Box in den Footer einbinden

Facebook Box in den Footer einbinden

Alexander Wolf 13. November 2015 20

In diesem Beitrag zeigen wir dir, wie du die Facebook Box ganz einfach in deinen Shopware Shop Footer integrieren kannst.

Wir wollen der Welt zeigen, dass unser Shop von anderen gemocht wird. Unsere Facebook Page haben wir schon erstellt.

Natürlich haben wir einen Facebook Link eingebaut, wie hier: Social Media Icon mit Link im Footer

Jetzt sieht das auf unserem Shop aber keiner. Und auf den Facebook Link klickt auch niemand. Eine Box mit den Likes und evtl. News Feed wäre klasse.

Aber wie geht das?

Shopware Facebook Page Plugin

Zuerst brauchen wir den richtigen Code für unser Plugin. Diesen Code bekommt ihr in der Entwickler Dokumentation von Facebook.

Facebook Page Plugin

Bei Facebook Page URL tragt ihr eure Facebook Page ein: z.B. https://www.facebook.com/eightmylez

Ihr könnt sofort sehen ob ihr eure Seite gefunden wurde. An der Vorschau könnt ihr jetzt auch etwas rumspielen und die Funktionen auswählen die euch zusagen. Wir haben uns für 315px als Breite entschieden und zeigen keine Facebook Posts an.

Wenn ihr eure Box soweit eingestellt habt, klickt ihr auf Get code und es erscheint eine Box mit zwei Anweisungen.

Facebook SDK integrieren

Um die Facebook Geschichten überhaupt nutzen zu können, müssen wir eine Datei einbinden, sodass der Code verfügbar wird in unserem Shop. Das ist gar nicht so schwer wie es sich anhört. Denn wir fügen etwas javascript Code ein, welcher die benötigte Datei von Facebook bei uns integriert.

Dazu legen wir in der Datei

themes/Frontend/MEINTHEME/frontend/index

die Datei index.tpl an.

Diese Datei befüllen wir mit folgendem Code:

{extends file="parent:frontend/index/index.tpl"}

{block name='frontend_index_after_body'}
{$smarty.block.parent}
  <div id="fb-root"></div>
  <script>(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.5&appId=562882437145097";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
{/block}

Der Code sorgt dafür, dass die richtige Datei von Facebook in euren Shop eingebunden wird und ihr die Facebook Box anzeigen könnt.

Die Box

Wir finden im Footer macht sich die Facebook Box am besten. Ihr könnt selbstverständlich selbst entscheiden wo diese platziert wird. Einfach bei dem richtigen Block anhängen. Im Footer ist aktuell noch unser Newsletter Feld drin, welches wir austauschen.

Dazu müssen wir nur den zweiten Code an die richtige Stelle einfügen. Wir öffnen im Ordner

themes/Frontend/MEINTHEME/frontend/index/

die Datei footer-navigation.tpl und fügen folgenden Code ein:

{extends file="parent:frontend/index/footer-navigation.tpl"}

{block name="frontend_index_footer_column_newsletter"}
  <div class="footer--column is--last block">
    <div class="column--headline">Finde uns auf Facebook</div>
    <div class="column--content">
    <div class="fb-page" data-href="https://www.facebook.com/eightmylez" data-width="315" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/eightmylez"><a href="https://www.facebook.com/eightmylez">8mylez</a></blockquote></div></div>
  </div>
  </div>
{/block}

Dieser Code ist die Facebook Box mit unseren eingegeben Werten.

Cache leeren und Theme kompilieren nicht vergessen. So sollte es fertig aussehen:

Facebook Page Plugin Shopware

Facebook Box ist drin. Sieht toll aus. Alle leben und sind unverletzt. Einfach toll!

Viel Spaß bei eurer eigenen Facebook Box.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

20 Kommentare

  • Hallo Alexander!

    Einen großen DANK für das Tutorial.
    Ich habe versucht die Facebook Box in eine Einkaufswelt "Code Element" einzubauen. Dies ist mir leider nicht gelungen, es wird immer nur der Linkbalken angezeigt.

    Gibt es hier eine Lösung dafür?
    Vielleicht kann mir jemand helfen!

    Gruß Martin
  • Hey Martin,

    vielen Dank!

    Hast du den Javascript Part richtig eingebunden? Gibt es in der Konsole der Developer Tools eine Fehlermeldung?

    Gruß
    Alexander
  • hi, vielen Dank für die Erklärung.
    Es hat soweit auch alles funktioniert. Nur im mobile footer funktioniert die Accordion funktion nun nicht mehr ( das kleine plus auf der rechten).

    Kann man dies eventuell noch anpassen ?

    Liebe Grüße
    Christoph
  • Hey Christoph,

    du kannst den Fehler beheben indem du das Div mit dem Facebook Kram in ein Div mit der Klasse "column--content" packst. Ich habe den Blog post angepasst. So sollte es funktionieren.

    Gruß
    Alexander
  • Ich hab das Ganze mit meinem Testshop installiert, hat auch soweit geklappt. Ein kleiner Schönheitsfehler ist aufgetreten, den möchte noch beheben, vielleicht haben Sie da ja eine Idee:
    Unter dem Footer steht der Satz
    * Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. Versandkosten und ggf. Nachnahmegebühren, wenn nicht anders beschrieben
    und zwar mittig auf der Seite.
    Nach Einbinden des Facebook steht der Satz nun recht unterhalb der Box Informationen und Finden Sie uns auf Facebook, er ist auf zwei Zeilen aufgeteilt und dabei noch schlecht umbrochen
    Wie kann ich das ändern?
    Über eine Idee wäre ich dankbar
    Grüße
  • Hey Marie-Liese,

    scheinbar ist da noch etwas schief gegangen beim Einbinden des Smarty Blocks. Am besten schaust du nochmal deine Anpassungen durch ob da möglicherweise zu viel Code geändert wurde.

    Ansonsten kann ich dir unser kleines Support Paket für solche Fälle empfehlen: https://store.8mylez.com/service/theme-check/21/support-ticket?c=11

    Gruß
    Alexander
  • Doch, das SDK habe ich eingebunden, aber wahrscheinlich nicht richtig ? :

    ich habs in die index.tpl gemacht, muss aber in die header.tpl !
    jetzt funktionierts :-)
  • Hallo kulli,

    alles klar! Danke für den Hinweis. Ich werde es prüfen und den Beitrag aktualisieren.

    Gruß
    Alexander
  • Vielen Dank für das Tutorial,

    Einbinden klappt, aber ich kriege nur ein Link-Balken angezeigt
    (Shopware 5.2.15)

    Code sieht jetzt so (von mir bearbeitet) aus:
    {block name="frontend_index_footer_column_newsletter"}

    {block name="frontend_index_footer_column_newsletter_headline"}
    {s name="sFooterNewsletterHead"}{/s}
    {/block}

    < blockquote cite="https://www.facebook.com/FliesenWerkzeug/">< a href="https://www.facebook.com/FliesenWerkzeug/" rel="nofollow">FliesenWerkzeug< /a>< /blockquote>



    {/block}
  • Hallo kulli,

    es sieht so aus, als haettest du das Facebook SDK nicht integriert. Das muss wie oben beschrieben eingebunden werden, sonst wird die Facebook Box nicht geladen.

    Gruß
    Alexander
  • Hey,

    Danke erstmal für das super Tutorial!
    Sobald ich den Facebook SDK Code integrieren will ist meine Seite nicht mehr erreichbar. Also irgendwas stimmt damit nicht.
    Könntet ihr mir evtl. helfen?

    Liebe Grüße

    Sandro
  • Hallo Sandro,

    vielen Dank für das positive Feedback!

    Kannst du mir FTP Zugang zu deinem Shop per Mail schicken? Dann kann ich mir das Ganze anschauen.

    Gruß
    Alexander
  • Hallo zusammen,
    ich weiß nicht, ob ich hier richtig bin, aber irgendwie bin ich hier auf dieser Seite gelandet... mein Facebook-account hat nicht den button "abonnieren" und unter den Einstellen-Abonnenten gibt es nicht die Option "abonnieren aktivieren" sondern nur etwas von einem code, den ich kopieren soll. Wie bekomme ich es hin, dass bei meinem Freunden auch die Option abonnieren meiner Seite erscheint????

    LG,
    Karen
  • Hallo Karen,

    kannst du mir einen Screenshot zuschicken? Dann kann ich mir das genauer anschauen.

    Einfach eine E-Mail an i@8mylez.com" rel="nofollow">i@8mylez.com>.

    Gruß
    Alexander
  • Denkt dran - jetzt aktuell - darauf hinzuweisen, dass die Box abmahnfähig ist!
  • Hallo Ralf,

    vielen Dank für deinen Input!

    Bevor ihr Geschichte mit Facebook und Co. benutzt, sollte euch klar sein, dass diese auch im Datenschutz aufgeführt sind.

    Am besten ist es wenn ihr euch mit einem Rechtsanwalt abstimmt. Der Händlerbund ist dafür auch sehr gut geeignet.

    Gruß
    Alexander
  • Hi,
    ich komme hier nicht ganz weiter, weil
    1. themes/Frontend/MEINTHEME/frontend/index als Ordner nicht exisitert und
    2. somit darin wohl keine Datei footer-navigation.tpl liegen kann.

    Ich arbeite mit einer lokalem SW5.1.3 Version und bin süchtig nach diesen Beiträgen. Bitte mehr! :)

    lg,
    Philipp

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide

Genug von schlechten Rankings?

mehr erfahren

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware Logo aus dem Footer entfernen
Social Media Icon mit Link im Footer
© 2017 by 8mylez. Powered by Goltfisch GmbH.