Schönere Sharing-Buttons in Contao

von Jan Theofel (Kommentare: 28)

Schönere Sharing-Buttons in Contao

Buttons zum Weiterverbreiten ("Sharen") einer Webseite sind inzwischen Standardanforderungen an fast jede Webseite. Der Contao-Core und einige Erweiterungen bieten Funktionen an, diese sind jedoch meistens nicht optimal. Daher hier ein manueller aber deutlich flexiblerer Ansatz, der zahlreiche Probleme mit den herkömmlichen Wegen löst.

Änderungshistorie:
5.5.2012 ursprüngliche Anleitung veröffentlicht
18.10.2012 Link bei Google+ angepasst
11.3.2013 Anpassungen für Conato 3 ergänzt
15.5.2013 LinkedIn ergänzt
4.11.2013 Angaben zum Template klarer beschrieben

Probleme der normalen Lösungen:

  • Twitter- und Facebook-Button im Core sind Teil des Artikels und können daher nicht frei platziert im Layout werden. (Lösung: Können überall eingefügt werden.)
  • Erweiterungen wie der Google+ Button (hier beschrieben) laden Daten von Google was den Seitenaufbau langsam macht und datenschutzrechtlich Bedenklich ist. (Lösung: Button ist eine Grafik und erst nach dem Klick gelangt der Besucher zu Google+ und erst dann werden Daten von dort geladen.)
  • Buttons für andere Dienste fehlen. (Beispiellösung für Xing und LinkedIn.)
  • Tell-A-Friend-Funktionen über ein E-Mail-Formular sind rechtlich nicht ungefährlich. (Lösung: Es wird das normale E-Mail-Programm geöffnet und mit einem Text und der zu empfehlenden URL vorbelegt. Der Benutzer versendet selbst.)

All diese Nachteile beseitigt die folgende Lösung mit Buttons für Twitter, Facebook, Google+, LinkedIn, Xing und E-Mail-Empfehlung, die auch für andere Dienste leicht abgewandelt werden kann.

Benötigt:

  • Keine Module oder anderen Anforderungen

Anleitung:

  1. Erzeuge jeweils einen Share-Button für die Dienste Twitter, Facebook, Google+, LinkedIn, Xing und E-Mail. (Wahlweise natürlich Dienste weglassen. ;-)
  2. Lege eine Datei mit dem Namen "mod_share.html5" (bzw. Alternativ ".tpl" bzw. ".xhtml" je nach Contao-Version und eingesetzter HTML-Variante) in das Template-Verzeichnis ("templates") ab. Füge dazu den Inhalt dieser Datei (bis Conato 2.9.x) bzw. dieser Datei (ab Contao 3.x) ein, entferne die Zeilen nicht genutzter Dienste und passe die Pfade zu den Grafiken und deren Größen an.
  3. Erstelle ein neues Modul mit dem Namen "Share" vom Typ "Eigener HTML-Code" und füge dort folgenden Inserttag ein: (ohne die Leerzeichen zwischen den geschweiften Klammern!)
    { {file::mod_share.html5} }
    Dabei muss der Pfad und Dateiname zum Template ggf. angepasst werden. (Der Umweg über das Template und Modul mit eigene Code ist nötig, weil sonst die PHP-Aufrufe im Template nicht funktionieren.)
  4. Füge dieses Modul an beliebiger Stelle im Seitenlayout ein.

Zurück

Einen Kommentar schreiben

Kommentar von Chris |

Hey Jan,
finde deine Socialimplementierung klasse! Habe sie direkt bei mir verbaut und dich gewürdigt. Wobei meine News irgendwie von Template her spinnen. Musste da ein Umweg machen damit ich sie da hab wo ich sie möchte ^.^

Hier mein Beitrag:
http://nandecore.net/nandecore-news/sharing-is-sexy.html

Viele Grüße
Chris

Kommentar von David |

Hallo,

richtig geile Anleitung. Nur habe ichd as Problem, dass der Code für das Mail-Formular nicht funktioniert:

<li class="last"><a href="mailto:hier-empfänger@einsetzen.de?subject=Webseitenempfehlung:%20<?php echo urlencode($objPage->pageTitle); ?>&body=Ich%20empfehle%20Ihnen%20folgende%20Webseite:%0A%0A<?php echo urlencode($this->Environment->base . $this->Environment->request); ?>"><img src="tl_files/buttons/mail.png" alt="Per E-Mail empfehlen" width="20" height="20"></a></li>

