Social Media und Share Buttons auf WordPress Webseiten einfügen!

Social Media und Share Icons auf Desktop und Smartphone und Beitragstitel

Social Media und Share Buttons zu deiner WordPress Website hinzufügen!

 

Damit du die Power sozialer Netzwerke optimal für dich bzw. deine WordPress Website nutzen kannst, solltest du Social Media Buttons und Social Share Buttons auf deiner Website einbinden.
In dieser Anleitung finden WordPress Neulinge als auch erfahrenere Nutzer relevante Informationen zur Implementierung von Social Buttons auf ihrer WordPress Website.

 

 

 

1. Social Media Buttons vs. Social Share Buttons

Social Media Buttons nennt man Buttons mit den Logos von sozialen Netzwerken. Durch diese Buttons kann man auf seiner Website zeigen, das man auch in den sozialen Netzwerken vertreten ist. Diese Buttons werden ganz einfach mit direkten Links zu deinen sozialen Profilen wie z.B. deine Fanseite auf Facebook, Twitter, Instagram, Google Plus etc. hinterlegt.

So gelangen deine Webseitenbesucher einfacher und wahrscheinlicher auf deinen sozialen Profilen und können dir folgen.

 

Vorteil:

  • Mehr Follower auf deinen sozialen Profilen
  • Verleiht deinen Inhalten mehr Glaubwürdigkeit
  • Aufbauen einer Brand
  • Weitere Trafficquelle

 

Social Share Buttons dagegen geben dem Besucher deiner Webseite die Möglichkeit, deine Inhalte bzw. deine Seite direkt in ihren sozialen Profilen zu posten und somit mit ihren Freunden zu teilen. Dabei wird es dem Webseitenbesucher so einfach wie möglich gemacht.

 

Vorteil:

  • Einfaches Teilen deiner Inhalte
  • Mehr Seitenbesucher
  • Virale Effekte möglich

 

 

 

2. Social Media Buttons auf WordPress Website einfügen

Social Media Buttons geben dir eine effektive und optisch ansprechende Möglichkeit Besucher auf deine soziale Profile weiterzuleiten. Bei vielen WordPress Themes gibt es bereits die Möglichkeit Facebook, Twitter, YouTube, Instagram oder Google Plus Icons einzufügen und diese mit einem Link zu deinen entsprechenden Profilen zu hinterlegen. Falls dein Theme diese Möglichkeit nicht bietet, gibt es unter anderem folgende zwei Möglichkeiten diese trotzdem auf deiner WordPress Website einzubinden.

 

 

2.1 Implementierung mit einem PlugIn

Die einfachste Möglichkeit Social Media Buttons auf einer WordPress Webseite hinzuzufügen ist über ein PlugIn. Davon gibt es Einige in der WordPress PlugIn Sammlung, welche sich durch verschiedene Designs, Positions- und Einstellmöglichkeiten unterscheiden.

Mir gefällt das PlugIn „Easy Social Icons“. Einfach, nicht aufgeblasen und tut was es soll.

 

Beispiel:

Social Media Buttons - Facebook, Twitter, YouTube, Google Plus
Mit dem WordPress PlugIn "Easy Social Icons" kannst du ganz einfach zwischen verschiedenen Designs wählen, als auch eigene Icons hochladen.

 

 

2.1.1 So fügst du Social Media Buttons mit dem PlugIn „Easy Social Icons“ auf deiner WordPress Website hinzu:

  1. Logge dich in dein WordPress Dashboard ein.
  2. Gehe auf Plugins > Installieren
  3. Suche nach dem PlugIn: „Easy Social Icons“
  4. „Easy Social Icons“ PlugIn von „cybernetikz“ installieren und aktivieren
  5. In den PlugIn Einstellungen Icons erstellen und Links anpassen (All Icons/Add New)
  6. Eventuell Reihenfolge anpassen (Sort Icons)
  7. Design anpassen (Größe, Anordnung, Farbe, Form etc.) (Settings & Instructions)
  8. 8. Social Media Buttons per Widget, Shortcode oder PHP Template Tag auf Webseite einfügen.
  9. Fertig!

 

 

 

2.2 Implementierung ohne PlugIn

 Ohne PlugIn ist das Ganze deutlich umständlicher, da ihr zusätzlich noch Social Icons erstellen müsst.

 

Beispiel:

Blaue Social Media Buttons - Facebook, Twitter, YouTube, Google Plus
Diese Icons wurden mit logomakr.com erstellt.

 

 

