[sharebuttons]

**Spooky** · 05.04.2015, 14:31

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:

PHP-Code:


<?php echo $this->sharebuttons; ?>

Die Optionen dafür können im Newsarchiv gesetzt werden, oder auch einzeln pro News Eintrag.

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:

Code:

{{sharebuttons::boxxed::facebook:twitter:gplus:linkedin:xing:mail:tumblr:pinterest:reddit}}

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.

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.

**Supermann** · 05.04.2015, 14:55

Hallo,

bei mir gibt es das Problem das ich machen kann was ich will, aber der Pinterest Link taucht nicht im Frontend auf obwohl dieser aktiviert ist. Auch im Quellcode ist dieser nicht vorhanden, hatte erst gedacht das evtl. die Grafik fehlt...

PS. Ich nutze das Font Avesome Template

**Spooky** · 05.04.2015, 15:05

Für den Pinterest Button braucht man auf jeden Fall ein Bild in irgendeiner Form. Wenn du die social_images Extension einsetzt wird entweder ein definiertes social page image benutzt oder eines der Bild Inhaltselemente, oder das Teaserbild eines Newseintrags. Theoretisch jedenfalls. Ohne social_images Extension wird automatisch nur das Teaserbild eines Newseintrags verwendet, allerdings auch nur für die direkt im News Template ausgegebenen Share Buttons.

Ohne Verwendung der social_images Extension könntest du das Bild auch über ein Template folgendermaßen setzen:

PHP-Code:


<?php $GLOBALS['SOCIAL_IMAGES'][] = /* absolute URL to image */; ?>

**Supermann** · 05.04.2015, 15:08

Hallo,

also kann ich das Font-Awesome Template nicht nutzen wenn ich auch einen Pinterest Button haben möchte? oder habe ich das jetzt falsch verstanden. Denn was mich stutzig macht, ist das der Link überhaupt nicht bei diesem Template generiert wird.

**Spooky** · 05.04.2015, 15:10

Zitat von Supermann

also kann ich das Font-Awesome Template nicht nutzen wenn ich auch einen Pinterest Button haben möchte? oder habe ich das jetzt falsch verstanden.

Nein, das hat miteinander nichts zu tun.

Zitat von Supermann

Denn was mich stutzig macht, ist das der Link überhaupt nicht bei diesem Template generiert wird.

Wie gesagt, für den Pinterest Button muss ein Bild vorliegen. Wenn die Extension kein Bild zur Verfügung gestellt bekommt, also entweder über einen News Eintrag bei Verwendung der Share Buttons in einem News Template, oder über die social_images Extension, dann wird auch kein Pinterest Button ausgegeben.

**Supermann** · 05.04.2015, 15:16

Ah OK...

habe ich jetzt soweit verstanden, allerdings wird der Link bei dem normalen Template für das Frontend auch ohne Bild generiert, nur das dort dann eben kein Bild angezeigt wird und ich das dann manuell zugewiesen habe. Da bei dem Font-Awesome Template noch nicht einmal der Link für das Frondend generiert wurd dachte ich das ein Bug vorliegt.

**Spooky** · 05.04.2015, 15:20

Zitat von Supermann

Ah OK...

habe ich jetzt soweit verstanden, allerdings wird der Link bei dem normalen Template für das Frontend auch ohne Bild generiert, nur das dort dann eben kein Bild angezeigt wird und ich das dann manuell zugewiesen habe. Da bei dem Font-Awesome Template noch nicht einmal der Link für das Frondend generiert wurd dachte ich das ein Bug vorliegt.

Hm, verwendest du die neueste Version? Eigentlich ist dieser Teil der Templates exakt gleich.

sharebuttons_default:

PHP-Code:


<?php if ($this->pinterest && $this->image): ?>

<li><a class="pinterest" href="http://pinterest.com/pin/create/button/?url=<?php echo $this->url; ?>&amp;media=<?php echo $this->image; ?>&amp;description=<?php echo $this->description; ?>" rel="nofollow" title="{{label::sharebuttons:share_on_pinterest}}" onclick="return shd.open(this.href,460,460);">Pinterest</a></li>

<?php endif ;?>

sharebuttons_fontawesome:

PHP-Code:


<?php if ($this->pinterest && $this->image): ?>

<li><a class="pinterest fa fa-pinterest" href="http://pinterest.com/pin/create/button/?url=<?php echo $this->url; ?>&amp;media=<?php echo $this->image; ?>&amp;description=<?php echo $this->description; ?>" rel="nofollow" title="{{label::sharebuttons:share_on_pinterest}}" onclick="return shd.open(this.href,460,460);"></a></li>

<?php endif ;?>

**Supermann** · 05.04.2015, 15:24

Hallo,

jep die aktuellste Version... Ich muss mich aber korrigieren, bei der neuen Version ist der Link jetzt auch nicht mehr bei dem normalen Template zu sehen.

**Spooky** · 05.04.2015, 15:29

Ok. Nur um es nochmal zusammenzufassen, damit der Pinterest Button angezeigt wird, kannst du folgendes machen:

Die social_images Extension installieren
- ER2: [social_images]
- composer: codefog/contao-social_images
Im Seitenlayout die "Social images" aktivieren
Ein Bild auf eine der folgenden Arten bereitstellen:
- Als Inhaltselement "Bild" (wird automatisch auf der jeweiligen Seite als social image genommen)
- In der Seitenstruktur in den Seiteneigenschaften einer Seite ein "Social image" definieren
- Als Teaserbild einer News

**Supermann** · 05.04.2015, 15:48

Hallo,

danke Dir werde das mal versuchen, weis allerdings nicht ob die Erweiterung auf 3.1.5 läuft

**Spooky** · 05.04.2015, 15:57

Ok, ja die social_images Extension läuft nicht mehr unter 3.0.x bzw. 3.1.x. Aber wie gesagt, du könntest das Bild aber auch über eigene Templates bereitstellen. Du kannst dir zB diese Zeile ganz oben in einem eigenen ce_image, ce_text oder news_full Template hinzufügen:

PHP-Code:


<?php if( $this->addImage ) $GLOBALS['SOCIAL_IMAGES'][] = \Environment::get('base') . $this->singleSRC; ?>

(ungetestet). Damit wäre dann das erste Bildinhaltselement auf der jeweiligen Seite für den Pinterest Share Button verfügbar.

**Supermann** · 07.04.2015, 12:00

Hallo,

ich habe eben festgestellt das bei dem Template Font-Awesome der Title beim Hover als Inserttag dargestellt wird, also es wird kein richtiger Linktitel angezeigt, sondern es wird als Titel ein InsertTag ausgegegeben.

HTML-Code:

<a class="gplus fa fa-google-plus" onclick="return shd.open(this.href,520,450);" title="{{label::sharebuttons:share_on_gplus}}" rel="nofollow" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.meine-domain.de%2Fversand-lieferung"></a>

**Spooky** · 07.04.2015, 12:46

thx, ist nun in Version 1.1.2 behoben. Du musst aber ggf. dein custom template wieder neu erzeugen und anpassen.

**Supermann** · 07.04.2015, 12:47

Hallo,

das nenn ich ja mal schnell...

Danke

**Supermann** · 07.04.2015, 12:50

Hallo,

werde ich sobald im ER verfügbar aktualisieren.

**Spooky** · 07.04.2015, 12:53

Sollte mit dem Zeitpunkt meines vorigen postes eh schon verfügbar sein

https://contao.org/de/extension-list...010029.de.html

**Supermann** · 07.04.2015, 12:55

Hallo,

ist es jetzt. Ich war wohl etwas zu schnell...

**KlausGrenoble** · 01.05.2015, 01:12

Ich habe bei mir gerade mal probeweise die 3.5.0-RC1 installiert und erhalte (nur) im FE die Fehlermeldung:

Code:

Fatal error: Cannot make static method Contao\Controller::replaceInsertTags() non static in class ShareButtons in /home/users4/k/klaus/www/galerie/system/modules/sharebuttons/classes/ShareButtons.php on line 0

Hat vielleicht (aber auch nur vielleicht) mit folgender Änderung zu tun:

Code:

Mehrere Checkboxen auswählen
Im Modus "mehrere bearbeiten" können nun mehrere Checkboxen auf einmal an- oder abgewählt werden. Dazu muss während des Klickens die Shift-Taste gehalten werden.

Gruss Klaus

**Spooky** · 01.05.2015, 01:56

Zitat von KlausGrenoble

Ich habe bei mir gerade mal probeweise die 3.5.0-RC1 installiert und erhalte (nur) im FE die Fehlermeldung:

Code:

Fatal error: Cannot make static method Contao\Controller::replaceInsertTags() non static in class ShareButtons in /home/users4/k/klaus/www/galerie/system/modules/sharebuttons/classes/ShareButtons.php on line 0

thx, fixed in 1.1.3

**pipkin** · 13.05.2015, 21:30

Hi,

habe gerade die Erweiterung, die bisher prima lief, auf 1.1.5 aktualisert (Contao 3.4.3). Jetzt sind die Sharebuttons in den News verschwunden (eingebunden über <?php echo $this->sharebuttons; ?>). Also in der Ausgabe ist einfach nichts mehr zu sehen.

