Ende letzten Jahres hatte ich angefangen eine kleine Extension zu basteln, mit der man schnell und einfach Share Buttons im Inhalt oder im Layout verwenden kann - angestoßen durch diese Anleitung. Da man bei einigen Web Projekten auch nicht immer ein eigenes Design für Share Buttons erfinden muss, habe ich mir außerdem gedacht, ich stelle zusätzlich auch noch "Themes" für die Buttons zur Verfügung - mit frei verfügbaren Button Icons aus dem Web. Die Share Buttons können als Modul, Inhaltselement, in News Templates und als Insert Tag eingefügt werden.
- ER2: [sharebuttons] (wird nicht mehr aktualisiert)
- Composer: fritzmg/contao-sharebuttons
- GitHub: github.com/fritzmg/contao-sharebuttons
Themes
Egal wie man die buttons einbindet, man hat immer dieselben Optionen - bspw. stehen (aktuell) 10 verschiedene Themes zur Verfügung. Wenn ein Theme ausgewählt wurde, werden automatisch entsprechende Stylesheets hinzugefügt. Ansonsten styled man sich die Buttons selbst. Dies sind die derzeit verfügbaren Themes:
Namen der Themes von oben angefangen:
- Boxxed
- Boxxed (16px)
- Contao
- Light
- Shadow
- Simple Flat
- Simple Icons Black
- Simple Icons White (grey background added for visibility)
- Font Awesome
Template
In allen Fällen kann auch ein eigenes Template angegeben werden, falls man eine eigene Struktur benötigt. Das eigene Template im /template Ordner muss schlicht und einfach mit dem Namen sharebuttons_ beginnen.
Font Awesome
Es gibt außerdem ein Theme und Template für Font Awesome Icons. Dies setzt natürlich voraus, dass ihr Font Awesome in eurem Layout integriert habt, entweder über die contao-font-awesome Extension oder manuell. Das Font Awesome Theme inkludiert Styles womit die Buttons ähnlich groß wie die anderen grafischen Buttons sind. Ansonsten könnt ihr auch einfach kein Theme auswählen, oder das Theme "Text" benutzen und styled euch die Buttons selbst.
Wenn ihr die verwendeten Font Awesome Icons austauschen wollt (bspw. wenn ihr fa-facebook-square statt fa-facebook verwenden wollt), dann erzeugt euch unter "Templates" einfach ein eigenes sharebuttons_fontawesome template und ändert die CSS Klassen darin dementsprechend.
News
Es besteht die Möglichkeit die Share Buttons direkt in einem News Template (news_*) ausgeben zu lassen:Die Optionen dafür können im Newsarchiv gesetzt werden, oder auch einzeln pro News Eintrag.PHP-Code:
<?php echo $this->sharebuttons; ?>
Diese Möglichkeit ist vor allem dann wichtig, wenn man die Share Buttons pro News Eintrag in einer Newslist bzw. dem Newsarchiv verwenden will - ansonsten wären URL und Titel (und ggf. Beschreibung) falsch.
Insert Tag
Es besteht auch die Möglichkeit die Share Buttons über einen Insert Tag zu integrieren. Der Name des Insert Tag ist sharebuttons, die weiteren Parameter getrennt durch "::" sind das Theme, das Template und die Sozialen Netzwerke (letzere wiederum getrennt durch ":"). Theme und Template sind optional. Der folgende Insert Tag würde Share Buttons mit dem Boxxed Theme erzeugen und allen derzeit verfügbaren Sozialen Netzwerken:Um herauszufinden welchen Key-String man für das gewünschte Template und Theme braucht, kann man sich das $GLOBALS['sharebuttons']['themes'] und $GLOBALS['sharebuttons']['networks'] in der config/config.php ansehen.Code:{{sharebuttons::boxxed::facebook:twitter:gplus:linkedin:xing:mail:tumblr:pinterest:reddit}}
Social Images
Damit bspw. für Facebook auch ein Bild, bzw. das richtige Bild für den geteilten Link auftaucht, braucht man klarerweise die entsprechenden OpenGraph Meta Tags im <head> der Seite. Dies könnte man zum Beispiel mit der [social_images] (codefog/contao-social_images) Extension erledigen. Die sharebuttons Extension holt sich darüber hinaus für den Pinterest Share Button außerdem automatisch das definierte Social Image der Page oder ein Bild aus einem Inhaltselement oder das Teaserbild aus einem News Eintrag, falls verfügbar, wenn man diese Extension benutzt.
Support
Anfragen und Bemerkungen können natürlich hier im Thread gemacht werden, vorzugsweise aber als Issue auf GitHub.