WordPress: Sticky Footer Sharebar ohne Plugin installieren

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. 🙂

BerĂŒcksichtige: Hierbei handelt es sich um Code, der nur mit WordPress kompatibel ist.

Aber, wenn du etwas Ahnung von deinem CMS hast, kannst du den Code aber sicher auch fĂŒr Typo3, Joomla oder andere CMS umbauen. 😉

✔ Analytics-BONUS

Diese Share-Buttons enthalten Google-Analytics-Tracking-Codes, mit denen du das Klickverhalten und das Aufrufverhalten der geteilten URLs ĂŒberprĂŒfen kannst. 😉

Vor- und Nachteile dieser Sticky Sharebar im Footer

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

SchnellĂŒbersicht zur Sticky-Footer-Sharebar:

Warum eine Sticky Footer Sharebar?

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

Vorteil dieser Sticky Sharebar

Sharebuttons als Sharebar im Footer von WordPress Themes ohne Plugin

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.

HTML Code fĂŒr footer.php

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
BerĂŒcksichtige...
  • 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

CSS Code fĂŒr die Sharebar

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.

Fazit zur selbstgemachten Sharebar in WordPress

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:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.