Divi Theme - 10% OFF

Erhalte 10% Rabatt auf das meistverkaufte WordPress Theme.

Divi Theme - Cyber Monday Sale

Das meistverkaufte WordPress Theme!

Tage
Stunden
Minuten
Sekunden

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

Social Media und Share Icons Desktop und Smartphone Mockup
Zuletzt aktualisiert: 15. September 2023

Nutzerbewertungen

4.8/5 – (19 votes)

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.

Inhaltsverzeichnis

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

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.

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.

Social Media Buttons mit dem PlugIn „Easy Social Icons“ hinzufügen:

  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!

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

Individuelle Social Media Icons, die mit logomakr.com erstellt wurden.

Social Media Buttons ohne PlugIn hinzufügen

  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!

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.

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.

Warum mit einem PlugIn?

Generell bin ich kein großer Fan von vielen 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.

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.

Was macht das PlugIn „Shariff Wrapper“ anders?

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.

Social Share Buttons mit „Shariff Wrapper“ einbinden:

  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!

Beispiel:

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:

Custom CSS Code:

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

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.

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!

Social Share Buttons mit „AddThis“ hinzufügen:

  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!

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 🙂

4.8/5 – (19 votes)

Oder empfehle ihn deinen besten Freunden! 😉

Starte jetzt mit deiner eigenen WordPress Website: zum WordPress Tutorial!

4.8/5 - (19 votes)
Patrick Ruh

Patrick Ruh

Im Jahr 2017 gründete er WP Wizard, um Selbstständigen und kleinen Unternehmen bei der Erstellung einer Webseite unter die Arme zu greifen. Er absolvierte seinen Master in Business Development, Produkt- und Start-up Management und studierte Internet Marketing, User Experience und Entrepreneurship in den USA. Seine Tutorials werden monatlich von mehreren Tausend Besuchern angeschaut und inzwischen von verschiedenen Universitäten, Hochschulen und Volkshochschulen genutzt, um in das Thema „WordPress“ einzuführen. Seit 2019 ist er Co-Founder und CMO bei timeBuzzer, einer Zeiterfassungslösung für Freiberufler und Unternehmen.

13 Kommentare

  • Hallo zusammen,

    auch wenn es schon etwas älter ist versuche ich mal mein Glück hier.

    Wenn ich auf meiner www. Sopy.de —> WhatsApp klicke, kommt nur ein Link bei mir. Ich möchte jedoch gern ein Bild sehen. Aktuell nutze ich Shariff 4.6.5, vielleich kann mir eine dazu helfen?

    Antworten
    • Hi,

      das kann mit einem Open Graph Tag realisieren. Diese Einstellungen ist in den meisten SEO Plug-ins enthalten.

      Beste Grüße
      Patrick

      Antworten
  • Lieber Patrick,
    ich habe das Plugin ‚easy social icons‘ schon länger auf meinem Blog ‚typisch-heike.de‘ installiert. Es erscheint allerdings nicht bei jedem Blogpost, sondern in der Sidebar, wenn man ganz runter scrollt. Was muss ich machen, damit die icons bei jedem Beitrag eingefügt werden?

    Vielen Dank bereits im Voraus!

    Liebe Grüße, Heike

    Antworten
    • Hallo Heike,
      aktuell hast du lediglich ein Widget für Sidebar angelegt. Damit die Icons auch unter jedem Beitrag erscheinen, musst du den Shortcode jeweils unter deinem Beitragstext einfügen.
      Leider hat das Plugin keine Einstellung, dass die Icons automatisch unter jede Beitragsseite einfügt werden. (Zumindest konnte ich keine passende Einstellung finden)
      Ich hoffe ich konnte dir weiterhelfen!
      Gruß Patrick

      Antworten
  • Hey,

    ist ein einloggen auf irgendeiner Plattform nötig bzw. muss ich mir bei einem Anbieter einem Account machen um es nutzen zu können?

    Beste Grüße

    Antworten
  • 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

    Antworten
    • 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

      Antworten
  • 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

    Antworten
  • 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

    Antworten
    • 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!

      Antworten

Schreibe einen Kommentar

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

Aktueller Top Deal!

10% Rabatt auf das Divi Theme von Elegant Themes!