Das Plugin „2-Click Social Media Buttons“ gestalten

Eine so gute Idee wie "2 Klicks für mehr Datenschutz" für WordPress sollte nicht am Aussehen scheitern

Geschätzte Lesezeit: 8 Minuten

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. 2-Click Social Media Buttons - BeispielDoch 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.

Granaton Buttons

 

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!

19 Gedanken auf "Das Plugin „2-Click Social Media Buttons“ gestalten"

  1. Peter Evans Antworten

    Das sind wirklich schone Buttons. Ich bin auch Ihrer Meinung – gute Lösung, aber hässlich umgesetzt.

    Was muss ich tun, um solche Buttons auch auf meine Webseite zu bekommen? Ich habe mit Ihrem CSS und Sprites versucht, das gleiche zu erzielen aber ich habe es nicht geschafft. Ich wäre für eine Rückmeldung sehr dankbar. Ich würde auch für Ihre Hilfe bezahlen :)

  2. Marwig Bach Antworten

    Es scheint so, als ob es das einzige Plugin ist, dass den Datenschutz berücksichtigt. Das ist der auch der einzige Grund, warum ich es überhaupt nutze. Es ist nicht nur nicht schön, es funktioniert beim Facebook-Button auch nicht. Der Autor meint, dies läge an Facebook!?
    Ein relativ großer Teil der Besucher wird durch die Datenschutz-Info (Daten gehen in die USA) abgeschreckt, überhaupt einen Kommentar zu schreiben. Den bekomme ich dann per E-Mail. Abgesehen davon, dass die Facebook-Nutzer auf Facebook das gleiche Problem haben, tun sie es über dieses Plugin nicht, weil sie darauf aufmerksam gemacht werden.
    Man kann ja den Info-Text ändern. Aber ist der dann noch DS-konform?
    Das Aussehen ist für mich zweitrangig. Es muss seine Aufgabe erfüllen und das tut es nur teilweise.
    Aber Danke für den Versuch, schon mal beim Layout anzufangen.

    • Granaton Antworten

      Das Plugin ist in seiner Grundidee insoferne genial, als dass Scripte, die von Facebook oder anderen Social Media Plattformen kommen, und üblicherweise automatisch das Userverhalten der Seite analysieren in die sie eingebettet sind, erst durch den BEWUSSTEN Klick des Users aktiviert werden. Man kann selbst entscheiden, ob man Daten an Social Media Plattformen übertragen will – und wenn ja, an welche. Somit sind die Datenschutzrichtlinien nicht nur erfüllt. Peter Pfeufer hat damit den Usern ein Tool geschenkt, mit dem sie frei entscheiden können, ob ihre Daten in fremde Hände übertragen werden oder nicht. Die Beschreibungstexte haben damit gar nichts zu tun, man kann sie ganz frei definieren – über die Einstellungen des Plugins. Wer auf Nummer Sicher gehen möchte, und die Datenschutzrichtlinien zu 100% erfüllen möchte, kann natürlich im Impressum noch zusätzliche Paragraphen aufnehmen, die auf die Nutzung von Facebook, Twitter etc auf der Seite hinweisen. Bei mir funktioniert der Facebook Button einwandfrei. Die Scripte, auf die das Plugin zurückgreift, kommen von Facebook selbst. Welche Schwierigkeiten hast du damit?

      • Andi Antworten

        Hi, ich habe auch Probleme mit dem Facebook Button. Es postet nichts auf meiner Timeline. Müsste der geteilte Artikel/Seite nicht auf der FB Wall erscheinen?

        Twitter funktioniert wunderbar.

        • Granaton Antworten

          Doch, das müsste er! Warum funktioniert es nicht? Gute Frage. Der Like-Button geht einwandfrei. Ich glaube, Peter Pfeufer sollte das Plugin weiterentwickeln. Ich habe ihm geschrieben, vielleicht meldet er sich. Wenn nicht, könnte man vielleicht einen Webentwickler finden, der ein Upgrade macht… Denn die Grundidee ist wirklich klasse!

          • Andi

            Ich sah jetzt, dass man es unter Aktivitäten findet. Ja, wäre klasse, wenn Peter Pfeufer es weiterentwickeln würde.

  3. Ghania Antworten

    Hallo, erst einmal vielen Dank für die ausführliche Erklärung, ich traue mich bestimmt, sie auch mal umzusetzen, wenn ich mein Grundproblem gelöst habe. Ich habe das Plugin auf meiner Seite, aber die Buttons erscheinen erst unter dem Artikel, wenn ich auf „Kommentar hinterlassen gehe. Wie machen Sie es, dass Ihre Buttons immer unter dem Artikel erscheinen? An das Styling wollte ich mich gar nicht erst heranwagen, bevor sie nicht wenigstens mal sichtbar werden. Schöne Grüße, Ghania

  4. Marwig Bach Antworten

    Nach gut einem Jahr melde ich mich wieder mal. Zugegeben, die Idee das Plugins so umzusetzen, dass die Datenschutzbestimmungen in Dt. eingehalten werden ist schon gut. Das interessiert aber viele Entwickler von Themes nicht sonderlich. Deshalb bin ich jetzt dazu übergegangen, das Plugin von bestimmten Websites wieder zu entfernen.
    So beeinflusst das Plugin teilweise die CSS-Einstellungen dieser Themes, sodass eine Darstellung z.B. auf mobilen Geräten eingeschränkt wird. In diesem Fall ist mir die richtige Darstellung auf den mobilen Geräten wichtiger als das Social Sharing.
    Dennoch ein gutes Plugin wo es passt. Übrigens der Facebook-Button funktioniert nach all den letzten Updates immer noch nicht. Es passiert einfach nichts, wenn man ihn anklickt.

    • Granaton Antworten

      Lieber Herr Bach,
      es ist eine Frage der persönlichen Einstellung, ob man datenschutzfreundliche Plugins einsetzt. Sicherlich haben offene Plugins unzweifelhaft ihre Vorteile. Und vielleicht sollte man hier auch mit einem „was soll´s“ Gefühl agieren. Ich persönlich habe mich jedoch für die Hürde der bewussten Aktivierung entschieden. Es ist wohl richtig, dass dann weniger UserInnen interagieren. Aber sind ein paar Likes und Klicks die ungute Situation zwischen Gesetz, Gewissen und Vorteil wert? Eine schwere Entscheidung.
      Bei mir funktioniert der Facebook Button tadellos. Bei Ihnen nicht? Ich habe ihn auf „empfehlen“ gestellt. Probieren Sie das vielleicht einmal? Ist Ihr Plugin auf die aktuellste Version upgedated?
      Wegen der Anzeige auf Smartphones: Fragen Sie mich gerne danach, ich kann das CSS für Sie anpassen.

  5. Maria Neureut Antworten

    Liebe Granaton,
    eine sehr schöne Idee ist das! Können Sie mir die Buttons auch für meine Website anpassen? Bieten Sie diesen Service an?

    • Granaton Antworten

      Hallo Frau Neureut,
      sehr gerne. Haben Sie schon gute Erfahrungen mit dem Plugin gemacht? Schreiben Sie mir eine Nachricht, wenn Sie Ihr Design von mir auf die Buttons übertragen lassen möchten.

  6. Pixelnostalgie Antworten

    Hallo Granaton,
    ich habe versucht mithilfe der Anleitung dieses Plugin auf meiner Seite einzubauen und zu verändern. Doch wenn ich den obigen Code benutze, erhalte ich keine Kreise, sondern Quadrate mit runden Ecken. Außerdem werden die Fonts nicht geladen. Der Pfad zu meinen Fonts ist korrekt.

    • Granaton Antworten

      Hallo, lieber Leser!
      Die Quadrate mit den runden Ecken entstehen dann, wenn der Radius der Buttons im Verhältnis zum Durchmesser zu klein ist. Wenn du den Wert für „border-radius“ erhöhst, so werden die Buttons rund. Vermutlich nutzt du eine andere Iconfont als ich?
      Weshalb die Icons bei dir nicht geladen werden, kann ich dir leider ad hoc nicht sagen, dafür müsste ich mich in dein System einarbeiten und sehen, welche Icons du verwendest. Du kannst mich sehr gern damit beauftragen, dir die Icons korrekt einzubauen.

      • Pixelnostalgie Antworten

        Danke für die schnelle Antwort.
        Ich hatte, wie empfohlen, Fontello genutzt und mir dann aus Entypo die jeweiligen Icons rausgesucht. Die größte Unklahrheit ist eigentlich die Einbindung. Da sie als fonts „fontello.xyz“ einbinden, gehe ich davon aus, das ihre Datein im font Ordner ebenfalls so heißen. Außerdem laden sie die icons durch den „content“ Befhel. Wie kann ich den erkennen, welchen tag ich content übergeben muss, um das richtige Icon zu laden?
        Mit besten Grüßen Pixelnostalgie.

        • Granaton Antworten

          Um die Schrift einzubinden, nutze ich @font-face direkt im CSS-Feld des Plugins.

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

          Den Content übergeben Sie mit dem Zeichen, das Sie Ihren Symbolen unter „Customize Codes“ in Fontello mitgegeben haben. Ich habe beispielsweise „f“ für Facebook zugewiesen.

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

          .fb_recommend_dummy.twoclick-network {
          font-family: „fontello“;
          }

          Gutes Gelingen!

  7. Christian Antworten

    Hallo Granaton

    Wirklich wieder einmal eine gute und informative Seite. Ich sehe das genau so, dass das Design zu wünschen übrig lässt. Wie wir jedoch wissen, lässt sich, bekannter weisse, über Geschmack nicht streiten. Um so schöner, wenn es andere gibt, die sich darüber Gedanken machen.

    Coole Sache … Danke … :)

    Werde mich noch via Kontaktformular bei Ihnen melden.

    Liebe Grüsse
    Christian

Teilen Sie Ihre Meinung mit