Die Heise Shariff Social Media Buttons anpassen

Heise biete mit seiner Bibliothek Shariff verschiedene Buttons an, mit denen man den Anwendern einer Webseite die Möglichkeit zum sharen und liken anbieten kann ohne bei jedem Zugriff auf die Seite “nach Hause zu telefonieren”. Der Einbau der Buttons ist recht einfach.

Etwas kniffeliger wird es, wenn man nicht die mitgelieferten Schriften von Font Awesome verwenden möchte. In meinem Fall möchte ich Icons aus Glyphicon verwenden, da ich diese auch an andere Stelle verwende und nicht eine weitere Schriftart nur für die 4 Icons der Social Sharing Buttons verteilen möchte.

In dem Packet werden neben den fertigen CSS und JS Dateien auch die Quellen mitgeliefert. Hat man bereits Grunt installiert ist das Anpassen der Icons kein Hexenwerk mehr.

In der Datein shariff.js kann man alle Services entfernen die man nicht braucht.

Dann dort die Zeile

 $shareLink.prepend('<span class="fa ' +  service.faName + '">'); in 

 $shareLink.prepend('<span class="DeinSchriftenname ' +  service.faName + '">');

ändern.

Dazu muss man noch für jeden verwendeten Service in der Javascriptdatei

set faName: 'DerNameDeinesServiceIcons',

austauschen. In den Lessdateien der Services müssen dann die Klassennamen auf die Iconnamen und die Schriftgrößen angepasst werden.

Dann kann man die neuen Dateien für Deine Webseite mit

 grunt build

zusammenstellen lassen.