Social Media Icon mit Link im Footer

Social Media Icon mit Link im Footer

Alexander Wolf 01. Oktober 2015 33

Social Media ist wichtig.

Deswegen wollen wir auch unsere Social Media Seiten auf unserem Shop verlinken.

Unten links im Footer ist ein toller Platz dafür.

Ihr könnt selbstverständlich schauen wo es euch am besten gefällt.

Die icons nehmen wir von Font Awesome.

Jetzt gibt es zwei Wege die Social Media Icons einzubauen:

  1. Im Theme
  2. Als Plugin

Beides hat seine Vor- und Nachteile.

Da wir uns aber auf Theme Entwicklung konzentrieren, nehmen wir den ersten Weg:

Im Theme

Insgesamt sind es nur 5 Schritte die uns zum Erfolg führen.

Die 5 Schritte:

  1. Theme erstellen
  2. Dateien erstellen
  3. Font Awesome einbinden
  4. Icons mit Verlinkung einbauen
  5. Theme kompilieren, freuen und wild auf dem Tisch tanzen

1. Theme erstellen

Kommt euch bekannt vor?

Na klar doch!

Haben wir auch schon paar mal gemacht.

Beim Beitrag über die Themestruktur und beim Anpassen der Logo Größe.

Ganz kurz zusammengefasst:

Im Theme Manager, ein neues Theme anlegen mit Ableitung eures aktuellen Themes (wir nutzen das Standard Responsive Theme von Shopware).

2. Dateien erstellen

Wir müssen rausfinden in welchen Dateien sich der Code für den Footer befindet.

Wenn es um den Header oder Footer geht dann schauen wir in den Ordner

themes/Frontend/Bare/frontend/index/

Im Bare Theme befinden sich die Eltern Dateien von denen geerbt wird.

Wir finden die footer.tpl und die footer-navigation.tpl.

Die footer.tpl brauchen wir erstmal nicht.

In der footer-navigation.tpl sehen wir unter anderem folgenden Code:

{* Service hotline *}
{block name="frontend_index_footer_column_service_hotline"}
    <div class="footer--column column--hotline is--first block">
        <div class="column--headline">{s name="sFooterServiceHotlineHead"}{/s}</div>
		{block name="frontend_index_footer_column_service_hotline_content"}
			<div class="column--content">
				<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
			</div>
		{/block}
    </div>
{/block}

Dieser Code sorgt dafür, dass unten Links in der ersten Spalte des Footers eine Überschrift (Standard ist Service Hotline) und ein Beschreibungstext angezeigt werden.

Shopware Service Hotline Footer

Wir wollen diesen Bereich erweitern und legen daher unsere erste Datei (die footer-navigation.tpl) in derselben Ordnerstruktur bei uns im Theme an:

themes/Frontend/UnserErstelltesTheme/frontend/index/footer-navigation.tpl

Der Code für die Datei kommt im übernächsten Schritt.

3. Font Awesome einbinden

Die icons nehmen wir von Font Awesome.

Toller Service.

Dazu brauchen wir nur folgende Zeile einbinden (der einfachste Weg):

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

Ich verlinke unten das Getting Started von Font Awesome, falls euch weitere Informationen interessieren.

Wir wollen diese Zeile Code in unseren Header packen.

Dazu schauen wir uns an wie die anderen CSS Dateien eingebunden werden.

Wir schauen in die Datei:

themes/Frontend/Bare/frontend/index/header.tpl

Da steht sehr viel drin.

Uns interessiert gerade aber nur folgender Code:

{* Stylesheets *}
{block name="frontend_index_header_css_screen"}
	{{compileLess timestamp={themeTimestamp} output="lessFiles"}}
	{foreach $lessFiles as $stylesheet}
		<link href="{$stylesheet}" media="all" rel="stylesheet" type="text/css" />
	{/foreach}
    {if $theme.additionalCssData}
        {$theme.additionalCssData}
    {/if}
{/block}

Mit dem werden alle LESS Dateien kompiliert und dann eingebunden.

Also hängen wir unsere CSS Datei doch einfach dran.

Zuerst legen wir folgende Datei an:

themes/Frontend/UnserErstelltesTheme/index/header.tpl

In diese Datei schreiben wir folgenden Code:

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

{block name="frontend_index_header_css_screen"}
	{$smarty.block.parent}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
{/block}

In Zeile 1 erben wir von der Elterndatei.

Und in Zeile 2 sprechen wir den Block frontend_index_header_css_screen an und laden mit {$smarty.block.parent} erstmal den Originalen Block und hängen unseren Code dahinter an.

