Elegante Social Media-Buttons mit CSS und Mini-Grafik selber erstellen

Socialmediabuttons - alt und neu
Geschätzte Lesezeit: 4 Minuten

Wie ich mittlerweile mehrfach mitbekommen habe, gefallen nicht nur mir die Social Media-Buttons des Online-Magazins t3n unheimlich gut. Und obwohl sie auf den ersten Blick eigentlich nicht dem Design der Standard-Buttons von Twitter, Facebook und Google Plus entsprechen, ist für jeden Besucher ersichtlich, welchem Zweck sie dienen.

Sie harmonieren unheimlich gut mit dem Webseiten-Design von t3n und trotz ihrer schlichten Form wirken sie meiner Meinung nach sehr edel. Was ebenfalls nicht unwichtig ist: sie fallen dem Besucher sofort ins Auge.

Da ich meine Social Media-Buttons hier manuell eingefügt habe, sind mir bei deren Gestaltung so gut wie keine Grenzen gesetzt. Und so beschloss ich, Buttons in ähnlicher Form auf diesem Blog einzubinden.

Verflixt noch mal, wie haben die das hinbekommen? Ich inspizierte die Buttons mit Firebug und stellte fest “Aha, CSS3 Hintergrund wurde mit Minigrafik kombiniert. Das ist doch wohl hinzukriegen.” smilie

Die Grafiken

Als Erstes machte ich mich auf die Suche nach entsprechenden Minigrafiken für die Social Media-Symbole. Fündig wurde ich auf der Seite Pixelbin.

Einige Grafik-Dateien konnte ich leider nicht bearbeiten, da ich Adobe Photoshop nicht besitze. Daher habe ich die schwarzen png-Grafiken der entsprechenden Social Media-Dienste ausgewählt.

Mit PhotoImpact habe ich diese dann in weiße Symbole “umgefärbt”. Ich musste sie allerdings doch noch pixelweise aufarbeiten. Denn um einen leicht plastischen Effekt zu erzielen, waren ursprünglich einige Graufabstufungen darin enthalten. Stark verkleinert wirkten sie dadurch dann doch ziemlich unscharf.

Anschließend habe ich sie verkleinert, mit Riot optimiert und per FTP in ein Verzeichnis meines Blogs hochgeladen.

Der Hintergrund

Dank CSS-Button-Generatoren ist das Erstellen von plastisch wirkenden Buttons mittlerweile ein Kinderspiel geworden. Mit diesem Webtool habe ich also drei verschiedenfarbige Buttons erstellt.

Ich denke, diesen Vorgang brauche ich nicht näher beschreiben. Spielt einfach mit dem border-radius und Farbverläufen ein bisschen herum. Der eine mag eher Buttons in kantiger Form, der andere findet stärker abgerundete Ecken hübscher.

Allerdings werden im Internet Explorer 9 immer noch nicht die abgerundeten Ecken – trotz der auf verschiedene Browser abgestimmten border-radius-Werte – optimal dargestellt.

Hier mal als Beispiel des CSS-Wertes für meinen Google Plus-Button (nur der Hintergrund):

.gplus{
-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
box-shadow:inset 0px 1px 0px 0px #f5978e;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#f24537),color-stop(1,#c62d1f) );
background:-moz-linear-gradient(center top,#f24537 5%,#c62d1f 100% );filter:progidsmilieXImageTransform.Microsoft.gradient(startColorstr='#f24537',endColorstr='#c62d1f');
background-color:#f24537;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d02718;
width:85px;
height:25px;
margin:10px 0px 0 40px;
float:left;
}
.gplus:hover{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#c62d1f),color-stop(1,#f24537) );
background:-moz-linear-gradient(center top,#c62d1f 5%,#f24537 100% );filter:progidsmilieXImageTransform.Microsoft.gradient(startColorstr='#c62d1f',endColorstr='#f24537');
background-color:#c62d1f;
}
.gplus:active{
position:relative;top:1px;
}

Für die Zähler-Beschriftung habe ich die Werte aus dem erstellten Code des Button- Generators selektiert:

.gpluszahl{
display:inline-block;
color:#ffffff;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:14px;
font-weight:bold;
padding:3px 0 0 27px;
text-decoration:none;
text-shadow:1px 1px 0px #810e05;
}

und vorsichtshalber noch um ein ergänzendes Image-Attribut ergänzt:

.gplus img{
display:inline-block;
}

Natürlich kann ich die durch den Button-Generator erstellten Werte noch nachträglich ändern und feiner (zum Beispiel die Größe) abstimmen. Die Arbeit für die Grundwerte wurde durch ihn aber schon einmal erledigt. Die oben genannten Codes füge ich in die style.css meines Themes ein.

Link-Einbindung

Wie anfangs erwähnt, sind meine Social Media-Buttons schon seit einiger Zeit manuell als statische Verlinkung in der single.php meines Themes eingebunden.

Nun heißt es, den CSS-Hintergrund, die Grafik, den statischen Link und den Klickzähler zusammen zu setzen, um daraus einen funktionsfähigen und validen Social Media-Button zu erstellen.

Ich möchte auch noch kurz anmerken, dass ich statt der Javascript-Lösung die Popup-Variante gewählt habe.

Lange Rede kurzer Sinn, so sieht beispielsweise mein Google Plus-Code aus, den ich in die single.php meines Themes “Smoky” eingefügt und per CSS entsprechend positioniert habe:

<div class="gplus">
<a target="popup" onclick="window.open('','popup','width=640,height=350,scrollbars=no,toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=50,left=50')"href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo $Titel; ?>" title="Bei Google+ empfehlen"><img src="<?php bloginfo('template_url')?>/eigene-buttons/googbut.png" alt="Google +1" width="18" height="18" style="float:left;margin:3px 5px 0px 6px;border:none;" />
<?php $URL = get_permalink();
function get_plusone($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
$curl_results = curl_exec ($curl);
curl_close ($curl);
$json = json_decode($curl_results, true);
return intval( $json[0]['result']['metadata']['globalCounts']['count'] );
} ?>
<object class="gpluszahl"><?php echo get_plusone($URL); ?></object></a>
</div>

Ändern müsst ihr noch in der zweiten Zeile den Pfad zu Eurer Grafikdatei, gegebenenfalls Höhen- und Breitenangaben Eures Bildes und die Ausrichtung in der Beitragsseite.

Ihr seht, solch ein Button ist kein Hexenwerk, oder? smilie

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

23 Kommentare

Kommentare hinzufügen
  • Danke für diesen Tipp! Bisher verwende ich ein PlugIn für eine Heise-Lösung auf meinem Blog, bin damit allerdings nicht 100%ig zufrieden.

    Die hier vorgestellte Lösung gefällt mir vor allem wegen der individuellen Anpassbarkeit an das Layout. Und datenschutzkonform scheint sie auch zu sein. Prima!

    • Hallo Dave,

      danke für Dein nettes Feedback. Ja er ist datenschutzkonform. Die Heise-Lösung ist natürlich eine Alternative insbesondere wegen der Datenschutzproblematik. Einige fühlen sich allerdings ein wenig durch den erforderlichen Doppelklick genervt. Aber ehrlich gesagt, wenn ich einen Beitrag „teilenswert“ finde, klicke auch auch einmal mehr. smilie

      Denjenigen, die den oben beschriebenen Aufwand scheuen oder sich nicht an den Codeeinbau herantrauen, kann ich aber auch sehr Peer Wandigers Plugin SiN SocialShare (derzeit noch in der Betaphase, aber bei mir lief es schon in der 1. einwandfrei) ans Herz legen.

      Darin werden schlichte Buttons in verschiedenen Größen angeboten.

      Gruß Sylvi

  • Hallo Sylvi,
    eine tolle Sache hast du hier beschrieben und diese Social Media Buttons gewinnen immer wieder an Beliebtheit. Ich habe die hier auch schon gedrückt, ausser zu Facebook. Das funktioniert leider nicht, ich weiss nicht, vll. ist es nur bei mir so.

    • Ich habe eben den Facebook-Button testweise gedrückt. Bei mir funktioniert er einwandfrei!

      Über Dein Drücken des Twitter-Buttons, Alex, habe ich übrigens von diesem Artikel erfahren. Die Tat war also durchaus eine gute … smilie

  • Hej Alex,

    danke für die Blumen. smilie
    Hm … das ist wirklich merkwürdig, aber ich habe alle Buttons mehrfach getestet und bei mir funktionieren sie. Was mir aber hin und wieder aufgefallen ist, dass der Inhalt des Facebook-Popup-Fensters etwas auf sich warten lässt. Keine Ahnung, woran das liegen könnte.

    Puh, Gott sei Dank, dass es bei Dir klappt, Dave. Sonst hätte ich mich mal wieder auf Fehlersuche begeben „dürfen“. smilie

    Euch Beiden ganz lieben Dank für die Retweets. smilie

    Gruß Sylvi

  • hey Sylvi,
    na ja, dann ist es nur bei mir so. Das PopUp-Fenster erscheint leider nicht. Das ist kein Problem, denn die anderen beiden Buttons funktionieren ja. Also werde ich mich mit diesen beiden begnügen smilie.

    • Okay, damit kann ich leben und wenn Du kein Problem damit hast, hab‘ ich es auch nicht. smilie

      Eventuell könnte es sich dabei um Einstellungen in Deinem Browser bezüglich der Popup-Fenster handeln.

      Aber es ist wohl müßig, dieser Sache auf den Grund zu gehen. smilie

      Gruß Sylvi

  • Ich war immer zwischen den Standard-Knöppen und anderen Lösungen hin- und hergerissen. Diese Buttons gefallen mir gut. Am liebsten wäre mir eine reine Textlösung. So, wie der Admartinator sie vor länger Zeit einmal vorgestellt hatte. Leider habe ich diese Lösung nicht hinbekommen.

    • Hej Horst,

      anfangs vertrat ich den Standpunkt, dass es unbedingt die Standard-Buttons sein müssen – wegen des Wiedererkennungswertes. Von dieser Meinung habe ich mich gelöst, weil ich auf anderen Blogs gesehen habe, dass auch „aus der Art geschlagene“ Social Media-Buttons geklickt werden.
      Eine reine „Textlösung“ habe ich noch nirgends gesehen und auf dem Blog von admartinator konnte ich adhoc nichts darüber finden.
      Aber ich habe eh einen Faible für CSS3-Buttons, wie man ja auf meinem Blog ja unschwer erkennen kann. smilie Daher kam mir diese Lösung hier wie gerufen.

      Gruß Sylvi

  • Ich danke dir erstmal für die Arbeit welche du dir da gemacht hast. Ich war lange auf der Suche nach einem geeigneten code für meine Projekte und denke mal ich hab hier einen gefunden.

  • Morgen Sylvie,

    auf der Suche nach neuen Social Media Buttons bin ich auf deinen tollen Artikel hier gestoßen. Das du direkt den Code mit einbindest finde ich echt klasse, so machst du es den Anfängern deutlich einfacher. Werde mir jetzt erstmal ein paar Buttons für meine Projekte raus nehmen smilie

    • Hallo Chris,

      danke schön für Deinen netten Kommentar. smilie Wie heißt es immer so schön? „Das Rad muss nicht ständig neu erfunden werden.“ Und ich veröffentliche sehr gerne die Codes, wenn sie bei mir fuunktionieren. Natürlich immer ohne Gewähr. smilie
      Ich habe den Code in diesem Beitrag zwar nur für Google+ veröffentlicht, aber falls gewünscht, reiche ich die für Twitter und Facebook gerne noch nach.

      Facebook weicht allerdings bei mir ein wenig von den anderen beiden SocialMedia Buttons ab, weil ich bei diesem die Counterfunktion nicht komplett in der single.php meines Themes sondern in der functions.php eingebunden habe.

      Gruß Sylvi

  • Hallo allerseits,

    für alle Laien wie mich, die im Buttons-Eigenbau überhaupt nicht versiert sind oder für die, die es einfach leichter haben wollen:

    Hier der Link zum Button-Maker (gehört zum Plugin Simple Share Buttons Adder, darf man aber auch ohne das Plugin verwenden), der Buttons eigentlich genau im Stil von t3n erzeugt smilie

    Ich habe noch eine Bitte an Dich, Sylvi oder auch an andere versierte Leser.

    Da ich mit dem manuellen Einbau der Share-Buttons überfordert bin und trotzdem kein Abmahnrisiko eingehen möchte, hatte ich mir obiges Plugin angeschaut. Nach meinem laienhaften Eindruck, erzeugt das Plugin auch statische Share-Links und müsste daher auch bei uns passend sein. Ich bin mir aber nicht ganz sicher, ob ich es wirklich richtig beurteile und würde mich freuen, wenn Du, Sylvi oder Ihr, Leser, mal einen Blick darauf werfen würdet.

    Diesen Quellcode erzeugt das Plugin:

    Diesen Artikel empfehlen:

    Nachdem die images auch auf dem eignenen Webspace liegen, denke ich, es ist ein auch nach deutschem Datenschutzgesetz erlaubter Button, oder?

    Für Euch ist sicher auf den ersten Blick klar, ob hier erst Daten an facebook gesendet werden, nachdem der Besucher auf den Button geklickt hat. Ich finde, das Plugin erzeugt wirklich sehr geschmackvolle, moderne Share-Buttons!

    DANKE schon mal ganz herzlich für Eure Einschätzung!!
    Schöne Grüße, Bill

    P.S.: Leider habe ich es nicht geschafft, den Quellcode hier komplett zu posten. Trotz code-tag. smilie(

    • Hallo Bill,

      natürlich ist der manuelle Einbau der statischen Buttons nicht ganz ohne. Und nicht jeder mag sich mit den Codes und deren Einbindung im Blogtheme auseinandersetzen.
      Da der von Dir empfohlene Button-Maker ja nur die Grafiken generiert, ist es mit ihnen durchaus möglich, statische Social Media-Buttons mit den entsprechenden Links zu den jeweiligen Diensten zu erstellen. Ich habe meine Grafiken nur eben selber zusammengebastelt.
      Wenn Du Dir eine Anzeige der Klickzähler wünschst, müsstest Du allerdings doch noch per CSS Hand anlegen und den php-Code ergänzen.

      Und wem das alles zu umständlich ist, denen würde ich Shariff ans Herz legen. Die Buttons sind datenschutzkonform und ich finde sie sehr schick. Außerdem kann man das Aussehen individuell anpassen.
      Ich habe sogar schon überlegt, ob ich sie hier einsetzen soll. smilie

      Gruß Sylvi

      P.S.: Shariff wird auch bei WordPress.org als Plugin zum Download angeboten.

      • Hallo Sylvi,

        danke für Dein Feedback und die Information zu Shariff! Ich werde mich gleich mal damit beschäftigen und mir auch dieses Plugin anschauen. Das Plugin „Simple Share Buttons Adder“ ist extrem easy zu bedienen. Ich werde mal sehen, ob ich mit Shariff auch so gut zurecht komme. Ich hätte auch gerne Dein Können, mir solche Buttons selbst zu machen! Wirklich super. Aber davon bin ich weit, weit entfernt. smilie

        Ich glaube, das „Simple Share Buttons Plugin“ wäre bei uns auch datenschutzkonform einsetzbar. Konntest Du Dir mal einen Eindruck von dem Quelltext machen oder des Plugins machen?

        Schöne Grüße, Bill

        • Hej Bill,

          ich kann es jetzt gar nicht genau sagen, aber ich vertraue darauf, wenn der Plugin-Entwickler darauf hinweist, dass die Social Media-Buttons datenschutzkonform sind. Shariff wird bei heise.de (wie auch die 2-Klick-Variante) empfohlen. Und auch bei WordPress.org wird darauf hingewiesen, dass das Plugin datenschutzkonform ist.

          Shariff enables website users to share their favorite content without compromising their privacy.

          Das ist bei Simple Share Buttons Plugin nicht der Fall.
          Selbst die Social Media-Buttons von Jetpack würde ich bei einem selbstgehosteten WordPress-Blog nicht verwenden. Bei einem Blog bei WordPress.com hat man leider keine andere Wahl.

          Aber davon bin ich weit, weit entfernt.

          Vielleicht irgendwann einmal. smilie Ich habe auch anfangs Plugins dafür verwendet und das ist doch auch in Ordnung. Außerdem hängt der manuelle Einbau unheimlich davon ab, welches Theme man verwendet. Der war in meinem alten Theme „Smoky“ etwas einfacher zu händeln, als in dem jetzigen Theme „Seashell“.
          Deswegen … auf Biegen und Brechen würde ich es auch nicht versuchen.

          Gruß Sylvi

Schreibe einen Kommentar

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

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: