Social Media

Social Media Buttons mit Icons, ohne Javascript und Plugin

Für Performance und Datenschutz: Follow-/Share-Buttons aus purem HTML, CSS, SVG sind einfach, flink und sicher.

Social Media Icons SVG Path
Social Media Icons aus Vektoren (Scalable Vector Graphics, SVG)

Wer Websites baut, muss Soziale Medien integrieren.

Die Frage ist nur:

  • Welche nimmst du?
  • Was hast du davon?
  • Wie machst du’s am besten?

Jede Website ist ein soziales Medium

Das Internet hat das Teilen (Sharing) neu erfunden.

Ursprünglich als gigantischer Hypertext, basierend auf der genialen Idee von Hyperlinks. Unterstrichene Wörter verknüpfen eine Publikation mit einer anderen, die wieder mit anderen usw. usf. Bis alle Publikationen weltweit miteinander verwoben sind. Eben dieses: World Wide Web.

Irgendwann wurde die Version 2.0 ausgerufen.

Seitdem dürfen die Benutzer und Benutzerinnen mitmachen.

Und das tun sie.

Sie kommentieren, generieren, diskutieren, gruppieren, lieben, hassen, verbünden sich … in unfassbaren Dimensionen und allen erdenklichen Spielarten. Und für alles und jede/n gibt es Plattformen, die sich besonders gut zum Teilen von … eignet.

Ja. Nein.

Muss man nicht alles gut finden, was auf diesen sozialen Spielplätzen so abgeht und dort – bis in die Unendlichkeit – dokumentiert bleibt.

Auf der anderen Seite: Welchen Sinn hat es, eine Website ins Netz zu stellen und diese nicht maximal zu vernetzen? Dann vielleicht doch lieber ins Tagebuch kritzeln oder ein Bild malen?

Nur für dich, mit der totalen Kontrolle? 🙂

Was ist ein Social Media Button?

Für dieses Keyword gewinne ich bei Google kein Featured Snippet mehr. Bleibt also unter uns. Ich verspreche, ich mach’s kurz.

Ein Social Media Button ist eine Schaltfläche am Bildschirm, wie andere auch.

Wer mit dem Finger drauftappt oder mit der Maus draufklickt, ruft eine neue Seite auf, die von einer Social Media Plattform wie Facebook, Youtube, Linkedin usw. kontrolliert wird. Die aktuelle Website verliert die Kontrolle. Die aufgerufene Website kann mit dem Klick machen, was sie will.

Im Idealfall ist das für alle Beteiligten eine Win-Win-Win-Situation und alle haben genau das davon, was sie erreichen wollen.

Interessant wird es in den Fällen, in denen das nicht klappt. Aber dazu gleich …

Like vs. Follow vs. Share Buttons

Bei einigen Social Media Buttons geht es um das Feedback vom Publikum:

  • gefällt mir, z.B. Facebook Like Button
  • gefällt mir / gefällt mir nicht, z.B. Youtube Thumb Up / Thumb Down
  • aufwerten / abwerten, z.B. Reddit, Upvote / Downvote

Bei anderen geht es um das Verbunden-Bleiben mit einem Programm, Kanal oder Benutzerprofil:

  • folgen (follow) z.B. auf Facebook, Instagram
  • abonnieren (subscribe) z.B. auf Youtube

Für die eigene Website die wichtigste Variante sind wahrscheinlich die Buttons zum Teilen (Sharing) von Artikeln, Seiten, Beiträgen (Posts).

Jedes Netzwerk, jede Social Media Plattform hat dafür eigene Varianten und Regeln entwickelt. Fast alle unterstützen mindestens das Folgen von Profilen und das Teilen von Inhalten. Die Plattformen machen es Website-Betreibern ausserdem sehr leicht, die Buttons auf der eigenen Website zu installieren.

In unterschiedlicher Form:

  • als statisches HTML-Snippet mit einem Image-Link
  • oder als dynamisches Javascript-Snippet

Und weil Javascript nicht ganz so einfach zum Einbauen ist, wird oft gleich ein Plugin angeboten, dass den Einbau per Installation und Aktivierung erledigt.

Und schon ist man mitten im Dschungel.

Genauso wie es riesige Icon-Sammlungen für Social Media Buttons gibt, kostenfrei oder kostenpflichtig, gibt es eine Unzahl von Dritten, die einem das endgültige, allumfassende Social Media Plugin ans Herz legen. Vor allem für WordPress, aber auch für so gut wie jedes andere Content Management System (CMS).

Damit nicht genug.

