Gute Blog-Artikel oder Webseiten mit anderen Menschen in Sozialen Netzwerken wie Facebook, Xing oder Twitter mitteilen zu können, ist nicht nur „modern“, sondern hilft auch vielen im Wust der aber-milliarden Websites die „guten“ heraus zu finden.
Manchmal kann man für eine umfangreiche Bookmark- oder Share-Liste auch Extensions für TYPO3 installieren. Dazu später mehr.
Facebook Typoscript – Gefällt mir!
Ich möchte hier aber die Möglichkeit der Einbindung über Typoscript vorstellen.
In der Designvorlage sind drei Icons abgebildet, also es sollen drei Links zu Facebook, Twitter und Mister Wong generiert werden, die per Klick die URL und den Titel der Seite übermitteln sollen.
HTML-Struktur
Ein einfacher DIV-Block mit den jeweiligen Links.
<div class="shareBlock"> <a class="facebookLink" href="#">Facebook</a> <a class="twitterLink" href="#">Twitter</a> <a class="wongLink" href="#">Mister Wong</a> </div>
CSS mit Sprite-Image
Auch, wenn es in dem Beispiel „nur“ drei Icons sind, macht es Sinn, diese als CSS-Sprites anzulegen. Es ist durchaus denkbar, dass später noch weitere Social-Dienste angefügt werden. Aus Performance-Gründen werden hierbei die HTTP-Request auf einem niedrigen Niveau gehalten und alle Icons in eine Grafik gepackt. Aus diesem Grund erhalten alle Links im CSS den gleichen Hintergrund (social-icons.png) und im Anschluss wird über background-position der jeweilige Bereich der Sprite-Grafik angezeigt.
.shareBlock { background: url(teilen.png) no-repeat 0 50%; clear: both; margin: 0 0 20px -17px; padding: 3px 0 5px 100px; } .twitterLink, .facebookLink, .wongLink { background: #fff url(https://blog.marit.ag/wp-content/uploads/social-icons.png) no-repeat; display: inline-block; height: 32px; width: 32px; text-indent: -9999px } .facebookLink {background-position: 0 0} .twitterLink {background-position: 0 -50px} .wongLink {background-position: 0 -100px}
Der Einfachheit halber habe ich die Icons in der Sprite-Grafik in einem Raster von 50px angelegt – so kann man die background-position leichter „finden“.
Das Arbeiten mit CSS-Sprite-Grafiken hat mehrere Vorteile:
- nur 1 Bild für alle Icons wird geladen
- nur 1 HTTP-Request
- die Dateigröße dieser Datei ist viel geringer als die Summe mehrerer Icon-Grafiken
- barrierearm, da Textlink mit Hintergrund-Grafik
Typoscript-Snippet
#| sociallinks |# lib.sociallinks = COA lib.sociallinks { wrap = <div class="shareBlock">|</div> 10 = TEXT 10 { value = Facebook typolink.title = Auf Facebook teilen typolink.ATagParams = class="facebookLink" typolink.parameter.cObject = COA typolink.parameter.cObject { 10 = TEXT 10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}| 10.typolink.parameter.data = TSFE:id 10.typolink.returnLast = url 10.typolink.addQueryString = 1 10.typolink.addQueryString.exclude = id 20 = TEXT 20.data = page:title 20.wrap = &t=| 20.rawUrlEncode = 1 } } 20 = TEXT 20 { value = Twitter typolink.title = Tweet it! typolink.ATagParams = class="twitterLink" typolink.parameter.cObject = COA typolink.parameter.cObject { 10 = TEXT 10.data = page:title 10.noTrimWrap = |ließt%20grad:%20|| 10.dataWrap = http://twitter.com/home/?status=| 10.rawUrlEncode = 1 20 = TEXT 20.dataWrap = %20-%20{$baseURL}| 20.typolink.parameter.data = TSFE:id 20.typolink.returnLast = url 20.typolink.addQueryString = 1 20.typolink.addQueryString.exclude = id } } 30 = TEXT 30 { value = Mister Wong typolink.title = Wong it! typolink.ATagParams = class="wongLink" typolink.parameter.cObject = COA typolink.parameter.cObject { 10 = TEXT 10.dataWrap = http://www.mister-wong.de/index.php?action=addurl&bm_url={$baseURL}| 10.typolink.parameter.data = TSFE:id 10.typolink.returnLast = url 10.typolink.addQueryString = 1 10.typolink.addQueryString.exclude = id 20 = TEXT 20.data = page:title 20.wrap = &bm_description=| 20.rawUrlEncode = 1 } } }
Typoscript am Beispiel Facebook
10 = TEXT 10 {
ein cObject TEXT wird initiiert
value = Facebook
Der Wert „Facebook“ wird festgelegt (Ankertext)
typolink.title = Auf Facebook teilen
ein Link (a-Tag) wird drumherum generiert und das title-Attribut vom Link wird mit „Auf Facebook teilen“ gefüllt
typolink.ATagParams = class="facebookLink"
eine Link-Klasse „facebookLink“ wird über ATagParams eingesetzt
typolink.parameter.cObject = COA typolink.parameter.cObject {
für den Typolink-Parameter (href) wird ein neues cObject vom Typ COA initiiert
10 = TEXT 10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}|
erster Teil des href: der externe Link zur sharer.php-Funktion von Facebook mit dem u-Parameter der Typoscript-Konstante „$baseURL“ direkt als dataWrap (in den Typoscript-Constants muss diese Konstante vorhanden sein, Beispiel: baseURL = http://blog.marit.ag/)
10.typolink.parameter.data = TSFE:id
die aktuelle Seiten-ID wird ausgelesen
10.typolink.returnLast = url
die URL wird als String zurückgegeben
10.typolink.addQueryString = 1
alle weiteren URL-Parameter werden ausgelesen, Beispiel tt_news oder L-Parameter für die Sprachwahl
10.typolink.addQueryString.exclude = id
die zusätzliche Seiten-ID wird hier ausgeschlossen
20 = TEXT
zweiter Teil des Links
20.data = page:title
der Seitentitel wird ausgelesen
20.wrap = &t=|
dieser Wert wird als Wert für den Parameter t des href gewrappt
20.rawUrlEncode = 1
kodiert den übergebenen String entsprechend RFC 1738 zur sauberen Übergabe
} }
und alle Klammern wieder schließen 😉
Extensions die man installieren kann
- Facebook Social Plugins (socialplugins)
- Links for Social bookmarking and social network (wt_socialbookmarks)
- Social Media Links (form4_socialmedialinks)
- Sexy-Bookmarks (sexybookmarks)
Fazit
Für den Einsatz von Facebook-Share oder Twitter-Button kann man durchaus Typoscript verwenden. Eine schlanke schnelle Lösung auch wenn man weitere Bookmark-Dienste oder Soziale Netzwerke hinzufügen möchte. Ich würde dabei immer den Weg über CSS-Sprites mit allen Icons in einer Grafik gehen, schon aus Performance-Gründen.
Ein kurzer Satz über den Unterschied zwischen der Facebook-Like! Funktion und Share. Für mich persönlich ist die Share-Funktion aktuell für diesen Zweck des „Verbreitens/Teilens“ bei Facebook besser geeignet. Ich kann beim Prozess auf Facebook noch zusätzliche Kommentare hinzufügen und ein Vorschaubild auswählen (das direkt aus der Seite ausgelesen wird), sofern eines vorhanden ist. Bei der Like-Funktion (Gefällt mir!) wird bei Facebook lediglich ein Satz abgespeichert „Sven gefällt Marit AG TYPO3 Blog Facebook-Share und Twitter-Update Button mit Typoscript“ ohne weitere Kommentar-Möglichkeiten.
klasse skript – danke!
Cooles Script, danke
Sehr cooler Tipp, das kann ich sicher früher oder später mal brauchen. Danke!
Gruß vom Bodensee
Wolfgang
Sehr schön aufgebautes TypoScript!
Und sehr schön nachvollziehbar erklärt!
Vielen Dank!
Lässt sich das auch in tt_news einbinden?
Schöner Artikel. Vielen Dank!
Hallo,
super Erklärung und super Script, aber den like Button pro Seite bekomme ich auf verschiedenste Weisen problemlos hin, hast du auch eine Idee wie man den pro Post einbinden kann, ohne dass alle Buttons gleichzeitig reagieren sondern tatsächlich pro Post, die Empfohlene URL bekomme ich hin aber leider gehen alle Buttons auf like wenn ich nur einen nutze.
Vielleicht ahst du ja so was schon mal hinbekommen ???
besten Gruß
Marco
guten tag
erst einmal danke für das tolle tutorial
ich hab aber noch mal eine frage zu der umsetzung
wenn ich möchte das meine besucher die seite liken
dann liken sie ja meine homepage und nicht meine facebook unternehmenspage
wie müsste den der code aussehen wenn ich meine facebookpage liken lassen möchte dann würde es doch ausreichen den like code von facebook zu integrien
ohne meine baseurl zu integrien
oder
besten dank für ihre mühe
lg
andreas
Super Tutorial!
Was mir noch fehlt ist, dass ich auch die Anzahl der Likes oder Twitts, etc. ausgeben kann.
Hat sich da schon mal jemand mit befasst?!
lg
Jenny
Wo finde ich denn die 3 jeweiligen Links für „Ein einfacher DIV-Block mit den jeweiligen Links.“
Cheers & ein schönes Wochenende
Super Sache – Dankeschön!
Interessant wäre noch das Ganze für tt_news, einmal für die Listansicht + Detailansicht.
Gruß
Schöne Methode, nach langem Suchen fand ich dieses Tutorial, welches ich für die Einbindung der Bookmarks bevorzuge. Vielen Dank, für diese prima Variante.
schön, aber sobald die url eine ebene tiefer geht also z.b.
/news/detail.html findet FB keine bilder mehr.
nee idee
gruss
stefan
ich hoffe auch, endlcih eine lösung gefunden zu haben. aber ich kann das ganze nicht zum laufen bekommen. wie / wo baue ich das ganze denn ein?
Tolles Script und endlich einmal nachvollziehbar erläutert!
*Thumbs up!* von mir!
Bei mir wird allerdings mit {$baseUrl} keine Url generiert…
Der Marker wird komplett vom System ignoriert.
Kann das daran liegen, dass die Website mehrsprachig ist?
Ich finde keine Lösung. ‚Ne Idee?
Danke – Kunden wollen den Facebook Button immer öfter. Leider werden dadurch dan oft schlecht gewartete Facebook Pages promoted. Am besten die Facebook Timeline gleich auch im Typo3 anzeigen lassen. Das ‚motiviert‘ den Seitenbetreiber die Inhalte aktuell zu halten. Nützliche Extension aus dem Repository: coo_facebook http://goo.gl/3SBhK
Bei mir funktioniert {$baseURL] auch nicht.
Besser geht das mit {TSFE:baseUrl}
Hallo,
kann mir jemand sagen, ob und wie ich sagen kann welches Bild übergeben wird?
Hallo,
Sehr interessanter Beitrag, vielen Dank für die tolle Präsentation der Informationen.
Lg Kathi