woran kann das liegen? es wird im frontend dann folgendes ausgegeben:

@regneinsetzen.de?subject=Webseitenempfehlung:%20Splatter-Beer+Pong-Set&body=Ich%20empfehle%20Ihnen%20folgende%20Webseite:%0A%0Ahttp%3A%2F%2Fbeerpong.de%2Fde%2Fproduktdetails%2Fproduct%2Fsplatter-beer-pong-set.html">

Antwort von Jan Theofel

Hast du schon mal versucht, statt dem Umlaut ä ein ae zu schreiben?

Kommentar von David |

Ja, habe ich versucht. Aber klappt irgendwie nicht :(

Kommentar von Jan Theofel |

Dann würde ich danach dennoch auf ein Encoding-Problem der Datei bzw. in der Zeile tippen, ggf. mit nichtsichtbaren Sonderzeichen. Am besten lösche die Zeile noch mal und gib sie neu (nach und nach) ein. Ansonsten ist es schwer das ohne Zugriff auf das echte System zu sagen.

Kommentar von Andy |

Bei mir wird beim abspeichern des Codes im Moduls sofort alles wieder entfern......
Woran liegt das

Antwort von Jan Theofel

Ich nehme an, dass du den PHP-Code als HTML-Code im Modul eintragen wolltest. Das klappt leider nicht. Daher musst du den Umweg über die Template-Datei nehmen, die dann per Inserttag eingebunden wird.

Kommentar von Edgar Selting |

Danke für diese geniale Umsetzung. Ich war schon länger genau danach auf der Suche.

Kann es sein, dass Google den Code geändert hat? Denn das Empfehlen eines Artikel bei g+ funktioniert weder bei mir noch hier auf der Seite. Aber auch so absolut empfehlenswert.

Antwort von Jan Theofel

Ich habe den Code inzwischen ausgetauscht, so dass die neuen Google-URL berücksichtig ist.

Kommentar von StummerWinter |

Vielen Dank für den Super-Tipp.

Ich hätte aber zwei kleine Bemerkungen:

-Bei Google+ hat sich der Share Link geändert (siehe https://developers.google.com/+/plugins/share/#sharelink)

der Google+ <li> müsste demnach jetzt so aussehen:
<li><a href="https://plus.google.com/share?url={<?php echo urlencode($this->Environment->base . $this->Environment->request); ?>" rel="nofollow" title="Auf Google+ teilen" target="blank"}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="tl_files/buttons/googleplus.png" alt="Google+" width="20" height="20"></a></li>

-Für das Mailformualar habe ich den "ä" Umlaut mit &auml; ersetzt, da er sonst bei mir nicht korrekt angezeigt wurde.

Aber ansonsten Top-Lösung und auch an sonst eine eine interessante Seite.

Viele Grüße,
StummerWinter

Antwort von Jan Theofel

Danke für die Korrektur des Google+ Links! Ich pflege das gleich in den Artikel ein.

Kommentar von Alexander |

Wie erzeuge ich denn wie im Schritt #1 angesprochen die verschiedenen share-Buttons?
Viele Grüße

Antwort von Jan Theofel

Das sind ganz normale Grafiken, wie sie mit jeder Grafikverarbeitung erzeugt werdne können. Ich habe meine nicht selbst gemacht, sondern aus den hier im Impressum angegebenen Icon-Bibliotheken zusammengestellt.

Kommentar von Natalie |

Bei mir funktionieren facebook und twitter nicht, es kommt Fehler 404. Bei Google+, Xing und per Email empfehlen ist alles einwandfrei...Woran kann das liegen?

Antwort von Jan Theofel

Bei Facebook und Twitter nutze ich die share.php von Contao. Die muss vorhanden sein und darf nicht über mögliche Regeln in der .htaccess umgeleitet werden. 

Kommentar von Jens |

Vielen Dank für die gute Anleitung!

Kommentar von Christina |

Ich glaube in der share.php hat sich etwas geändert, ich hatte nämlich auch Fehler 404 bei Facebook und Twitter, bis ich aus "<a href="share?p=facebook (usw)" <a href="share/?p=facebook (usw) gemacht habe (und das dann auch bei Twitter). Jetzt gehts.

Christina

Antwort von Jan Theofel

Danke für den Hinweis Christina! Ich habe das eben in der Anleitung ergänzt.

Kommentar von Hazim |

interessanter Artikel...
nur muss man darauf achtem, dem Nutzer hinzuweisen, dass Facebook auch es auch speichert, wenn man auf der entsprechenden Seite war, selbst wenn man den Share-Button nicht betätigt.
Dafür gibt es aber auch mittlerweile gute Lösungen..
Nicht das man da eine Geldstrafe zahlen muss wegen so einem Missverständnis.

Antwort von Jan Theofel

Genau darum geht es hier: Genau das ist mit dieser Lösung eben nicht der Fall. Denn nur und wirklich nur wenn der User den Shar-Button klickt werden Daten zu Facebook übertragen. Die Grafik wird lokal geladen und JavaScript wird nicht genutzt (also auch nicht das von Facebook). 

Kommentar von Leoluchs |

Herzlichen Dank für die Anleitung. Ich habe das gerade auf einer Contao 3.0.6 Seite realisiert - nur kleine Codeanpassungen im Template waren notwendig. Wirklich klasse!

Kommentar von Thomas |

Hallo Jan.

In Contao 3 gibts ja an der oben konfigurierten Stelle keine share.php mehr. Läßt sich deine Lösung dort trotzdem nutzen? Wenn ja, wie?

Gruß
Thomas

Antwort von Jan Theofel

Hallo Thomas,

ich habe eben eine alternative Datei für Contao 3 im Artikel mit aufgeführt. Damit sollte es gehen.

Jan 

Kommentar von Thomas |

Hallo Jan.

Super... funktioniert bestens. Nochmal Danke für das Bereitstellen dieser Lösung - ist auch aus meiner Sicht das Beste.

Schöne Ostern für dich!

Kommentar von Eva |

Hallo Jan,

vielen Dank für diese tolle und einfache Erläuterung, hat wunderbar funktioniert. Habe nur noch eine Frage. Ich möchte die Icons in der Fußzeile einbinden Beim teilen wird jetzt die Artikelbezeichnung "Fußzeile" + Webseitentitel angezeigt, was nicht so doll aussieht. Kann ich dies irgendwo anpassen oder ändere ich am besten die Artikelbezeichnung an dieser Stelle?

Viele Grüße

Kommentar von Joakim |

Hallo Jan,
danke für dieses Tutorial. Ich möchte das gerne versuchen.
Schritte 2-4 traue ich mir zu, aber wie soll ich die Share Buttons erzeugen? Kannst Du mir bitte einen kleinen Hinweiss geben :), wie das geht. Stehe dabei gerade auf dem Schlauch...
LG Joakim

Antwort von Jan Theofel

Ich verwende immer die Simple Icons von Dan Leech. Er liefert diese bereits in zahlreichen Größen aus. Aus der Library öffne ich in der Grafikverwaltung dann immer die gewünschten Größen als weiße Zeichen auf transparentem Hintergrund. Dann setze ich noch den einen einfarbigen Hintergrund in einer Farbe der Webseite ein und nutze diese Grafiken. Ein Beispiel findest du u.a. auf der WeLikeSalesCamp-Webseite.

Kommentar von Nils |

Hallo Jan,

finde auch - klasse, kurze bzw. simple Anleitung!

Eine Frage hätte ich jedoch noch: ich arbeite mit Contao 2.11.XX - welche Variante gilt hier? Die bis 2.9 oder die ab 3.0?

VG Nils

Kommentar von sonja |

Was spricht dagegen, einfach die Bildpfade der Icons im mod_article-Template anzupassen?

Antwort von Jan Theofel

Zum einen fehlen dort LinkedIn und Xing. Zum anderen, und das ist viel wichtiger, kann ich die Buttons damit nur innerhalb eines Artikels positionieren. In der Regel möchte ich diese aber außerhalb im Layout nutzen. Und ich möchte sie auch auf Seiten einsetzen können, die gar keine Artikel haben. Beispielsweise weil sie über den Katalog oder andere Erweiterungen befüllt werden und im Seitencontent nur ein Leser-Modul ohne Artikel haben.

Kommentar von Sascha |

Im Impressum steht bei Dir, dass der Facebook-Button auch von Simple Icons (Dan Leech) stammt. Hab ihn aber da nicht gefunden (dafür aber den Linkedin). Doch selbst erstellt oder von woanders her?

Antwort von Jan Theofel

Das Facebook-Icon stammt aus seiner Library. Die inzwischen herunterladbare Version hat aber ein anderes bekommen. Das dürfte der Grund sein, warum du es dort nicht mehr findest.

Kommentar von Peter Müller |

Hat sich beim Facebook-Code evtl. etwas geändert? Bei mir wird im FB-Fenster die falsche URL angegeben. Statt /blog/flexibleboxes.html steht dort nur blog.html. Ist mit [SWSocialNews] genauso. Twitter und G+ funktionieren.

Antwort von Jan Theofel

Eigentlich nicht. Bei mir funktioniert der Code weiterhin. Vielleicht ein Problem mit einer Erweiterung?

Kommentar von Fabian Kübler |

Hallo,
das klingt sehr spannend und ist eigentlich genau das, was ich bisher gesucht habe. Ich stehe nur gerade auf dem Schlauch; wo muss ich die mod_share.html5 auf dem Webserver abspeichern? Sorry, ich seh den Wald vor lauter Bäumen nicht!

Antwort von Jan Theofel

Die Datei wird wie ein normales Template behandelt und muss in den templates-Ordner abgelegt werden.

Kommentar von Malte Hinz |

Hallo Jan,

zuerst einmal vielen Dank für dein Code. Das Teilen klappt bis auf eine kleine Ausnahme wunderbar. Ich habe den Button für Facebook in meinem Nachrichtenleser drin, er teilt auch, wie gesagt, wunderbar.
Nur das Bild der Nachricht, das lässt er konsequent weg. Kannst du mir evtl sagen, woran das liegen könnte?
Ich wüsste so nicht, wo ich im Code suchen sollte, um das Bild zu finden. Ich weiß nichtmal, nach welchen Kriterien Facebook sich die raussucht.

Vielen Dank und beste Grüße,

Malte

Antwort von Jan Theofel

Hi Malte,

das mit dem Bild ist bei Facebook so eine Sache. So richtig klappen tut es oft auch nicht, wenn man alles richtig macht. Dann hilft nur noch der Facebook Debugger. Einmal die URL da durch jagen und dann weiß Facebook sicher, welches Bild er nutzen soll. Aber elegant ist was anderes. :-(

Jan

Kommentar von Eva |

Hey, ich hab den Code bei mir auch eingebaut und bin eigentlich super zufrieden. Einziges Problem ist, dass wenn auf der Seite keine Grafik liegt, nimmt er bei einem fb-Share das G+ Bild (den Button) und das sieht dann auf facebook bisschen komisch aus. Kann ich die Bildauswahl irgendwo beeinflussen?

Danke & LG eVa

Kommentar von Eva |

Hallo Jan,

vielen Dank für diese super Anleitung. Ich habe leider das gleiche Problem wie Malte, da bei einem fb-share immer der G+ button als Bild eingefügt wird, was dann bei Facebook.com bisschen komisch aussieht. Habe die URL beim fb-Debugger durchgejagt, aber da gibt er mir ja nur aus, was er sieht und ich kann nicht vorgeben, was er nehmen soll?!

Antwort von Jan Theofel

Das og:image-Tag soll da wohl weiterhelfen. Da habe ich aber auch nicht so viel Erfahrung mit. Und in dem Facebook-Debugger kann man wohl eines von mehreren Bildern aus "Hauptbild" wählen, wenn Facebook das nur bedingt erkennt. Aber auch das nutze ich nicht wirklich sondern habe es mir nur sagen lassen. Die oben beschriebenen (und alle anderen) Sharing-Buttons können leider nichts dafür, was Facebook dann aus dem Link macht. Stirnrunzelnd

Kommentar von Ira |

Vielen, vielen Dank!
Mit deiner Anleitung hat es direkt geklappt!

Kommentar von zonky |

siehe https://github.com/hofff/contao-shariff

der c't-Shariff

Antwort von Jan Theofel

Naja, das was die neu machen, haben wir also schon lange. Allerdings ohne dir Variante der Zähleranzeige - da ist eben die Frage, ob es die braucht.

Kommentar von Andreas Patzer, Screen- & Webdesigner |

Ein gutes Script, ein änliches verwende ich seit Jahren. Was aber auch bei mir ein Manko ist, dass nich die gewünschten Bilder bei Facebook geloadet werden. Es gibt da dieses neue og:image, weiss jemand wie es in den Code implementiert werden kann?

MFG und vielen Dank im Voraus!