Um allen tatsächlichen und vermeintlichen Rechtsproblemen aus dem Weg zu gehen, gibt es noch eine Ladung von noch mehr Widgets und Plugins, die angeblich rechtssicher sind.

Social Media Plugins: kommt drauf an

Wenn du es dir wirklich super-einfach machen möchtest, mit Social-Follow- und Social-Share-Buttons auf deiner Website, ohne dass du selbst Hand an HTML und CSS legen musst, empfehle ich dir Shariff, für WordPress das Plugin dafür:

Shariff Wrapper

Diese Lösung geht auf eine Idee von c’t zurück und verspricht glaubwürdig, Social Media Buttons DSGVO-konform in deine Website einzubinden (Datenschutz-Grundverordnung, s. Wikipedia).

Von allen anderen Social Media Widgets, Plugins usw. rate ich ab.

Weil du (in der Regel 🙂 ) nicht selbst durchschauen kannst

  • was diese Skripte auf deiner Website anrichten
  • wie sie es technisch umsetzen
  • ob das der neueste Stand ist
  • wie oft Updates dafür eintrudeln werden
  • was die dann anrichten
  • welche Fehler und Sicherheitslücken damit behoben
  • welche Fehler neu gemacht werden
  • welche Lücken erst mal offen bleiben

Ja. Dieses Risiko trägt man z.B. mit WordPress sowieso. Aber mit jedem Plugin, was dazu kommt, umso mehr.

Und jedes mal gilt es Nutzen und Risiko abzuwägen.

Übrigens nicht nur, was das Software, Urheber-, Lizenz- und Datenschutzrecht angeht, sondern auch den Performance-Nachteil, den jedes weitere Skript und Plugin mit sich bringt.

Meine Abwägung: ganz einfach

Follow und Share finde ich gut.

In genau den paar Netzwerken, die für mich relevant sind:

  • Email: das älteste Soziale Medium, seit es Telefone gibt
  • WhatsApp: weil damit einfach jede/r erreichbar ist
  • Xing: weil es seit Jahren dazugehört, wie lange noch?
  • Facebook: wobei ich mich seit Jahren frage, warum?
  • Twitter: weil es das ist, was Facebook hätte werden können
  • Linkedin: weil es der internationale Standard ist
  • Instagram: aus Jux und Tollerei
  • Youtube: aus echter Begeisterung

Wenn man das Grundrezept kennt, ist die Umsetzung schnell erledigt.

Weil es simple, externe Links sind, die erst losgehen, wenn das Benutzende draufklickt und anschliessend immer noch genug Zeit hat, noch mal zu überlegen, ob es will, was sich da auftut.

Kein Plugin. Keine Updates. Keine Probleme.

Es sei denn … aber dazu kommen wir gleich noch …

Das Grundrezept: HTML + CSS + SVG

Wie beschrieben: ein Social Media Button ist auch nur ein Link. In HTML, in der einfachsten Form:

<a href="URL">TEXT</a>

Statt einem TEXT dürfen wir auch ein Bild verlinken (Image Link).

<a href="URL">
  <img alt="ALT_TEXT" src="PFAD_ZUR_BILDDATEI">
</a>

Um den Link später schön zu machen, per CSS, fügen wir einen passenden Namen als Selektor ein. So erhalten wir Zugriff auf die Klasse (class) von Elementen, für die dieselben Regeln gelten sollen. Hier: unsere Social Media Buttons.

<a href="URL" class="social-media-button">
  <img alt="ALT_TEXT" src="PFAD_ZUR_BILDDATEI">
</a> 

Unter normalen Umständen sind solche Bilddateien im JPG- oder PNG-Format. In weiter optimierter Form auch als WebP oder AVIF.

All diese Formate basieren auf der Idee, die Bilder als Pixelraster darzustellen. Mit dem Effekt, dass so kodierte Bilder schlecht skalierbar sind. Wenn man sie vergrössert, wirken sie verschwommen oder gar “pixelig”. Eben, weil das Raster immer gröber und die Pixel immer dicker werden 🙂

Die Alternative heisst: SVG, Scalable Vector Graphics, Skalierbare Vektorgrafik.

Egal wie klein, egal wie gross das Bild sein soll: das Raster passt immer, das SVG-kodierte Bild glänzt stets mit der besten Auflösung. Weil die Pixel dynamisch berechnet werden, aus Vektoren, die Linien, Kurven, Flächen usw. in mathematischen Formeln beschreiben.

Praktisch ist überdies: das SVG-Format gehört zu XML und kann deshalb als gewöhnlicher Text im HTML-Code stehen (inline, Inline-SVG).

Statt <img …> wird einfach der Tag <svg …> verwendet.

Hier ein vollständiges Beispiel für

  • einen HTML-Link
  • mit CSS-Klasse
  • und URL für Xing und “Share”
  • mit angefügter URL des aktuellen Posts
  • und TitleAttribut (auf dem Desktop als Tooltip angezeigt)

Der SVG- statt IMG-Tag ist fett hervorgehoben.

<a class="gc-share-link" href="https://www.xing.com/app/user?op=share;url=<?php echo $gc_post_link; ?>&amp;title=<?php echo $gc_post_title; ?>&amp;mini=true" target="_blank" rel="nofollow" title="Diesen Beitrag auf Xing teilen">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#fff" d="M0 0v24h24v-24h-24zm4.915 15l2.744-4.825-1.846-3.162h3.292l1.83 3.152-2.744 4.835h-3.276zm12.304 5h-3.253l-3.55-6.445 5.381-9.555h3.289l-5.38 9.555 3.513 6.445z"/>
</svg>
</a>

Und so sieht’s aus, ohne Link:

Das Beispiel stammt aus einem PHP-Snippet, mit den beiden Variablen $gc_post_link und $gc_post_title.

$gc_post_link enthält die URL des aktuellen Beitrags.

$gc_post_title enthält den Titel des aktuellen Beitrags.

Viel mehr PHP braucht es nicht.

Alles weitere findest du in den beiden hervorragenden Artikeln von Suraj Katwal auf wpLogOut. Vor allem auch viele weitere SVG Icons, Tipps und Tools, wie du bei Bedarf an weitere Follow- und Share-Links zu Social Media kommst, falls die üblichen Verdächtigen nicht ausreichen.

Die Links zu Surajs Artikeln findest du in den Quellen, unten, am Ende dieses Beitrags.

Die Luxus-Lösung z.B. mit GeneratePress

Wem das Kodieren von Hand zu umständlich ist, für HTML, CSS und SVG, wie oben beschrieben, der kann auch gleich zu einem “gescheiten” WordPress-Theme greifen, wie z.B. GeneratePress.

Dabei sind Icon-Buttons für Social Media Following und Sharing sicher kein Alleinstellungsmerkmal. Die meisten besseren Themes unterstützen das sehr ähnlich.

In jedem Fall ist es nützlich zu wissen, was hinter der Kulisse passiert, die der Gutenberg Block-Editor da vor einem aufbaut. Sollte irgendwas mit dem Editor nicht zu machen sein, ist ein HTML-Block schnell eingefügt und die Von-Hand-Methode reaktiviert, wie oben beschrieben.

Aber hier soll es ja um Luxus und Komfort gehen.

Dazu gehört meiner Meinung nach unbedingt auch eine “gescheite” Gutenberg-Erweiterung, z.B. in Form des Plugins GenerateBlocks.

Ähnliches leisten z.B. die Plugins Stackable oder Kadence Blocks.

GeneratePress Elements: Block, für den globalen Footer auf generateclicks.de
GeneratePress Elements Block für den globalen Footer auf generateclicks.de

Als praktisches Beispiel dient hier die globale “Fuss” im Layout von generateclicks.de (Footer).

Der ist als GeneratePress Elements Block realisiert.

Bestehend aus einigen Container-, Raster- und Buttons-Blöcken, s. Screenshot oben, die GenerateBlocks beisteuert.

social media buttons generatepress elements block footer button
GenerateBlocks Buttons für Social Media Icon Links, hier: Facebook, Twitter, Youtube

Greifen wir uns doch einfach den ersten Social Button heraus und sehen zu, was daran alles einzustellen ist:

  • Abstände (innen: Padding, aussen: Margin und Rahmen)
  • Farben (Text, Hintergrund für “normal” und “on hover”)
  • Hintergrund-Verlauf
  • Icon
  • Erweitert

Das alles separat für unterschiedliche Bildschirmgrössen:

  • Desktop (PC, Laptop, Notebook)
  • Tablet (iPad und dergleichen)
  • Mobil (Handy)
social media buttons generatepress elements block footer einstellungen
GenerateBlocks Button Einstellungen für Desktop, Tablet und Mobil

Das Ganze gliedert sich in 3 Ebenen, die über Tabs (Registerkarten) am oberen Rand erreichbar sind.

Darunter – wie üblich, zum Aufklappen – die Einstellungen im Detail.

social media buttons generatepress elements block footer button abstaende
GenerateBlocks Button Einstellungen Abstand für Abstände und Rahmen