2.2.1 So fügst du Social Media Buttons ohne PlugIn auf deiner WordPress Website hinzu:

  1. Erstelle Social Media Logos (z.B auf logomakr.com) und speichere diese ab.
  2. Logge dich in dein WordPress Dashboard ein.
  3. Gehe auf Medien > Medienübersicht
  4. Icons als PNG Dateien in Mediathek hochladen
  5. Social Media Logos auf beliebiger Seite bzw. beliebigem Beitrag hochladen und Links zu deinen sozialen Profilen versehen.
  6. Seite/ Beitrag aktualisieren.
  7. Fertig!

 

 

 

3. Social Share Buttons auf WordPress Website einfügen

Social Share Buttons sind meiner Meinung nach für jede Seite ein Muss. Einmal implementiert, können Besucher jederzeit deine Beiträge und Seiten ganz einfach mit den Kontakt aus ihren sozialen Netzwerken teilen. Der große Vorteil ist, dass du im Gegensatz zu den Social Media Buttons keine sozialen Profile besitzen und pflegen musst.

 

 

3.1 Implementierung mit einem PlugIn

Die momentan einzige einfache Möglichkeit datenschutzfreundliche Sharing Buttons auf seiner Website einzubinden, ist über das kostenlose PlugIn „Shariff Wrapper“. Dieses wurde durch „c’t – heise online“ als Open Source Projekt auf Github veröffentlicht.

 

Beispiel:

Social Share Buttons - Shariff Wrapper - Facebook teilen, Twittern, Google Plus teilen, Pinterest
"Shariff Wrapper" ist das momentan einzige WordPress PlugIn mit datenschutzfreundlichen Sharing Buttons.

 

 

3.1.1 Warum mit einem PlugIn?

Generell bin ich kein großer Fan von PlugIns und versuche so viel wie möglich ohne umzusetzen, doch Social Sharing ist ein heikles Thema was das Thema Datenschutz angeht. Das bekannte Computermagazin „c’t“ vom heise online Verlag hat sich diesem Problem angenommen und die Entwicklung eines datenschutzkonformen Sharing PlugIns angestoßen, da es momentan auf dem Markt praktisch kein PlugIn gibt, dass in Deutschland als datenschutzkonform gilt.

 

 

3.1.2 Worin liegt das Problem bei Sharing Buttons?

Fast alle Sharing-Buttons schicken Informationen über das Surfverhalten der Seitenbesucher an die sozialen Netzwerke. Eine Erlaubnis vom Besucher wird in der Praxis eigentlich nie eingeholt, sondern es wird höchstens im Datenschutzhinweis darauf hingewiesen. – wenn überhaupt. Zudem nehmen es andere Länder nicht so genau mit dem Datenschutz, wie Deutschland. Deshalb legen z.B. gerade die englischsprachigen PlugIns überhaupt kein Augenmerk auf Möglichkeiten, dem Besucher mehr Datenschutz zu bieten.

 

 

3.1.3 Was macht das PlugIn „Shariff Wrapper“ anders als andere Sharing PlugIns?

Es werden nicht direkt die Daten des Besuchers an die sozialen Netzwerke geschickt, sondern lediglich die Serverdaten der Webseite. So können keine Rückschlüsse über den eigentlichen Besucher gemacht werden.

 

 

3.1.4 Und so fügst du Social Share Buttons mit dem „Shariff Wrapper“ auf deiner WordPress Website hinzu:

  1. Logge dich in dein WordPress Dashboard ein.
  2. Gehe auf Plugins > Installieren
  3. Suche nach dem PlugIn: „Shariff Wrapper“
  4. „Shariff Wrapper“ PlugIn von „ Jan-Peter Lambeck & 3UU“ installieren und aktivieren
  5. Grundlegene Einstellungen vornehmen
  6. Shariff Shortcode an beliebiger Stelle einfügen. (z.B. unter einem Blogpost, auf einer Seite, oder in einem Text Widget in der Seitenleiste.)
  7. Fertig!

 

Tipp: In den Optionen kannst du auch einstellen, dass an bestimmten Stellen (z.B. immer vor und/oder nach einen Blogpost) automatisch die Social Sharing Buttons eingefügt werden. Das macht vorallem bei größeren Seiten Sinn.

 

 

Du möchtest, dass Leute deinen Artikel teilen? Ich auch! 🙂

 

Teste das PlugIn und tue Gutes!

 

 

 

3.1.5 Optional: WhatsApp Button nicht auf Tablet zeigen

Falls du dich entscheiden solltest einen WhatsApp Sharing Button zu verwenden, empfehle ich dir diesen nur auf einem Smartphone anzeigen zu lassen. Auf größeren Bildschirmen (z.B. Desktop) wird dieser standardmäßig schon verborgen, doch leider gibt es keine passende Funktion in den PlugIn Einstellungen, um den Button auch auf Tablets bzw. auf mittleren Displaygrößen zu verbergen.

Falls du das trotzdem möchtest, gibt es aber eine einfache Möglichkeit dies zu tun. Du musst dazu lediglich den folgenden CSS Code auf deiner Seite einfügen:

@media (max-width:550px) { .shariff .whatsapp { display: none; } }

Am Einfachsten machst du das über:

a) ein Custom CSS PlugIn. (z.B. „Simple Custom CSS“)
b) ein bereits im Theme integriertes Custom CSS Feld.

 

 

 

 

3.2 Implementierung ohne PlugIn

Anbieter wie AddThis und ShareThis ermöglichen dir ebenfalls die einfache Integration von Social Share Buttons auf deiner Website. Und das ohne die Installation eines PlugIns! Mehr oder weniger – denn bei dieser Variante wird ein externes Script geladen, was das Laden der Seite logischerweise auch verlangsamt. Das war aber nicht der Grund warum ich mich gegen diese Methode entschieden habe, sondern der Datenschutzaspekt. Bei Benutzung des Script wird das Nutzungsverhalten der Webseitenbesucher getrackt und an die sozialen Netzwerke gesendet. Dabei müssen die Besucher noch nicht ein eingeloggt sein, geschweige denn überhaupt einen Account bei diesen Netzwerken besitzen. In anderen Ländern meist kein Problem, in Deutschland eher bedenklich, weshalb ich persönlich dieses Risiko nicht eingehen wollte. Dennoch benutzen auch viele deutsche Seiten den Dienst von AddThis und zum Teil sind diese Seite auch alles andere als klein und unbekannt.

 

Achtung: Diese Variante ist aus datenschutztechnischer Sicht bedenklich!

 

Beispiel:

Social Sharing Buttons - AddThis - Facebook, Twitter, E-Mail, Google Plus, WhatsApp
Die Social Share Buttons von AddThis sind beim Scrollen jederzeit präsent und machen optisch viel her!

 

3.2.1 Und so fügst du Social Share Buttons mit dem „AddThis“ auf deiner WordPress Website hinzu:

  1. Erstelle einen Account bei z.B. AddThis.
  2. Logge dich anschließend auf ein.
  3. Social Buttons Funktion auswählen
  4. Style auswählen
  5. Soziale Netzwerke auswählen und eventuell Reihenfolge anpassen
  6. Eventuell weitere optische Einstellungen anpassen
  7. Code anzeigen lassen
  8. Script Code kopieren
  9. Logge dich in dein WordPress Dashboard ein.
  10. Gehe auf Design > Editor
  11. Theme Header (header.php) auswählen
  12. Script Code innerhalb der header-tags einfügen
  13. Klicke den „Datei aktualisieren“ Button.
  14. Fertig!

 

Hinweis: Nach einem Theme Update muss der Script Code erneut im Header platziert werden.

 

 

 

4. Fazit

Die Einbindung von Social Media Buttons in Form von Links zu den eigenen sozialen Kanälen oder in Form von Sharing Buttons, mit welchen der Besucher deine Inhalte ganz einfach teilen kann, ist ein Muss für fast jede Website. Diese sorgen nicht nur für mehr Besucher sondern geben dem Besucher Vertrauen. Zudem kann es für die Suchmaschinenoptimierung von Vorteil sein, solche Buttons den Besuchern anzubieten.

Das größte Problem bei Social Share Buttons ist der Datenschutz. Für deutsche Webseitenbetreiber sind praktisch alle Sharing PlugIns, vorallem die die externen Scripts einbinden, unbrauchbar. Gerade die großen bekannten WordPress PlugIns aus dem amerikanischen Raum können nicht benutzt werden, wenn man kein Risiko hinsichtlich einer Abmahnung eingehen möchte.
Glücklicherweise gibt es mittlerweile das PlugIn „Shariff Wrapper“, welches genau aufgrund dieser Problematik entwickelt wurde. Ich benutze es selbst auf meinen Seiten und empfehle es definitiv weiter!

