Elegante Social Media-Buttons mit CSS und Mini-Grafik selber erstellen
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.” ;-)
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:progid:DXImageTransform.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:progid:DXImageTransform.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)); ?>&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? :-)
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. :-)
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 … :-)
Hej Alex,
danke für die Blumen. :-)
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“. ;-)
Euch Beiden ganz lieben Dank für die Retweets. :-D
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 :-).
Okay, damit kann ich leben und wenn Du kein Problem damit hast, hab’ ich es auch nicht. ;-)
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. :-)
Gruß Sylvi
Ich belasse es dabei! Twitter und G+ dürfen zum Teilen genügen :-)
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. ;-) Daher kam mir diese Lösung hier wie gerufen.
Gruß Sylvi
Es war eine mehrteilige Serie zum Thema: https://runomatic.de/
Martin nutzt diese Lösung inzwischen aber auch nicht mehr, sondern gibt sich dem Theme-Standard hin. :-)
Danke Horst, neugierig wie ich ja bin, werde ich am Wochenende mal dort reinschauen. :-)
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.
Hallo Dennis,
freut mich, dass Du es ausprobieren möchtest und wünsche viel Spaß damit. :-)
Gruß Sylvi
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 :)
Hallo Chris,
danke schön für Deinen netten Kommentar. :-) 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. ;-)
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 ;-)
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. :-((
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. :-)
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. :-(
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.
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.
Vielleicht irgendwann einmal. :-) 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
Vielen Dank, Sylvi!
Ich wünsch’ Dir weiterhin viel Erfolg –
Schöne Grüße, Bill