In diesem Artikel zeige ich dir, wie ich meine Sticky Sharebar erstellt habe und teile mit dir den Code, damit du ihn ganz easy in deine Seite ebenfalls einbauen kannst. 🙂 test
Aber, wenn du etwas Ahnung von deinem CMS hast, kannst du den Code aber sicher auch für Typo3, Joomla oder andere CMS umbauen. 😉
Diese Share-Buttons enthalten Google-Analytics-Tracking-Codes, mit denen du das Klickverhalten und das Aufrufverhalten der geteilten URLs überprüfen kannst. 😉
Inhaltsverzeichnis
Vorteile
- Kein Plugin benötigt
- Auf schnelle Ladezeiten optimiert
- Einfach und schnell umsetzbar via FTP und HTML, auch für Einsteiger
Nachteile
- Anpassungen nur im HTML via FTP
- HTML und CSS-Kenntnisse benötigt
Benötigt
- FTP, HTML und CSS-Kenntnisse
- Fontawesome-Font
- FTP-Zugang zu footer.php und zur style.css
Gerade auf Smartphones ist eine Sticky Footer Sharebar äußerst interessant. Denn sie erlaubt es, dass deine WordPress-Inhalte mit einem Knopfdruck auf deinen ausgewählten Plattformen geteilt und weitergegeben werden können.
- Sticky bedeutet, dass die Sharebar immer ganz unten des Displays erscheint – egal ob und wie auf dem jeweiligen Display gescrollt wird.
- Sharebar bedeutet im Prinzip, dass es sich dabei um einen besonderen Bereich auf deiner Website handelt. In dem Fall wollen wir den Bereich in den Footer packen und auch so sticky halten, dass er immer mit scrollt.
- Die Sharebar enthält (ohne Anpassungen) Share-Links zu: Facebook, Twitter, Google+, Whatsapp und Sharen per E-Mail
Sharebuttons als Sharebar im Footer von WordPress Themes ohne Plugin
- Du benötigst kein Extra Plugin. Weniger fehleranfällig für Hacker.
- Der Code ist maximal reduziert. Super für schnelle Ladezeiten deiner Website.
- Alles manuell anpassbar.
Was ist im Code alles drin?
Natürlich ist der Footer-Sticky-Code enthalten mit 5 Share-Links zu: Facebook, Twitter, Google+, Whatsapp und E-Mail.
Trotzdem hat dieser Code noch zwei Besonderheiten:
- Der Code enthält Google Analytics-Parameter, sodass du in Google Analytics überprüfen kannst, welche Share-Buttons geklickt wurden
- Außerdem enthält der Code Ereignis-Events. Wenn Nutzer auf die geteilten Links klicken, erhältst du in Google Analytics ebenfalls Informationen darüber.
Kurz gesagt: Du kannst damit nachvollziehen, wer alles einen deiner Share-Buttons geklickt hat und anschließend, wie viele Personen über diesen geteilten Link auf deine Seite gekommen ist.
Ziemlich nice für uns Online Marketer um herauszufinden, wie gut diese Share-Buttons funktionieren. 🙂
Der Code zum Einbauen (mit Erklärungen)
Hier nun also der Code, den du in deine Website einbauen musst. Beachte hierbei, dass du jederzeit Anpassungen an den Code machen kannst, wie du es wünschst.
Der komplette HTML-Code für deinen Code – füge folgende Zeilen in die footer.php deines Templates ein:
<!-- Sharebar -->
<div class="sharerbar">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&utm_source=fbsharebutton" onclick="if( typeof ga != 'undefined' ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get('name')+'.send','event','Sharebar','click','FB',1); } } if( typeof _gaq_trackers != 'undefined' ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+'._trackEvent','Sharebar','click','FB',1]); } } ;" class="sblink sblinkfb" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink();?>&utm_source=twsharebutton" onclick="if( typeof ga != 'undefined' ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get('name')+'.send','event','Sharebar','click','Twitter',1); } } if( typeof _gaq_trackers != 'undefined' ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+'._trackEvent','Sharebar','click','Twitter',1]); } } ;" class="sblink sblinktw" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="https://plus.google.com/share?url=<?php the_permalink();?>&utm_source=gpsharebutton" onclick="if( typeof ga != 'undefined' ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get('name')+'.send','event','Sharebar','click','Google+',1); } } if( typeof _gaq_trackers != 'undefined' ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+'._trackEvent','Sharebar','click','Google+',1]); } } ;" class="sblink sblinkgp" rel="nofollow"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="whatsapp://send?text=<?php the_permalink();?>&utm_source=washarebutton" onclick="if( typeof ga != 'undefined' ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get('name')+'.send','event','Sharebar','click','Whatsapp',1); } } if( typeof _gaq_trackers != 'undefined' ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+'._trackEvent','Sharebar','click','Whatsapp',1]); } } ;" class="sblink sblinkwa" rel="nofollow"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
<a href="mailto:?subject=Gelesen%20auf%20nextlevelSEO.de:%20<?php the_title(); ?>&body=Sehr%20empfehlenswerter%20Artikel%3A%20<?php the_title(); ?>%20hier:%20<?php the_permalink();?>" onclick="if( typeof ga != 'undefined' ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get('name')+'.send','event','Sharebar','click','E-Mail',1); } } if( typeof _gaq_trackers != 'undefined' ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+'._trackEvent','Sharebar','click','E-Mail',1]); } } ;" class="sblink sblinkem" rel="nofollow"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
<script src="https://use.fontawesome.com/80f4511a15.js" async></script>
</div>
<!-- Sharebar -->
In diesem Code beschreiben wir, was und auf welchen Social Media Plattformen bzw. per Whatsapp und E-Mail geteilt werden soll.
- Facebook’s sharer.php
Hier teilen wir Facebook unsere URL mitsamt einer Analytics-Tracking-URL mit - Twitter
Hier teilen wir Twitter mit, dass es folgendes in der Reihenfolge teilen soll: Artikelüberschrift und anschließend die URL. - Google+
Auch hier übermitteln wir die URL zum Teilen - Whatsapp
Wie Google+ und Facebook übermitteln wir nur die URL - E-Mail via mailto:
Hier übermitteln wir, dass im Betreff steht: „Sehr empfehlenswerter Artikel: ÜBERSCHRIFT DES ARTIKELS“.
Außerdem soll im E-Mail-Textbereich erscheinen: „Sehr empfehlenswerter Artikel: ÜBERSCHRIFT DES ARTIKELS hier: URL ZUM ARTIKEL
- Du kannst jeden Share-Button via HTML anpassen wie du möchtest
- Ebenso kannst du weitere Share-Buttons hinzufügen oder andere löschen.
- Diese Sharebar wird standardmäßig anzeigen: Sharen via Facebook, Twitter, Google+, Whatsapp und per E-Mail
Damit die Sharebar auch gut aussieht solltest du folgenden Code in deine style.css-Datei hinzufügen:
.sharerbar {
background-color: #000;
position: fixed;
display: table;
bottom: 0;
left: 0;
line-height: 3em;
width: 100%;
z-index: 99999;
table-layout: fixed;
}
.sharerbar .sblink {
display: table-cell;
color: #fff;
text-align: center;
font-family: fontawesome;
font-size: 1.25em;
}
.sharerbar .sblinkfb {
background-color: #3B5999;
}
.sharerbar .sblinktw {
background-color: #1DA2F3;
}
.sharerbar .sblinkgp {
background-color: #Da4337;
}.sharerbar .sblinkwa {
background-color: #2aA71A;
}
.sharerbar .sblinkem {
background-color: #efefef; color: #333;
}
@media only screen and (min-width: 768px) {
.sharerbar, .sharerbar .sblink {display: none;}
}
Berücksichtige bei diesen Share-Buttons:
- Egal, ob die Share-Buttons hinzufügst oder andere entfernst. Alle Share-Buttons werden in diesem Fall gleich breit dargestellt (wegen display: table und table-layout: fixed; per CSS)
- Wird die Sharebar nicht angezeigt, solltest du bei .sharerbar mit der Nummer bei z-index spielen. Auch wenn sie sich quasi in den Vordergrund drängt kann es sein, dass dein Template sich noch weiter nach vorne drängt. Erhöhe dann die Zahl des z-index im CSS.
- Bei manuellen Anpassungen (neuer Button oder Farbapassungen) musst du natürlich diesen CSS-Code daraufhin anpassen oder ergänzen.
Besonderheit: Fontawesome laden
Was hier als Symbole geladen werden stammen aus dem Font „fontawesome“. Fontawesome ist eine echt coole Schriftart, welche Symbole anstelle von einfachen Buchstaben darstellt.
Wenn du bereits Fontawesome verwendest musst du nichts weiter tun.
Wenn du Fontawesome noch nicht verwendest, musst du Fontawesome in dein Template mit einbauen. Mehr Informationen dazu findest du hier: → Fontawesome: Get startet
Anpassungen
Wenn du dich ein bisschen mit CSS und HTML auskennst, kannst du natürlich jederzeit Anpassungen am Code durchführen. Falls du dich nicht so gut auskennst, hier ein paar Abpassungsmöglichkeiten:
- Sharebar lässt sich nicht darstellen
Dann suche im CSS nach dem Bereich .sharerbar und erhöhe hier die Zahl bei z-index - Ich will größere/kleinere Share-Icons
Dann schaue hier im CSS nach .sharerbar .sblink und passe dabei den Bereich font-size an; erhöhe den Wert (z. B. auf 1.75em;) um die Symbole der Share-Buttons größer wirken zu lassen oder reduziere sie (auf z. B. 0.85em), um sie zu verkleinern. - Ich will die Sharebar ganz oben haben, nicht ganz unten
Suche im CSS nach .sharerbar: Ersetze den Bereich bottom: 0; durch top: 0; - Ich will einen Share-Button nicht (wie etwa Google+)
Dann gehe in den HTML-Bereich und entferne einfach die Zeile des (im Beispiels) Google+ Buttons. Die restlichen Buttons passen sich automatisch an die Größe des Bildschirms an.
Genauso kannst du einen weiteren Share-Button hinzufügen; mit etwas HTML-Kenntnissen kannst du das easy machen. 🙂 - Ich möchte die Sharebar auch auf Desktop ausgeben
Suche im CSS-Code nach folgender Zeile und lösche sie ganz einfach:@media only screen and (min-width: 768px) { .sharerbar, .sharerbar .sblink {display: none;} }Nur dieser Zusatz erzeugt, dass die Sharebar nur bis zu einer maximalen Auflösung von 768 Pixeln ausgegeben wird (in der Regel alle Smartphone-Auflösungen und maximal noch Tablets hochkant). Du kannst die Pixelanzahl hier natürlich auch anpassen, um für dich dein bestes Ergebnis zu erbringen. Als Beispiel: Ich habe auf meinem Blog 1280 Pixel statt 768 Pixel eingestellt.
Warum nicht per Plugin?
Natürlich geht es auch jederzeit, wenn man kurz eine Google-Suche anstößt und nach einem entsprechenden Plugin sucht. Aber:
Plugins haben üblicherweise die Eigenschaft, dass sie viel mehr mitbringen als das, was du am Ende tatsächlich benötigst. Mit dieser Methode greifst du zwar aktiv in dein WordPress-Template ein, dafür hast du aber auch die schnellste Methode. Ohne überschüssigen Code der nicht verwendet wird.
Wenn außerdem von Hackern in einem Plugin ein ausnutzbarer Fehler entdeckt wird, ist deine Seite schnell Angreifern ausgeliefert. Diese Methode ist zwar AUSDRÜCKLICH nicht die sicherste, aber da sie nur von einem Bruchteil der Internetnutzer verwendet wird, ist ein breitgefächerter Angriff eher unwahrscheinlich.
Eine Sharebar einzubauen mit Share-Buttons für Facebook, Twitter, Google+. Whatsapp und E-Mail ist wirklich kein Hexenwerk und benötigt auch kein Plugin als solches. Diese Methode ist effizient, (ladezeiten-)schnell und eben einfach zum einbauen, ohne dass ein extra Plugin dafür benötigt würde.
Wenn dir dieser Artikel gefallen hat, kannst du ihn ja mit einem Klick auf einen der Buttons lecker sharen. 😉
Ansonsten wünsche ich dir natürlich wie immer viel Spaß und Erfolg mit deiner Seite. Wenn du mehr lesen willst:
