Facebook-Share und Twitter-Update Button mit Typoscript

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.

Natürlich jetzt nicht vergessen diesen Artikel zu teilen