Heise Shariff in TYPO3 einbinden
Die Einbindung von Social Media Buttons in eine Webseite ist eine wundervolle Sache. Ein Klick auf einen Button von Facebook oder Twitter, und ein Inhalt ist geteilt. Der Nachteil dieser Lösungen in den letzten Jahren: Um den Datenschutz war es bei den Lösungen zum Teilen oft recht schlecht bestellt.
Die Kollegen von Heise.de haben sich im abgelaufenen Jahrzehnt über dieses Thema Gedanken gemacht und sich überlegt, wie sie das Teilen von Inhalten im Internet einfach gestalten können, dabei aber größtmöglichen Datenschutz einhalten können. Darauf entstanden in der Heise Shariff.
Um den Heise Shariff in eine TYPO3 Webseite einzubauen, gibt es mehrere Möglichkeiten. Diese Varianten werden im im Folgenden beschreiben. Und damit wird klar, warum wir erneut eine eigene Lösung mit TypoScript, Fluid Template und JavaScript erstellt haben.
TYPO3 Extension Heise Shariff
Eine einfach und recht bequeme Möglichkeit, den Heise Shariff in die eigene TYPO3 Webseite zu integrieren, besteht darin, die Extension rx_shariff zu installieren. Diese ist im TYPO3 Extension Repository verfügbar:
Diese Extension ist schnell installiert, konfiguriert und eingebunden. Wenn man seine Webseite dann durch ein Tool zur Suchmaschinenoptimierung jagt, stellt man fest, dass der Validator des W3 Consortiums einen Fehler anmeckert. Beanstandet wird dabei der Einbindung des Shariff in ein Fluid Template:
<html xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper">
<rx:shariff data="{url: 'http://seite.de/'}" services="facebook,xing" />
</html>
Es stellt sich also die Frage, ob man nicht lieber eine eigene Lösung erstellen sollte. Da es sich ohnehin anbietet, nicht übermäßig viele Extensions zu installieren, um bei TYPO3 Updates und Upgrades nicht in Probleme zu laufen, bot sich diese Strategie in diesem Fall an. Und hier zeigte sich, dass eine Umsetzung mit eigenen Werkzeugen in TYPO3 die nervenschonendere Variante ist.
Heise Shariff in TYPO3 Webseite Setup und Templates einbinden
Der Source Code für die Einbindung des Shariff findet sich auf der Github Seite des Projektes:
Dort steht der Download für eine ZIP-Datei. Diese kann man in sein Projekt einbinden. Es reicht, alle Sourcen in ein Verzeichnis seiner TYPO3 Webseite oder seiner Provider Extension einzubinden. Auf dieser Webseite finden Sie auch Vorlagen für HTML-Code zur den Optionen des Shariff.
TypoScript Setup für CSS und JavaScript
Wenn Sie die Sourcen entpackt haben, ist der erste Schritt, jeweils ein Style Sheet und eine JavaScript Datei in das TypoScript Setup der TYPO3 Webseite einzubinden. Welche Variante man wählt, ist davon abhängig, ob man bereits Font Awesome (CSS) und jQuery (JavaScript) ins Projekt eingebunden hat. Ist beides bereits vorhanden, bietet sich eine solche Einbindung an:
Style Sheet Heise Shariff
page {
includeCSS {
css998 = EXT:extension/Resources/Public/shariff/shariff.min.css
css998.media = all
}
}
Style Sheet Heise Shariff
page {
includeJSFooterlibs {
file = EXT:extension/Resources/Public/shariff/shariff.min.js
}
}
Fluid Einbindung Heise Shariff
Wenn beide Sourcen ins Projekt eingebunden sind, ist der letzte Schritt, eine HTML-Vorlage ins Seitentemplate einzubinden. Hier bietet sich das Fluid Template der Seitenvorlage oder die Layout Datei an, je nach Aufbau des TYPO3 Projekts. Man kann dann in Zusammenhang mit Bootstrap einen solchen Quelltext für Fluid aufbauen:
<div class="row div-shariff">
<div class="col-12 col-sm-12 col-md-12">
<div class="shariff" data-services="facebook,twitter,info"></div>
</div>
</div>
Damit ist der Heise Shariff lauffähig. Sie haben nun Möglichkeiten, weitere Buttons anzubinden, die Ansicht der Buttons und weitere Optionen zu beeinflussen. Für diesen Teil Ihrer TYPO3 Webseite sind Sie nun unabhängig von anderen Extensions.