Social Icons: Mastodon

Viele Word­Press-The­mes bieten die Möglichkeit, zum Beispiel im Kopf- oder Fußbereich der Webseiten ein „Social Menu“ zu integrieren, also ein Menü mit So­cial-Me­dia-Sym­bo­len, hinter denen Links zu den eigenen Profilen beim den jeweiligen Diensten stehen. Über diese Links können Seitenbesucher mit nur einem Klick zum gewünschten Profil gelangen. Je nachdem, wie aktuell das eingesetzte Theme ist, gibt es eine mehr oder weniger umfangreiche Auswahl an „Social Icons“, also an So­cial-Me­dia-Sym­bo­len.

Nach der Übernahme von Twitter durch den exzentrischen Milliardär Elon Musk, sind viele Twit­ter-Nut­zer zur alternativen Kurz­nach­rich­ten-Platt­form Mastodon übergelaufen. Diese möchten nun natürlich auch gerne einen Link auf ihr Mas­to­don-Pro­fil mit dem entsprechenden Symbol einrichten:

Natürlich gilt das nicht nur für Mastodon, sondern ebenso für andere exotische So­cial-Me­dia-Diens­te, die auch nicht im Symbolsatz des eigenen Word­Press-The­mes vorhanden sind. Ich bezweifle beispielsweise, dass all die Symbole, die da oben zu sehen sind, in allzu vielen Word­Press-The­mes vollständig verfügbar sind.

Glücklicherweise aber können wir uns eine große Auswahl an So­cial-Me­dia-Sym­bo­len im Internet besorgen und in unsere Webseiten einbauen.

Woher bekommt man solche Symbole?

Um diese Frage zu beantworten, muss ich vorausschicken, dass es sich bei diesen Symbolen nicht um Grafiken handelt, sondern um Zeichen von Symbolschriftarten. Das hat den Vorteil, dass all diese Symbole nur wenig Speicherplatz benötigen, sehr einfach farblich passend zur eigenen Seite abgestimmt werden können und in ihrer Größe frei skalierbar sind.

Wir brauchen also eine Schriftart, die möglichst viele der exotischen Symbole enthält. Fündig werden wir zum Beispiel bei Fork Awesome. Die Schriftart Fork Awesome Icons enthält in der Version 1.2.0 insgesamt 796 unterschiedliche Symbole. Die einzigen bekannten So­cial-Me­dia-Dienste (Stand 2023), die ich dort nicht gefunden habe, sind Tiktok und Threema.
Die Schriftart wird von einer Entwicklergemeinschaft um den US-Ame­ri­ka­ner Dave Gandy programmiert und darf kostenfrei und ohne Auflagen eingesetzt werden.

Wie gehen wir also vor, um auf die Fork Awesome Icons von unserer Website aus zugreifen zu können?

1. Wir laden die Schriftarten auf unseren PC und schieben sie auf den Webserver, auf dem unsere Word­Press-In­stal­la­tion gespeichert ist.
2. Wir binden die Schriftart über eine CSS-Da­tei in unsere Seiten ein.
3. Wir sorgen dafür, dass diese CSS-Da­tei von unseren Webseiten geladen wird.
4. Wir integrieren die Symbole an den Stellen unserer Website, wo sie unsere Besucher sehen sollen.

1. Schriftarten auf den Webserver schieben

Zunächst laden wird ein ZIP-Ar­chiv mit dem gesamten Schriftmaterial auf unseren PC. (Folge dem Link und klicke auf Download.) Lege das ZIP-Archiv in einem separaten Verzeichnis ab und entpacke es dort. Das Archiv enthält ein große Menge an Verzeichnissen und Dateien für die unterschiedlichsten Zwecke. Wir brauchen jedoch nur sehr wenig vom gesamten verfügbaren Material:

In dem entpackten Dateipaket gibt es ein Unterverzeichnis mit dem Namen fonts. Darin befinden sich fünf Dateien mit dem Namen forkawesome-webfont und verschiedenen Dateiendungen. Alle fünf Schriftartdateien laden wir in ein (beliebiges) Verzeichnis auf unserem Webserver mit Hilfe eines FTP-Pro­gramms.

Ich lade solche Dateien oft in ein neues Verzeichnis mit dem Namen fonts hoch, das ich zuvor im Hauptverzeichnis des Servers angelegt habe. (Dort liegen vielleicht schon andere Schriftarten, zum Beispiel diejenigen, die ich bereits im Beitrag zu den Google Fonts abgelegt habe.)

2. Schriftart über CSS-Datei in die Seiten einbinden

