tmp-Verzeichnis

Da ich gerade etwas Zeit hatte, hab ich mal selber ein bisschen rumgespielt. Zunächst einmal hat mich schon die ganze Zeit gestört, dass die Zeichen nicht mittig in den Kreisen waren und je nach Theme nicht mehr weiß. Fällt bei Facebook und dem Info-Button besonders auf.

Korrigiert durch folgende Einträge in meiner style.css:

/* Neue Formatierung */
.shariff .theme-round li a {
	text-align: center;
	color: #fff !important;
	padding-left: 0 !important;
}

/* Neutralisierung vorhandener Formatierungen */
.shariff .theme-round li.shariff-button a::before {
    left: 0 !important;
    position: relative !important;
}

Solltest du es in das Plugin übernehmen wollen, ist es natürlich sinnvoller statt Neutralisierungen die ursprünglichen Einträge zu ändern, besonders wenn diese eh nicht aus dem original Heise-Code kommen.

Nun zu den Share-Counts. Mein Ziel war es, diese anzuzeigen, wenn man mit der Maus drüber fährt. Gelöst durch folgende Änderungen:

/* Share-Count beim Round-Theme bei :hover */
.shariff .theme-round .share_count {
    display: inline !important;
    height: 100% !important;
    padding: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
}

.shariff .theme-round .share_count {
    background-color: transparent !important;
    color: transparent !important;
}

.shariff li.facebook .share_count:hover {
    background-color: #99adcf !important;
    color: #183a75 !important;
}

.shariff li.twitter .share_count:hover {
    background-color: #96d4ee !important;
    color: #0174a4 !important;
}

.shariff li.googleplus .share_count:hover {
    background-color: #eda79d !important;
    color: #a31601 !important;
}

.shariff li.pinterest .share_count:hover {
    background-color: #ff050f !important;
    color: #fff !important;
}

.shariff li.linkedin .share_count:hover {
    background-color: #99adcf !important;
    color: #183a75 !important;
}

.shariff li.xing .share_count:hover {
    background-color: #4fa5a7 !important;
    color: #15686a !important;
}

.shariff li.reddit .share_count:hover {
    background-color: #e9f2fa !important;
    color: #000000 !important;
}

.shariff li.stumbleupon .share_count:hover {
    background-color: #fb613c !important;
    color: #fff !important;
}

Wiederum lassen sich einige !important und natürlich das anfänglich “display: inline !important;” einsparen, indem man es direkt anpasst, anstatt nachträglich zu korrigieren.

Sieht dann alles zusammen so aus: http://social-emotions.de/test-asdfgh

Was mir noch aufgefallen ist: Der Print-Button ist weg, obwohl er in den Einstellungen dabei ist. Keine Ahnung warum.

Gruß starguide

So, und nun die versprochenen Details. Als Basis für alles diente das neuste Update von Heise in Bezug auf die .less-Dateien. Hauptgrund dafür war, dass es doch noch einige Altlasten in der vorhandenen Datei gab und auch Heise inzwischen einiges verbessert hat. Zudem sollte das Problem von bbgg21 (siehe Thread „Fehler in Grafiken?“) durch die neuen Anpassungen ebenfalls bereits behoben sein. Ich habe alle notwendigen Dateien einmal hier zusammengepackt:

http://www.social-emotions.de/shariff.zip

Das Minify hab ich mir mal für den Moment gespart. Auffälligste Änderung: Heise hat jetzt die Formatierung für die einzelnen Dienste ausgelagert in jeweils eigene .less-Dateien. Ich bin daher mit allen anderen Diensten ebenso verfahren. Eine kompilierte Version der shariff-complete.less, die auf der Testseite im Einsatz ist, liegt im build-Ordner.

Allerdings sind auch ein paar kleine Anpassungen an anderer Stelle notwendig. Zunächst einmal gefällt mir dein Ansatz, font-awsome nicht immer wieder aus dem Netz zu laden, sondern lokal abzulegen. Das kommt auch der Geschwindigkeit zu Gute. Jedoch ist hier ein Update auf die neuste Version notwendig, denn in der sind jetzt auch die Whatsapp-Icons und Co. enthalten. Also erst einmal die neuste Version (4.3.0) ziehen und entsprechenden in den /font Ordner des Plugins packen.

Nun muss in der shariff.js noch die Anpassung nachgeholt werden, dass es jetzt ein fa-whatsapp-Icon gibt. Dazu muss, wie bei den anderen Diensten, nach name:”whatsapp”, entsprechend faName:”fa-whatsapp”, ergänzt werden.

Schlussendlich habe ich gemerkt, warum der Print-Button nicht auftauchte. Auf der Einstellungsseite des Plugins im WordPress-Backend steht folgendes:
Put in the service do you want enable (facebook|twitter|googleplus|whatsapp|mail|print|pinterest|linkedin|xing|reddit|stumbleupon|info).
Finde den Fehler 🙂 Es muss printer und nicht print heißen. Also nur ein Fehler im Hinweistext, aber darauf muss man erst einmal kommen. shariff.php -> Zeile 69.

Ich finde „printer“ als shareText jetzt nicht so super, könnte man in der shariff.js besser auf „print“ setzen, das klingt irgendwie besser finde ich. Auf deutsch steht ja meistens auch drucken und nicht Drucker da. Das gleiche gilt für Französisch und Spanisch. Außerdem sollten man am besten auch die Sprachunterscheidung wie bei den anderen Diensten machen. Also in der shariff.js shareText:{de:”drucken”,en:”print”,fr:”imprimer”,es:”imprimir”} und title:{de:”drucken”,en:”print”,fr:” imprimer “,es:” imprimir “}, schreiben. Ich hab mal eine überarbeitete shariff.js beigefügt im build-Ordner, in der auch das WhatsApp-Icon bereits gesetzt ist.

Und was hat uns das alles nun gebracht?

– Beim Round-Theme sind die Zeichen nun in der Mitte des Kreises.
– Beim Round-Theme wird beim Überfahren mit der Maus nun der Counter angezeigt.
– Die Abstände der Buttons zueinander stimmen nun in allen modernen Browsern überein.
– Beim Widget nehmen die Icons und der shareText jetzt nicht mehr die Hauptfarbe des Themes an, auch nicht beim mouseover (gut zu sehen auf deiner eignen Testseite – nichts gegen grüne Schrift auf grau 😉
– Die Buttons sind jetzt responsive und sparen auf Mobilgeräten so eine Menge Platz ein z.B durch das weglassen der Share-Texte bei zu wenig Platz.
– Bei White-Theme hat der Counter nun keine Hintergrundfarbe mehr und „blinkt“ beim Überfahren mit der Maus dadurch auch nicht mehr in unterschiedlichen Farben.
– Der Share-Text ist nun einheitlich weit weg von den Icons.
– Reddit im Color und Round-Theme hat schwarze Schrift bekommen, da man weiß auf hellblau nicht wirklich lesen konnte.
– Der Drucken-Button ist nun mehrsprachig.
– Einige andere Kleinigkeiten.

Ich hoffe es funktioniert alles und findet soweit Gefallen. 🙂