labuero

< frontend developer >

Socialbutton Helferlein – Socialite.js

Ich möchte hier ein kleines und aber feines Script empfehlen. Es ist eigentlich relativ unspektakulär aber dafür umso hilfreicher. Socialite.js

Was macht es und warum finde ich es so hilfreich: Es bietet eine einfach Möglichkeit die gängigsten Social-Buttons auf der Seite einzubinden. Mit gängigsten meine ich Twitter, Facebook und goggle+. Dazu ist auch noch LinkedIn an Board, was aber meiner Meinung nach in Deutschland nicht so stark verbreitet ist.

Zuerst legt man  Platzhalter, z.B ein div, fest, und bestückt diese mit der CSS Klasse socialite sowie dem Namen des Dienstes also twitter. Um die Buttons zu konfigurieren, hängt man die data Attributen des Dienstes einfach mit in das Containerelement. Bei einem facebook-button bestimmt man so z.B. das aussehen: data-layout="button_count". Welche Attribute es alle gibt, erfährt man auf den Developer Seiten von Twitter, Facebook, google+ und LinkedIn.

Nun nur noch Socialite bei Bedarf starten und die Buttons werden an Stelle der Platzhalter geladen.

Socialite.load();

Mit Bedarf meine ich verzögert nachdem der Rest der Seite geladen wurde, bei Mouseover über einen Artikel oder erst bei einem Klick auf eine Art Aktivierungsbutton. Ich möchte hier an die 2 Klicklösung von heise erinnern, die entwickelt wurde, um den Datenschutzbestimmungen halbwegs gerecht zu werden. Mit socialite .js wäre es relativ leicht, sich selbst eine ähnliche Lösung zu bauen. Aber auch – eigentlich vor allem – bringt dieses Vorgehen die Performance einer Webseite ein ganzes Stück nach vorne! Daneben ist es mit nur 2kb (Minified and Gzipped) auch angenehm klein. Und wem die vier integrierten Dienste nicht genügen, hat die Möglichkeit das Script selbst zu erweitern.

Im Ganzen könnte eine verzögertes Laden um eine Sekunde dann so aussehen:

HTML:

   <div class="socialite googleplus-one" data-size="medium"></div>
   <div class="socialite facebook-like" data-layout="button_count"></div>

Javascript:

window.setTimeout(
       function() {
	   Socialite.load();
     } , 1000);

UPDATE:

Der Folgende Absatz erklärte, wie man das Plugin auf Deutsch umstellt. In der neusten Version von Socialite.js gibt es allerdings die Möglichkeit, Settings für die einzelnen Dienste festzulegen, womit das Ändern des Quelltextes wegfällt. Außerdem sind mittlerweile auch Pinterrest und Spotify hinzugekommen.
https://github.com/dbushell/Socialite/#settings

Für den Gebrauch auf deutschen Webseiten sollte man das Script allerdings noch anpassen, um Tooltips und Buttonbeschriftungen in der richtigen Sprache zu erhalten.
Für Facebook folgende Stelle suchen

<del>//connect.facebook.net/en_US/all.js#xfbml=1</del>

und darin die Länderkennung tauschen. en_US wird zu de_DE.

<del>//connect.facebook.net/de_DE/all.js#xfbml=1</del>

nun steht statt „Like“ „Gefällt mir“ auf dem Button.

Für google+ muss man folgende Zeile hinzufügen

<del>window.___gcfg = {lang: 'de'};</del>

am Besten vor folgende Zeile

<del>el.className = 'g-plusone';</del>

nun ist auch der Text im google+ Dialog eingedeutscht.

Twitter und LinkedIn öffnen automatisch in der richtigen Sprache.

Socialite.js

Schreibe einen Kommentar

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