Bei uns ist das nur die Verlinkung zur Font Awesome CSS Datei.

Font Awesome ist somit eingebunden in unser Theme und wir können die icons nutzen.

4. Icons mit Verlinkung einbauen

In Schritt 2 haben wir unsere Datei footer-navigation.tpl erstellt.

Diese befüllen wir jetzt mit folgendem Code:

{namespace name="frontend/index/menu_footer"}
{extends file="parent:frontend/index/footer-navigation.tpl"}
{block name="frontend_index_footer_column_service_hotline_content"}
	<div class="column--content">
    	<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
        <ul class="em-social-links">
        	<li><a href="https://www.facebook.com/eightmylez?fref=ts" target="_blank"><i class="fab fa-facebook"></i></a></li>
            <li><a href="https://twitter.com/Eightmylez" target="_blank"><i class="fab fa-twitter-square"></i></a></li>       
			<li><a href="mailto:i@8mylez.com" target="_blank"><i class="fas fa-envelope"></i></a></li>    
		</ul>
    </div>
{/block}

Wie auch bei der header.tpl wollen wir von der Elterndatei erben, was wir auch mit Zeile 1 machen.

Am Ende bauen wir die Icons mit Link ein.

Die Icons verlinken gerade auf meine Social Media Accounts, also denkt dran diese auszutauschen, falls ihr den Code kopiert.

Um die Icons zu stylen erzeugen wir noch folgende Datei:

themes/Frontend/UnserErstelltesTheme/frontend/_public/src/less/all.less

Theoretisch könnte der CSS-Code hier hinein geschrieben werden. Da wir es aber etwas strukturierter haben möchten, importieren wir nur die Datei, die wir noch anlegen werden.

Dazu wird folgende Zeile in die all.less eingefügt:

@import "_mixins/social_media_icons";

Die Datei, auf die wir in diesem Import verweisen, legen wir nun an unter:

themes/Frontend/UnserErstelltesTheme/frontend/_public/src/less/_mixins/social_media_icons.less

und fügen folgenden CSS-Code dort hinein:

.em-social-links {    
	font-size: 40px;
}

.em-social-links li {    
	display: inline;
}

.em-social-links li a {    
	display: inline;    
    transition: opacity .3s ease-in-out;
}

.em-social-links li a:hover {    
	opacity: 0.6;    
    transition: opacity .3s ease-in-out;
}

.em-social-links li a i.fa-facebook {    
	color: #3b5998;
}

.em-social-links li a i.fa-twitter-square {    
	color: #55acee;
}

5. Theme kompilieren und freuen

Zum Schluss wie immer den Cache leeren und das Theme kompilieren.

Sieht doch super aus!

Social Media Icons im Shopware Footer

Abschluss

Wir haben uns angeschaut wie wir Social Media Icons in unseren Footer integrieren.

Dabei haben wir auch gelernt, wie eigenen Code an die Blöcke von Shopware anhängen können.

Außerdem haben wir ein externes CSS eingebunden und die Icons von Font Awesome verwendet.

Hinweis

Ihr könnt natürlich alle icons von Font Awesome integrieren.

Seid kreativ und baut euch alles mögliche mit den Icons.

Weitere Links