Siehst du Dienste wie die von AddThis oder ShareThis kritisch? Schreibt mir deine Meinung zu diesem Thema!

Ich hoffe meine Anleitung hat dir weitergeholfen und wünsche dir viel Spaß mit deinen neuen Social Media bzw. Sharing Buttons!

 

 

Hat dir meine Anleitung gefallen? Dann gebe doch eine positive Bewertung 🙂

Social Media und Share Buttons auf WordPress Webseiten einfügen!
5 (100%) 7 votes

 

Oder empfehle ihn deinen besten Freunden! 😉

 

 

Starte jetzt mit deiner eigenen WordPress Website!

Hier geht’s zur Schritt-für-Schritt Anleitung!

 

Patrick
23 Jahre, Student. In und neben meinem Studium beschäftige ich mich intensiv mit Internet Marketing Marketing, Webdesign, User Experience und Suchmaschinenoptimierung. Meine Freizeit widme ich dem Schlagzeug spielen.

7 Kommentare

  1. Stephanie Andersen sagt:

    Hallo Patrick,

    eine super Anleitung!!!!!
    Ich arbeite mich gerade intensiv durch dein Tutorial.
    Eine Frage zu Minute 38:52, dort fügst du deine 3 Logos ein.
    Ich würde gerne andere verwenden, habe diese auch schon erstellt.
    Komme aber mit der Größe nicht zurecht. Ich finde auch keinen Hinweis in deinem Download.
    Auf welche Größe muss ich meine Logos für den mittleren Bereich bringen.
    Herzlichen Dank schon mal.
    Viele Grüße und weiterhin viel Erfolg.

    Stephanie Andersen

    • Patrick sagt:

      Hallo Stephanie,

      vielen Dank für deinen Kommentar! Freut mich sehr! 🙂

      Also ich habe darauf geachtet, dass alle Icons die gleiche Höhe haben, da sonst der Text unterhalb versetzt ist und das meiner Meinung nach optisch nicht gut aussieht.
      Achte beim Erstellen mit Logomakr darauf, dass du oben immer die gleiche Höhe eingibst. (Breite x Höhe).

      Später kannst du dann im visuellen Editor (nachdem du das Bild über „Medien hinzufügen“ hinzugefügt hast) die Größe des Logos nochmal verändern. Ich habe dort dann alle drei Logos auf eine Höhe von 154px gezogen.

      Beste Grüße und weiterhin viel Erfolg!

  2. […] unter anderem Facebook, Twitter, GooglePlus und viele weitere. Eine Anleitung dazu habe ich hier […]

  3. Bärbel sagt:

    Hallo Patrick,
    ich habe den Shariff Wapper erfolgreich installtiert, aber wenn ich meinen Blogbeitrag auf Facebook teile erscheint bei jeden Beitrag mein Header-Bild der Startseite. Kann ich das irgendwo einstellen / ändern, damit mein jeweiliges Beitragsbild auf Facebook erscheint? Ich würde mich riesig über eine Antwort freuen.
    LG
    Bärbel

  4. Andrea sagt:

    Hallo Patrick,

    super Artikel! 🙂
    Ich habe Shariff auch installiert (für die Teilen-Funktion unter den Blogbeiträgen) und unsere Datenschutzerklärung entsprechend angepasst.
    Ich nutze allerdings zusätzlich in einigen Bereichen (zum Beispiel in der Fußzeile) das WordPress Element Soziale Medien, um direkt auf unsere jeweiligen Profile zu verlinken.
    Weißt du, ob das Problem mit den herkömmlichen Teilen-Buttons (Besucher werden sofort von Social-Media-Seiten mit Ihrer IP-Adresse erfasst) auch bei den Social Media Buttons gilt, sodass man sich da auch etwas anderes einfallen lassen sollte oder zumindest die Datenschutzerklärung doch nochmal anpassen sollte?
    Danke schonmal und liebe Grüße
    Andrea

    • Patrick sagt:

      Hallo Andrea,

      vielen Dank für dein positives Feedback! 🙂

      So wie es aussieht, sind die Icons lediglich mit ganz einfachen Links zu euren sozialen Profilen hinterlegt sind. In diesem Fall sollte das überhaupt kein Problem darstellen.

      Beste Grüße
      Patrick

Schreibe einen Kommentar

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