Schönere Sharing-Buttons in Contao

(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">

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

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.

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

Kommentar von Alexander |

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

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?

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

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.

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

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

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?

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?

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.

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!

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

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?!

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

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!