Ich habe die Sharebuttons bisher nur in den News benutzt, aber ich wollte testweise gucken, ob sie in den Artikeln noch funktionieren. Allerdings finde ich die Abteilung "sharebuttons" bei den Elementen oder Artikeln überhaupt nicht. Standen die nicht auch unterhalb der "Experteneinstellungen"?

Falls sich der Fehler nicht beheben läßt - wie bekomme ich das kurzfristig wieder auf eine ältere Version zurück? Deinstallieren und neu installieren?

Vielen Dank!

**Spooky** · 14.05.2015, 00:27

Puh, werde ich mir auf jeden Fall ansehen. Aber egal ob du die Extension über Composer oder ER2 installiert hast, du kannst in beiden Fällen (bei egal welcher Extension) auch nur bestimmte Versionen installieren, nicht nur die neueste. Verwendest du den Composer Client oder das ER2?

**pipkin** · 14.05.2015, 10:46

Ich habe in meinem Backend in der Erweiterungsverwaltung gesehen, dass eine "neue Version 1.1.5 verfügbar" ist - habe kurz in die Versionshistorie geschaut (Bigfixes, kann ja nicht schaden...), runtergescrollt und gesehen "Version Contao 3.0.0 - 3.5.0-beta1" dann das Icon zum aktualisieren geklickt. Ich bin gerade ratlos, woran ich erkennen soll, dass diese Version nicht mit 3.4.3 kompatibel ist... Woran kann ich das denn sehen?

Ich bin unsicher, was meine letzte Version war - vermutlich 1.0.7, das käme zeitlich hin... Oder kannst Du mir sagen, was die letzte zu 3.4.3 kompatible Version ist?

Merci...

**Spooky** · 14.05.2015, 10:51

Die Extension sollte mit allen Versionen von Contao 3.0.0 bis Contao 3.5.0-RC1 kompatibel sein. Habe die Extension nochmal in einer Contao 3.4.5 Installation getestet, dort funktioniert alles. Deinstalliere die Extension nochmal in der Erweiterungsverwaltung (lass' aber keine Datenbank Felder löschen) und installiere danach nochmal die neueste Version der Extension neu.

**pipkin** · 15.05.2015, 02:15

Ich habe zuerst genau das gemacht, was Du vorgeschlagen hast:
Die Erweiterung (1.1.5) in meiner Installation (3.4.3) deinstalliert ohne Tabellen zu droppen und neu installiert.
Ergebnis: kein Unterschied, meine Sharebuttons in den News waren weiterhin nicht mehr zu sehen.
Dann habe ich meine Installation noch einmal - sicherheitshalber - in Kopie auf den Server gesetzt und dort auf Contao 3.4.5 geupdatet.
Wieder kein Unterschied.

Und dann habe ich in beiden Installationen nochmals etwas rumprobiert:
Ich hatte ursprünglich alle meine Sharebuttons über die einzelnen News aktiviert - also nicht über das Archiv. Ich habe dann versuchsweise mal die komplette Button-Batterie über das Nachrichtenarchiv angewählt (dort waren ja alle deaktiviert gewesen), um zu gucken, ob dort etwas ausgegeben wird. Im Frontend wurden dann alle Buttons angezeigt. Dann habe ich im Archiv wieder alle deaktiviert, gespeichert - und jetzt das Bizarre: es wurden anschließend wieder alle angezeigt, die in den News separat aktiviert waren. Dasselbe habe ich in allen weiteren Nachrichtenarchiven und in beiden Installationen noch einmal exakt so reproduziert.

Fällt wohl unter "verschluckt"... aber (puh!) wieder alles ok! ;-)

Übrigens: schöne Erweiterung!

**Spooky** · 15.05.2015, 08:58

Hm, ok. Aber du hattest auch erwähnt, dass das Inhaltselement "Sharebuttons" nicht mehr da ist. Ist das nun behoben?

**pipkin** · 15.05.2015, 11:50

Jein ...

Ich habe die Sharebuttons bisher nur in den News benutzt, aber ich wollte testweise gucken, ob sie in den Artikeln noch funktionieren. Allerdings finde ich die Abteilung "sharebuttons" bei den Elementen oder Artikeln überhaupt nicht. Standen die nicht auch unterhalb der "Experteneinstellungen"?

Ich hatte offenbar an der falschen Stelle gesucht (s.o.), denn sie erscheinen bei den Artikeln und Elementen ja nicht analog wie bei den News, sondern es gibt sie nur als Inhaltselement. Korrekt? Das Inhaltselement habe ich dann zwischendrin mal ausprobiert, und das klappte auch in der Ausgabe, aber die vor dem Update eingerichteten Sharebuttons in den News blieben verschwunden, obwohl sie im Backend vorhanden und aktiviert waren.