33 Kommentare

  • Danke für die Anleitung!
    Ich tue mich leider immer mit dem Coding schwer, aber dank dem Beitrag hier hab sogar ich es hinbekommen. KAnn man sich fast gar nicht vorstellen, wie gut Icons anstatt einfacher Textlinks funktionieren!
  • Hey Vanessa,

    das freut mich :)

    Gruss
    Alexander
  • Vielen lieben Dank für die ausführliche und gut verständliche Anleitung. Eine Alternative zu Font Awesome würde mich ebenfalls interessieren. Ich habe zwar mal recherchiert, aber noch nichts passendes gefunden. Habt ihr da Tipps?
  • Tolle Anleitung, danke dafür!
    Gibt es auch eine Alternative zu Font Awesome? Leider gibt es hier nämlich nicht alle Social-Media Icons, die wir benötigen..
    Danke schon mal im Voraus.
  • Wirklich super beschrieben das ganze. Lob erstmal dafür! Jedoch hätte ich die Icons gerne nebeneinander anstatt untereinander. Inwiefern muss ich den Code anpassen, damit sie sich nebeneinander reihen? Egal was ich versuche, ich bekomme es nur zentriert hin aber nicht in einer Reihe.
  • Wir möchten uns auch einfach mal bedanken. So explizite, ausführliche, auf den Punkt geschriebene Anleitungen sieht man sehr selten!
    Wir sind mittlerweile richtige Fan´s von Ihnen!

    Unsere Shops werden nach Ihren Anleitungen erstellt.

    Einfach super!
  • Vielen Dank <3
  • Ich finde den Artike auch ausgezeichnet und bin sehr dankbar für diese Art der Hilfestellung, allerdings habe ich das gleiche Problem mit den Icons in der mobilen Ansicht und konnte das Problem ebenfalls absolut nicht lösen.
  • Hey Baden,

    wir haben den Blogpost angepasst. Wenn du jetzt alles befolgst, ist der Fehler weg und die Icons sind mit im Footer in der mobilen Ansicht!

    Gruß
    Alexander
  • Hallo,

    in den Kommentaren habe ich gelesen, dass die Icons in der mobilen Ansicht nicht einklappen und das das 8mylez Team das ganze updaten wollte, leider aber immer noch geschehen ist. Die Icons klappen nicht ein. Ansonsten wirklich super Arbeit und herzlichen Dank. Könnte das Team den Code updaten.
  • Hey Aden,

    wir setzen uns nochmal ran, arbeiten das Tutorial selbst in der neuesten Shop Version durch und passen den Code an!

    Vielen Dank für dein Feedback :)

    Gruß
    Alexander
  • Einfach einmal ein Dankeschön für die inhaltlich wie didaktisch ausgezeichneten Artikel bei euch!
    Es hat mir so manche Stunde sucherei erspart und das Ergebnis ist immer brilliant.
    Wenn ich mir etwas wünschen dürfte, so wäre es Artikel wie der Boss Header - allerdings kompatibel mit Responsive Template und all den Plugins, die das Responsive voraussetzten.
    Auf jeden Fall bin ich extrem dankbar, daß hier jemand sein Wissen der Community freizügig zur Verfügung stellt.
    LG
    Steffen
  • Hey Steffen,

    vielen lieben Dank fuer die netten Worte :) Wir geben unser bestes und freuen uns wenn es ankommt!

    Gibt es spezielle Plugins die bei der Kompatibilitaet Probleme machen beim Boss Header?

    Gruß
    Alexander
  • Ja, etliche. Ist auch nicht mehr das Thema. Alle Plugins, die das Responsive erwarten im Standard machen die Grätsche :-)
    Danke für den Artikel auf jeden Fall.
  • Hey Steffen,

    das kann ich mir gut vorstellen. Wir haben da auch tiefgreifende Anpassungen gemacht.

    Mit etwas mehr Aufwand lässt sich das aber teilweise beheben. Im Live Stream konzentrieren wir uns aber zunächst das Theme zu Entwickeln ohne dabei die Kompatibilitaet zu achten. Wäre vielleicht spannend für den nächsten Live Stream.

    Gruß
    Alexander
  • Leider funktionieren bei mir die einzelnen Farben der Icons nicht. Meine werden alle in meiner Headline-Farbe angezeigt. Wo könnte denn der Fehler liegen?
  • Hey Melanie,

    vermutlich überschreibt ein CSS Code die Anpassungen. Kannst du mir einen Link von deinem Shop schicken? Dann kann ich da kurz reingucken und dir einen Tipp geben!

    Gruß
    Alexander
  • Hallo ich fand dein Tutorial sehr hilfreich. Ich habe auch versucht den div Block komplett zu übernehmen und die social Icons hinein zu bauen. Das funktioniert auch beim Desktop aber in der mobilen Ansicht funktioniert das aufklappen gar nicht mehr. Wenn ich den identischen Code (nur die Icons mit Styling) in den Textbaustein einbaue geht es aber. Hast du eine Idee woran das liegen könnte?
  • Hey Steve,

    vielen Dank!

    Dazu müsste ich einen Blick auf deinen Code werfen. Kannst du mir den Link zu deinem Shop schicken? Vielleicht sehe ich direkt etwas und kann dir einen Tipp geben.

    Gruß
    Alexander
  • Danke für die Anregung..., jedoch funktioniert das so nicht ganz, da die Icons dann bei der mobilen Ansicht immer schon im "nicht aufgeklappten Zustand" der footer--column column--hotline is--first block zu sehen sind, wie schon der erste Kommentator festgestellt hat! Schrteibt man diese dann noch in das div column--content, so erscheinen Sie dann in der mobilen Ansicht nicht mehr, zumindest bei mir, hehe. :)

    Schneller und besser gehts, wenn man den HTML Teil, also deine [...] direkt in den Textbaustein schreibt und das Styling der Icons über eine extra CSS Datei einbindet. Dafür einfach im Theme Manager einen neue Stylesheet Datei mit einbinden. Dann entfällt nämlich auch das lästige Cache leeren sowie das neu kompilieren des Themes !

    Vorteil: Mit dieser zusätzlichen CSS Datei kann man nämlich sämtliche CSS Regeln von Shopware überschrieben und weiß dann auch immer, wo man was geändert hat; nämlich nur in dieser Datei! ;-)

    PS: Was auch immer die Menschen über LESS und seine Vorteile erzählen, für mich ist und bleibt es was total unnötiges!
  • Irgendwie ist mein Code verschwunden...
  • Hallo Joschi,

    ja stimmt. Ich schaue mir das Problem die Tage an und Update den Beitrag, damit es auf der mobilen Ansicht angezeigt wird und entsprechend zugeklappt ist.

    Ja CSS ist manchmal wirklich einfacher. Ich denke es ist eine Frage des Geschmacks, was man gerne nutzen möchte. LESS hat meiner Meinung schon einige Vorteile wenn man mit einigen Zeilen arbeitet (ich spreche wirklich von einigen 100 oder 1000 Zeilen CSS Code).

    Gruß
    Alexander
  • Hallo Alexander,

    Auch bei mir hat das Einbinden super geklappt! Danke dafür!

    Ich hab nur ein kleines Problem, in meinem Handy Footer werden die Bilder nicht mehr mit eingeklappt!

    Irgendeine Idee wie Ich das lösen kann?

    Besten Dank

    Johannes
  • Hallo, klappt wunderbar, ich hab nur ein Problem.
    Die Icons haben einen "durchsichtigen Hintergrund", da mein Hintergrund auf der Homepage normal sehr dunkel ist, wirkt es nicht so schön. Ich habe versucht einfach über backcolor einen weißen Hintergrund einzubauen.
    .em-social-links li a i.fa-facebook-official{
    color: #3b5998;
    backcolor: #fff;

    Allerdings entsteht dan ein unschöner Rand oben und unten.
    Haben Sie da noch einen Tip für mich ?
  • Hallo Daniel,

    es freut mich sehr, dass es so problemlos geklappt hat.

    Ja der Rand ist bei mir auch da, wenn ich es anpasse. Ich würde bei einem sehr dunklem Hintergrund empfehlen die Farbe der Icons nur weiß zu machen, ohne den Hintergrund anzupassen.

    Das sieht, meiner Meinung nach, auch sehr edel aus. Die Icons lassen sich auch ohne jeweilige Logo Farbe gut erkennen.

    Gruß
    Alexander
  • Hallo Alexander,
    Du hattest einen Hinweis zu Smarty Snippet geschrieben.
    Beim Link zum Kontaktformular solltest du darauf achten, dass das Smarty Snippet benutzt wird und nicht der hardgecodete Link (‚/kontaktformular‘).

    Wie setze ich das Snippet richtig?

    Danke Tipp: Um Links zu deaktivieren, entferne das http(s)://.
  • Hallo Karl,

    du könntest das über die Textbausteine von Shopware lösen.

    An die Stelle wo der Link hinkommt einfach ein Snippet nutzen:
    ..href="{s name="HierEinSnippetName"}shopware...

    Im Backend unter Einstellungen > Textbausteine nach dem Namen suchen (im Beispiel HierEinSnippetName) und dort den passenden Link für die jeweilige Sprache setzen.

    Gruß
    Alexander
  • Sehr geehrter Herr Wolf,

    vielen Dank für das Howto. Es hat wunderbar funktioniert. Ich möchte anstatt von mailto:store@example.com leiber das Kontaktformular bei betätigen des Schalters öffnen.
    Ist richtig. Es scheint zu funktionieren. In Hinblick auf einen Store, der nach und nach in 8 Sprachen abgebildet werden soll, weiß ich nicht ob das Kontaktformular ein der jeweils richtigen Sprache angezeigt wird.

    Vielen Dank für die Hilfe
  • Hallo Karl,

    vielen Dank für die netten Worte!

    Prima, dass es bei dir geklappt hat.

    Wir können gerne zum "Du" wechseln.

    Beim Link zum Kontaktformular solltest du darauf achten, dass das Smarty Snippet benutzt wird und nicht der hardgecodete Link ('/kontaktformular').

    Können uns den Shop gerne anschauen. Einfach per Mail melden: i@8mylez.com

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz