Das Plugin „2-Click Social Media Buttons“ gestalten

Update Januar 2015: 2 Click Social Media Buttons wurde eingeholt vom neuen 1 Klick Prinzip von heise.de – das Plugin, das Granaton nun nutzt, heißt Shariff für WordPress.

2 Klicks für mehr Datenschutz! Schon 2011 erkannte heise online ein ungelöstes Problem bei sozialer Interaktion im Internet. Sobald man social Buttons in seine Internetpräsenz integriert, werden sofort Informationen über zugreifende UserInnen an Dritte übertragen. Dies ist datenschutzrechtlich bedenklich und schwächt die Performance der Seite. Heise wollte diesen Ladeprozess umgehen und entwickelte das 2 Klicks für mehr Datenschutz Prinzip. Eine tolle Idee! Man muss als Besucher bewusst soziale Buttons aktivieren, bevor der Austausch mit einer externen Plattform beginnt. Der Quellcode dieses jQuery Plugins wurde für Entwickler freigegeben. Webentwickler Peter Pfeufer hat eine WordPress Variante als Plugin angefertigt, die er über seine eigene Website frei zum Download anbietet. Das ist eine wunderbare Situation, wenngleich sie auch kleine Nachteile hat – die Vorteile überwiegen meiner Ansicht nach. Viele Plattformen haben das Plugin längst im Einsatz, besonders diejenigen, denen es um politische Korrektheit geht. Seriöse Tageszeitungen, Onlinemagazine oder Festivals beispielsweise. Doch das Design der Buttons ist nicht sehr attraktiv.

Natürlich kann man das Aussehen von Gegenständen so akzeptieren, wie sie geliefert werden. Man stelle sich vor, was passieren würde, würde man jedes Objekt in seinem Leben selbst gestalten wollen. Ein Ding der Unmöglichkeit, nicht? Doch manchmal lohnt es sich, über vorab getroffene Entscheidungen nachzudenken und eigene Ideen umzusetzen.

Ein Plugin, das allen meinen Beiträge ein Gestaltungselement hinzufügt, muss entweder voll und ganz zeitlos gehalten sein, oder flexibel genug sein, um Anpassungen vornehmen zu können. 2-Click Social Media Buttons kann beides nicht. Die Gestaltung ist eine „friss oder stirb“ Angelegenheit, die Buttons sind grau, die Icons veraltet. Die Abstände zwischen den Buttons sind alle gleich, obwohl so Disharmonie in die Gestaltung gebracht wird. Alle NutzerInnen scheinen das auch zu akzeptieren. Wo auch immer das Plugin auftaucht (Fußende des Artikels), erkenne ich es sofort an seiner Hässlichkeit. Durch hochauflösende Displays entsteht zusätzlich die Problematik, dass Hintergrund-Sprites, die aus Pixeln bestehen, verwaschen aussehen, sobald sie in einer Pixel Ratio von 1,5 oder höher dargestellt werden. Mein Ziel: Buttons zu erzeugen, die nicht nur ansprechend gestaltet sind, sondern auch auf allen Geräten sprichwörtlich scharf aussehen.

 

Wie ich das Plugin 2-Click Social Media Buttons mit CSS gestylt habe

Das Aufbohren des Plugins beginne ich damit, dass ich mir die Frage stelle, woher diese grauen Grafiken überhaupt kommen. Mache in der Verzeichnisstruktur des Plugins ein sogenanntes „Sprite“ aus – eine Grafik, die alle Buttons gleichzeitig enthält und über den CSS-Befehl „background-position“ richtig platziert wird. Das Plugin ist bereits ein paar Jahre alt, es entstand noch vor der großen Mobilwende. Die alten Buttons basieren auf der Idee, dass alle Displays eine identische Auflösung haben. Dass Grafiken folglich auf Pixeln aufbauen und so überall gleich angezeigt werden. Doch die Smartphone-Revolution hat diese Denkweise obsolet gemacht. Nicht nur Retina-Displays bereiten DesignerInnen Kopfzerbrechen, die die Pixel Ratio 2 haben, folglich doppelt so hoch aufgelöst sind als herkömmliche Monitore. Mittlerweile sind wir bereits bei Geräten mit einer Pixeldichte angekommen, die auf einer handtellergroßen Fläche Full HD anzeigen, bei Ratio 3 – Tendenz aufwärts. Pixelbilder müssen immer höher aufgelöst angeboten werden, um nicht unscharf dargestellt zu werden, verursachen deshalb immer höhere Datenmengen. Zusätzlich erschweren Media Queries die Arbeit, da man für unterschiedliche Displays individuelle Grafiken anbieten sollte, um unnütze Datenübertragung zu vermeiden. Es bietet sich an, ganz auf Pixel zu verzichten, sondern lieber umzustellen auf Vektoren und CSS3.

Das Zauberwort lautet: Iconfonts. Ich benutze die Onlineplattform Fontello, um mir exakt die Symbole auszusuchen, die ich für meine Website brauche – keine einzige Grafik zuviel. So bleiben die Fonts schön schlank. Mit CSS3 kann man Icons als Hintergründe definieren. Ich erstelle also zuerst über Fontello einen Webfontkit, lade ihn auf meine Festplatte, entpacke ihn, uploade die Fonts in meinen wp-content Ordner und importiere sie über @font-face in das CSS des Plugins. Über CSS3 wird den Buttonklassen das entsprechende Icon zugewiesen, anschließend style ich sie. Sie sind alle ein wenig unterschiedlich, die umständlichste Arbeit ist die Abstimmung der Icons aufeinander in ihrer Größe und das Festlegen der passenden Innenabstände.

Der nächste Schritt ist die Gestaltung des Ein- und Ausschaltknopfes. Manche UserInnen mögen ihn, machen hassen ihn, ich finde ihn gut. Die eingeschaltete Variante möchte ich rot anzeigen lassen. Auch hierzu gibt es ein Sprite-Bild. Ich überarbeite die On-Version und ersetze das Originalsprite mit meiner bearbeiteten Version, die ich in doppelter Auflösung anbiete – das zusätzliche Gewicht ist bei einer so winzigen Grafik minimal. Natürlich muss ich dann auch die anzuzeigende Breite des Knopfs in Pixelwerten über CSS3 angeben, denn sonst würde der Knopf zu groß angezeigt.

Nun passe ich die Abstände zwischen den Buttons individuell an. Jede Schnittstelle der sozialen Medien hat in eingeschaltetem Zustand eine andere Breite, eigene Farben, einen eigenen Charakter, jeder Abstand muss individuell eingestellt werden, um eine harmonische Darstellung zu ermöglichen. Dementsprechend gibt es auch für jeden Button eine eigene CSS-Class, an der man mit Pixelwerten so lange schrauben kann, bis die Buttons passend nebeneinander positioniert sind.

Zu guter Letzt verändere ich das hover-Textfenster, das die Erläuterung für die Benutzung des Plugins beinhält. Gar nicht so einfach, die richtige Class dafür zu finden. Sie heißt mit vollem Namen „.social_share_privacy div.help_info .info und .social_share_privacy li .help_info.icon .info“. Über CSS passe ich Schrift, Zeilenhöhe und Fensterbreite an. Jedes Fenster ist nun – passend zu meinem Design – ein Quadrat und hat schöne Margins, die Texte sind so gestaltet wie der Rest der Fließtexte auf meiner Seite.

Jetzt bin ich zufrieden. Alles schaut auf den ersten Blick gut aus. Alles funktioniert. Ein paar kleine Wermutstropfen bleiben: Die Buttons wechseln ihr Aussehen, sobald sie aktiviert werden. Diese Grafiken kommen via APIs über externe Quellen, sind mittels iFrames in das Script eingebettet. Ich habe derzeit noch keine Idee, wie ich das selbst gestalten könnte. Außerdem wünsche ich mir weitere gute Funktionen, durch die man das Plugin verbessern könnte und damit unschlagbar gestalten würde. Damit wären alle guten Argumente von Nichtnutzern nichtig.Vielleicht kann man hier gute Lösungen finden?

Ich habe nur drei Buttons – Facebook, Twitter und G+ – angepasst. Das Prinzip ist aber auf alle anderen übertragbar. Natürlich kann man die Größe der Buttons über Media Queries auch in kleine Darstellungsweisen auf niedrig aufgelösten Smarphones mit CSS3 transformieren. Viel Spaß beim Selbstgestalten! Machen wir das Internet ein bisschen schöner!

Alle CSS-Klassen beziehen sich auf die Plugin-Einstellung „Germany (de_DE)“. Andere Sprachen haben andere Klassennamen, da sie teilweise andere APIs aufrufen.

/**** 2-Click Social Media Buttons anpassen ****/