Denke, das eigentliche (bei mir behobene) Problem kann man mit einem ähnlichen Szenario auch reproduzieren:
Update von .. 1.0.7 (?) auf 1.1.5. mit zuvor in den News (nicht im Archiv) aktivierten Sharebuttons. Die Contao-Version hatte, so mein Gefühl, damit nichts zu tun.

**Spooky** · 15.05.2015, 13:00

Ok, werde das mal so testen.

**KATgirl** · 24.05.2015, 10:08

Ich kann das gleiche bei zwei unabhängigen Installationen beschreiben. Danke für den Tipp mit dem aktivieren in den Archiven.

Gesendet von meinem A0001 mit Tapatalk

**Spooky** · 03.06.2015, 20:14

Sollte nun mit einem Update auf die neuesten Versionen nicht mehr passieren.

**Zaolat** · 13.06.2015, 09:36

Hallo,

wie kann ich den Text der Sharebuttons ändern? Derzeit wird bei mir im Standard einfach nur facebook angezeigt. Stattdessen möchte ich jedoch etwas anderes da stehen haben.

**Spooky** · 13.06.2015, 15:16

Einfach mit einem eigenen sharebuttons_default Template. Aber um welchen Text geht es dir genau?

**Zaolat** · 15.06.2015, 08:33

Ich habe bei mir auf der Seite den Sharebutton drin. Auf dem Button wird jedoch bisher lediglich der Text "Facebook" dargestellt. Stattdessen möchte ich gerne einen anderen Text anzeigen lassen.

Mit Template ändern hat es geklappt. Danke!

**pipkin** · 01.07.2015, 14:43

Hi,

bei uns tauchte gerade die Frage auf, ob man die Buttons auch nehmen darf, um an anderen Stellen zu verweden, beispielsweise im E-Mail-Footer. Hintergrund ist, dass man natürlich gern durchgehend dieselben Icons verwenden will. Wäre das ok?

**Spooky** · 01.07.2015, 14:57

Natürlich, die Icons sind ja generell frei verfügbar.

**pipkin** · 01.07.2015, 16:14

Achso, klasse!

Gibt ja auch viele, für die man erst die Rechte erwerben muss - oder die man nur frei in nicht kommerzielen Projekten verwenden darf etc. Da ich die Herkunft dieser Icons nicht kenne, dachte ich, frage ich lieber ;-)

Merci!

**Spooky** · 01.07.2015, 16:29

Herkunft der Icons ist übrigens in der README festgehalten

**pipkin** · 01.07.2015, 16:57

Ich hatte in den Dateien der Erweiterung schon herumgesucht, aber auf Github noch nicht geguckt! Wie schön, dass hier die Wege zum Schöpfer so kurz sind, dass man ihn direkt fragen kann ;-)

Dankeschön!

**pipkin** · 31.07.2015, 15:07

Huhu,
ich habe die Sharebuttons in der Seite integriert. Beim Teilen auf Facebook wird in dem Fenster, das dann erscheint, vorher ja der zu teilende Text und ggf. Bild angezeigt (z.B. die Description der Seite o.ä.). Manchmal steht da aber nur "Sehr geehrter Besucher". Das wird dann auch so auf Facebook geteilt. Wenn ich es ein anderes mal versuche (dieselbe Seite), steht dort sinnvollerer Inhalt (Description) und ein Bild wird i.d.R. auch geladen.

Woher kommt der Text "Sehr geehrter Besucher"? Und wieso ist er mal da - und mal nicht?

**Spooky** · 31.07.2015, 15:12

Naja, der Text "Sehr geehrter Besucher" kommt von deiner Website. Ist unter den URLs, die du sharest, jemals so eine Ausgabe da gewesen? Facebook hat das für diese URLs noch so im Cache. Mit dem Debugger kannst du mit dem Button "Fetch new scrape information" forcieren, dass Facebook den Cache für diese URL erneuert.

**pipkin** · 31.07.2015, 15:28

Danke für den Tipp mit dem Fetchen!
"Sehr geehrter Besucher" kam wohl aus einer Contao-Fehlermeldung, als die Seite nicht erreichbar war.
"URL returned a bad HTTP response code."

Ich nehme an, das ist auch bei anderen Unterseiten im Cache gelandet.
Gibt es einen Weg, alle URLs der Website neu zu fetchen, oder muss man das einzeln machen..?

Thema: [sharebuttons]

Themen-Optionen

Thema durchsuchen

[sharebuttons]

"Sehr geehrter Besucher" im Facebook-Share-Fenster

Aktive Benutzer

Aktive Benutzer

Berechtigungen

Contao

Empfohlene Webdesign-Bücher