Für mich manchmal immer noch etwas verwirrend: Die Einstellungen für die Rahmenstärke findet man unter “Rahmengröße”.

Und die klappen zusammen mit den Einstellungen für Innenabstand (Padding), Aussenabstand (Margins) und Rahmenradius auf.

Da waren wohl die Aufklapper ausverkauft …

social media buttons generatepress elements block footer button icon
GenerateBlocks Button Einstellungen Icon: Auswahl oder SVG einfügen

Unter dem Aufklapper “Icon” kommen wir dafür bündig zum Thema.

GeneratePress liefert bereits einen ganzen Satz von SVG-Icons mit. Untergliedert in die Rubriken Allgemein und Social Media. Und hier finden sich die beliebtesten Dienste und Plattformen zur Auswahl.

Wem das zu simpel ist, der kann in dem Textfeld Icon-SVG-HTML den Code für ein beliebig anderes Icon eingeben.

social media buttons generatepress elements block footer button icon 2
GenerateBlocks Button Einstellungen Icon: Grösse, Text entfernen

Social Media Buttons sind so verbreitet, dass das Icon allein genügt, finde ich.

Wer es aber hier ganz genau nehmen möchte, schiebt den Schalter Text entfernen zurück in die Ausgangsstellung, wie wir es von gewöhnlichen (Text-) Buttons gewohnt sind.

social media buttons generatepress elements block footer button farben
GenerateBlocks Button Farben für Text, Hintergrund, Rahmen (normal, hover)

Und selbstredend lassen sich für unsere Social Icon Buttons auch alle Farben schön einstellen. Getrennt für die normale Darstellung und die mit darüber stehendem Mauszeiger (Hover, Bei Mauszeigerkontakt).

social media buttons generatepress elements block footer button erweitert
GenerateBlocks Button: Erweiterte Einstellungen für Anker, ARIA, CSS

Unter Erweitert finden sich schliesslich noch Details zum HTML-Anker, ARIA-Label und zu zusätzlichen CSS-Klassen. Falls man dann doch wieder Lust auf

Design > Customizer > Zusätzliches CSS

bekommt 🙂

Rechtsfragen

Schon lange vor Erscheinen der DSGVO galt für alle, die eine Website ins öffentliche Internet stellen: Genaues weiss man kaum.

Klar ist, im Zusammenhang mit Social Media Icons und Social Media Buttons:

Die sozialen Plattformen und Netzwerke haben grundsätzlich alle üblichen Rechte an ihren Logos und Signets, z.B. in Form von Wort- und Bildmarken.

Einfach kopieren und für eigene Zwecke verwenden?

Ist nicht.

Nicht mal Nachbauen!

Wer also ganz, ganz sicher gehen möchte, dem bleibt wirklich nichts anderes übrig, als die von offizieller Seite, von den Plattformen selbst bereitgestellten Ressourcen zu verwenden, in Form der besagten Skripte und Plugins.

Mehr dazu im unten verlinkten AllFacebook-Artikel, was du wirklich nutzen darfst.

Auf der anderen Seite: wo kein Kläger …

Social Media Icons, Buttons und Links sind samt der dazugehörigen Logos nun wirklich massenhaft verbreitet. So lange du sie nicht missbräuchlich und irreführend verwendest, nutzen sie vor allem den Plattformen.

Oder kennst du einen Rechtstreit um ein Social Media Logo Icon, das anständig als Bild-Link zum Folgen und Teilen verwendet wird?

Ich finde: du hast schon alle Hände voll zu tun, dass all die Icons, Logos, Buttons und Links für dich einen greifbaren Nutzen entwickeln.

In diesem Sinne, Glückauf!

🙂

Quellen

AllFacebook: Das sind die Social-Media-Icons die du wirklich nutzen darfst

Kinsta: Was ist eine SVG-Datei (und wie lädst du SVGs in WordPress hoch)?

Medienkompass: Social Media Buttons und Logos auf der Webseite verwenden – Woher nehmen und welche sind die Richtigen?

wplogout: How to Create Social Media Follow Buttons in GeneratePress without Plugin?

wplogout: How to Create Social Sharing Buttons in GeneratePress without Plugin?

Autor von generateCLICKS, Gründer und Chef der Web-Agentur whkmedia. Wenn Wolfram sich nicht mit Websites und YouTube-Kanälen beschäftigt, ist er mit seiner Frau im Multivan unterwegs oder auf der Suche nach einem Espresso und einer knusprigen Laugenbrezel.