/* Die Iconfont importieren */

@font-face {
font-family: ‚fontello‘;
src: url(‚http://meineurl.com/wp-content/font/fontello.eot‘);
src: url(‚http://meineurl.com/wp-content/font/fontello.eot#iefix‘) format(‚embedded-opentype‘),
url(‚http://meineurl.com/wp-content/font/fontello.woff‘) format(‚woff‘),
url(‚http://meineurl.com/wp-content/font/fontello.ttf‘) format(‚truetype‘),
url(‚http://meineurl.com/wp-content/font/fontello.svg#fontello‘) format(’svg‘);
font-weight: normal;
font-style: normal;
}

/* Einen eigenen Ein- und Ausschaltknopf definieren */

.social_share_privacy li .switch {
background: url(‚http://meineurl.com/pluginbilder/socialshareprivacy_on_off.png‘) no-repeat scroll 0px 0px transparent;
background-size: 23px auto;
}

/* Die alten Buttons nicht mehr laden */

.social_share_privacy.sprite-de_DE li .dummy_btn {
background: transparent;
}

/* Das Info-Fenster gestalten und das Erklärungsfeld ausblenden */

.social_share_privacy li .info_off .dummy_btn {
margin: 0px 0 0 32px;
}

.social_share_privacy div.help_info {
margin: 20px 0px !important;
}

.social_share_privacy li .dummy_btn span.twoclick-network {
height: 75px;
}

.social_share_privacy ul {
height: 75px;
}

/* Das Info-Fenster minimieren */

.social_share_privacy li.settings_info {
width: 0;
}

/ *Das Textfenster gestalten */

.social_share_privacy div.help_info .info, .social_share_privacy li .help_info.icon .info {
/*   display: none; */
position: absolute;
bottom: 90px;
width: 240px;
padding: 20px 20px;
font-size: 12px;
line-height: 20px;
border: 1px solid rgb(204, 204, 204);
border-radius: 0 0 0;
box-shadow: none;
background-color: #fff;
color: rgb(0, 0, 0);
z-index: 500;
}

/* Die Abstände der Buttons zueinander individuell definieren */

.social_share_privacy .twoclick-facebook {
width: 183px; }

.social_share_privacy .twoclick-twitter {
width: 180px; }

.social_share_privacy .twoclick-gplus {
width: 180px; }

/* Die neue Breite der Buttons festlegen */

.social_share_privacy li span.fb_recommend_btn {
width: 75px; }

.social_share_privacy li span.twitter_dummy {
width: 75px; }

.social_share_privacy li span.gplus_one_dummy {
width: 75px; }

 

/**** Hier kommen die neuen Buttons ****/

/* Facebook-Button mit Icon bestücken */

.social_share_privacy li span.fb_recommend_dummy {
width: auto;
}

.fb_recommend_dummy.twoclick-network:before {
content: „f“;
}

.fb_recommend_dummy.twoclick-network {
font-family: „fontello“;
font-size: 180%;
color: #FFF;
border-radius: 4em;
background-color: #950618;
padding: 10px 21px 9px 26px;
margin: -24px 0px 0px 10px;
border: 3px solid #ae3f27;
box-shadow: 0 0 0.2em 0.1em #FFF inset;
}

/* Twitter-Button mit Icon bestücken */

.social_share_privacy li span.twitter_dummy {
width: auto;
}

.twitter_dummy.twoclick-network:before {
content: „t“;
}

.twitter_dummy.twoclick-network {
font-family: „fontello“;
font-size: 180%;
color: #FFF;
border-radius: 4em;
background-color: #950618;
padding: 12px 13px 12px 21px;
margin: -24px 0px 0px 10px;
border: 3px solid #ae3f27;
box-shadow: 0 0 0.2em 0.1em #FFF inset;
}

/* Google Plus-Button mit Icon bestücken */

.social_share_privacy li span.gplus_one_dummy {
width: auto;
}

.gplus_one_dummy.twoclick-network:before {
content: „g“;
}

.gplus_one_dummy.twoclick-network {
font-family: „fontello“;
font-size: 183%;
color: #FFF;
border-radius: 4em;
background-color: #950618;
padding: 11px 11px 13px 24px;
margin: -24px 0px 0px 10px;
border: 3px solid #ae3f27;
box-shadow: 0 0 0.2em 0.1em #FFF inset;
}

GUTES GELINGEN!