Im entpackten Dateipaket von Fork Awesome gibt es ein weiteres Unterverzeichnis mit dem Namen css. Darin befindet sich eine Datei mit dem Namen fork-awesome.min.css. Diese Datei öffnen wir mit einem Texteditor. Wir ändern alle Stellen mit url(../fonts/ zu url(/fonts/, entfernen also die beiden Punkte. Insgesamt sind das sechs Stellen in der Datei, alle sehr weit oben im etwas unübersichtlichen Code.

Die angepasste Datei fork-awesome.min.css lädst Du mit Hilfe des FTP-Pro­gramms in das Ser­ver-Ver­zeich­nis Deines „Child-The­mes“. Was das ist und wie man es anlegt, habe ich in einem anderen Beitrag beschrieben.

3. CSS-Datei auf die Website laden lassen

Mit Hilfe des FTP-Pro­gramms verbindest Du Dich mit dem Webserver, auf dem Deine Word­­Press-In­stal­la­tion gespeichert ist. Dort wechselst Du in das Verzeichnis, in dem das Ori­gi­nal-The­me liegt, das Du ausgesucht hast. Also zum Beispiel Twenty Twenty. Dieses Verzeichnis findest Du unter wp-content/themes/twentytwenty. (Oder eben dem Namen Deines Themes.)

In diesem Verzeichnis findest Du die Datei header.php. Jetzt überträgst Du diese Datei auf Deinen PC und öffnest sie mit einem Texteditor. Recht weit oben in dieser Datei findest Du die Zeile </head>. Oberhalb dieser Zeile fügst Du folgenden HTML-Co­de ein:

<link rel="stylesheet" href="https://wordpress.fassbar.de/wp-content/themes/twentytwenty-child/fork-awesome.min.css" type="text/css" media="all" />
</head>

Dabei musst Du natürlich den Teil https://wordpress.fassbar.de/wp-content/themes/twentytwenty-child durch den Pfad ersetzen, in dem sich Dein eigenes Child-The­me befindet.

Sobald Du diese Änderung in die header.php eingebaut hast, lädst Du die Datei wieder mit dem FTP-Pro­gramm auf Deinen Webserver. Allerdings nicht zurück in das Verzeichnis im Ori­gi­nal-The­me. Dort würden Deine Änderungen mit dem nächsten The­me-Up­date wieder überschrieben.
Deshalb lädst Du die geänderte header.php in das Verzeichnis Deines „Child-The­mes“. Was das ist und wie man es anlegt, habe ich in einem anderen Beitrag beschrieben.

4. Symbole auf der Website integrieren

Wenn Du alles richtig gemacht hast, kannst Du jetzt die gut siebenhundert Symbole der Schriftart auf Deinen Websiten einbinden. So wie ich das beispielsweise im Fußbereich meiner Website im Abschnitt Soziale Medien mache. Allerdings geht das nicht über die Tastatur Deines PCs. Um ein Symbol in den Text einzufügen, wechselst Du im WordPress-Seiteneditor von der visuellen Ansicht in die HTML- oder Textan­sicht. An der gewünschten Stelle fügst Du folgenden HTML-Co­de ein:

<i class="fa fa-mastodon"></i>

Statt mastodon kannst Du selbstverständlich auch andere Symbolnamen verwenden. Die meisten Symbolnamen sind leicht zu erraten: facebook, pinterest, whatsapp …
Die vollständige Namensliste findest auf der Schriftartenseite. Jetzt speicherst Du Deine Word­Press-Sei­te und lässt sie Dir anzeigen. Voilà, da hast Du Dein So­cial-Me­dia-Sym­bol!

Detailanpassungen kann man im Code sehr einfach vornehmen:

<i style="color: grey;" class="fa fa-mastodon fa-lg"></i>

style="color: grey;" färbt das Symbol grau ein. Der Klassenzusatz fa-lg vergrößert das Symbol um 33 Prozent. Es gibt auch die Zusätze fa-2x, fa-3x, fa-4x und fa-5x, um das Symbol zwei- bis fünfmal so groß zu machen. Viele Beispiele zur Verwendung im HTML-Code findest Du hier. Wem die fünf Größenstufen zu unpräzise sind, kann statt der Verwendung von Größenklassen die Symbolgröße über den style-Tag exakt steuern:

<i style="font-size: 1.7em;" class="fa fa-mastodon"></i>

Bis hierhin war alles noch ganz einfach.

Symbole ins Social-Media-Menü integrieren

Wir erinnern uns: Darum ging es eigentlich. Wir wollten nicht vorhandene So­cial-Me­dia-Sym­bo­le mit den dazu gehörigen Links in das entsprechende Menü einbinden.

Nun muss man wissen, dass diese So­cial-Me­dia-Menü­sym­bo­le bei so gut wie allen Word­Press-The­mes nicht irgendwo als Zeichen im HTML-Co­de integriert, sondern über CSS-Eigen­schaf­ten der Menüelemente gesteuert werden.

Wir nähern uns der Problemlösung in zwei Schritten:

a) Social-Media-Element hinzufügen

Das kann man zum Beispiel in der Administrationsansicht links im Menü Design > Customizer erledigen. Dort wählt man den Punkt Menüs aus, danach Social. Nun kannst Du einen individuellen Link und einen dazu passenden Namen eingeben. Um beim Beispiel zu bleiben, legen wir einen So­cial-Me­dia-Link zu unserem Mas­to­don-Pro­fil an:

• URL: https://mastodon.social/@Gargron
• Link-Text: Mastodon

(Ja, ich weiß. Dieses Profil gehört Eugen Rochko, dem Gründer und Chefentwickler von Mastodon. Ist ja auch nur ein Beispiel. Natürlich ersetzt Du den Link durch den auf Dein eigenes Mas­to­don-Pro­fil.)

Zuletzt veröffentlichst Du die Änderungen und rufst Deine Word­Press-Start­sei­te auf. Dort wo Dein So­cial-Me­dia-Me­nü angezeigt wird, ist jetzt ein Link-Sym­bol zu sehen, also etwas Ähnliches wie .

Achtung: Wenn zu diesem Zeitpunkt schon das Mas­to­don-Sym­bol erscheint, dann enthält bereits Dein Stan­dard-The­me das entsprechende Symbol und Du hast eine Lösung für ein Problem gesucht, das Du gar nicht hattest!

Gehen wir also davon aus, dass tatsächlich ein allgemeines Link-Sym­bol zu sehen ist. Wenn Du darauf klickst, solltest Du auf dem verlinkten Mas­to­don-Pro­fil landen.

b) Social-Media-Symbol austauschen

Machen wir uns daran, das allgemeine Link-Sym­bol gegen das Mas­to­don-Lo­go auszutauschen. Zunächst müssen wir nachsehen, über welche CSS-Klas­se die So­cial-Me­dia-Menü­ele­men­te gestaltet werden. Dazu holst Du mit Deinem FTP-Pro­gramm die Datei style.css aus Deinem Ori­gi­nal-The­me vom Webserver. (Also nicht die aus Deinem Child-The­me!)

Diese Datei öffnest Du mit dem Texteditor und suchst nach irgendeinem sehr bekannten sozialen Netzwerk, also zum Beispiel nach Twitter. Irgendwo in der style.css wirst Du eine Zeile finden, die ungefähr so aussieht: .social-menu a[href*="twitter.com"]:before { content: "\f202"; }

Diese Zeile kopierst Du und öffnest nun die Datei style.css Deines Child-The­mes. Im Gegensatz zu der Style-Da­tei Deines Ori­gi­nal-The­mes wird die des Child-The­mes weitgehend leer sein.

Du fügst nun die kopierte Zeile irgendwo in diese Child-Da­tei ein und änderst sie wie folgt:

.social-menu a[href*="mastodon.social"]:before
{
	font-family: "ForkAwesome";
	content: "\f2e1";
}

Wichtig dabei ist der Beginn des Eintrags. Ich weiß nicht, ob dort bei Dir .social-menu steht oder irgendetwas Anderes. Wie die Menüklasse in Deinem Theme heißt, hat der Entwickler festgelegt. Da könnte also zum Beispiel nur .menu stehen. Oder .social-navigation. Du behältst jedenfalls genau den Klassennamen bei, den Du in der Ori­gi­nal-Style­da­tei Deines Themes gefunden hast.

Achte bitte unbedingt darauf, den CSS-Enti­tä­ten­co­de von Twitter auf den von Mastodon zu ändern: \f2e1. Wenn Du ein anderes Symbol als Mastodon verwenden willst, kannst Du den passenden CSS-Enti­tä­ten­co­de in der Datei fork-awesome.min.css finden. Wenn Du dort zum Beispiel nach Youtube suchst, wirst Du den Code \f167 finden.

Last but not least ist mastodon.social auch nur ein Platzhalter für die Mastodon-Instanz, auf der Du Dich eingenistet hast. Bist Du in Wirklichkeit womöglich Mitglied auf troet.cafe? Auf sueden.social oder norden.social? Auf instanzfreun.de? Du wirst es wissen, nehme ich an.

Nachdem Du die durchgeführten Änderungen im Texteditor gespeichert hast, lädst Du die style.css wieder hoch ins Child-Ver­zeich­nis auf Deinem Webserver. Das sollte es dann auch gewesen sein.

---

Wichtiger Hinweis: Wenn Du nach vollbrachtem Werk Deine Word­Press-Sei­te erneut aufrufst, kann es sein, dass Dir noch immer nicht das gewünschte Mas­to­don-Symbol angezeigt wird, sondern wie zuvor das allgemeine Linksymbol. Obwohl Du vorher alles richtig gemacht hast. Das liegt dann daran, dass Dein Browser – um Downloadvolumen einzusparen und den Seitenaufbau zu beschleunigen – die zuletzt abgerufenen CSS-In­hal­te in einem temporären Zwischenspeicher, dem sogenannten Cache, abgelegt hat und diese erst nach einer gewissen Zeit aktuell vom Server holt.

Um diesen Browsercache zwangsweise zu leeren klickst Du unter Windows nicht auf den Kreispfeil (neu Laden) im Browser, sondern benutzt die Tastatur: STRG+F5 leert vor dem Seitenaufruf den Browsercache.