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.

TYPO3 Share image

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(http://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

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

Share Button
Getagged mit: , , , ,
Veröffentlicht unter Allgemein, TYPO3 Technik
18 Kommentare auf “Facebook-Share und Twitter-Update Button mit Typoscript
  1. franz sagt:

    klasse skript – danke!

  2. Oliver sagt:

    Cooles Script, danke

  3. Sehr cooler Tipp, das kann ich sicher früher oder später mal brauchen. Danke!

    Gruß vom Bodensee
    Wolfgang

  4. Sebastian sagt:

    Sehr schön aufgebautes TypoScript!
    Und sehr schön nachvollziehbar erklärt!

    Vielen Dank!

    Lässt sich das auch in tt_news einbinden?

  5. weblarus sagt:

    Schöner Artikel. Vielen Dank!

  6. Marco sagt:

    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

  7. Andreas sagt:

    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

  8. Jenny sagt:

    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

  9. Klaus sagt:

    Wo finde ich denn die 3 jeweiligen Links für “Ein einfacher DIV-Block mit den jeweiligen Links.”

    Cheers & ein schönes Wochenende

  10. Super Sache – Dankeschön!

    Interessant wäre noch das Ganze für tt_news, einmal für die Listansicht + Detailansicht.

    Gruß

  11. 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.

  12. [url=http://sofia-vergaranude.typepad.com/]sofia vergara legs[/url] Brravo, seems to me, is a maggnificent phrase [url=http://sofiavergara-sextape.typepad.com/]sofia vergara tits[/url] I do not understand something [url=http://sofiavergara-porn.typepad.com/]sofia vergara butt[/url] I appologiise, but, in mt opinion, you cmommit ann drror. Let’s discuss. rWite to me in PM, ew will ta.l [url=http://sofiavergara-bikini.typepad.com/]sofia vergara fakes[/url]

  13. Stefan Schreck sagt:

    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

  14. henning sagt:

    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?

  15. Chris sagt:

    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?

  16. Merbert sagt:

    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

  17. Tereneus sagt:

    Bei mir funktioniert {$baseURL] auch nicht.

    Besser geht das mit {TSFE:baseUrl}

  18. Terminator sagt:

    Hallo,

    kann mir jemand sagen, ob und wie ich sagen kann welches Bild übergeben wird?

2 Pings/Trackbacks für "Facebook-Share und Twitter-Update Button mit Typoscript"
  1. TYPO3 » Facebook-Share und Twitter-Update Button mit Typoscript…

    Wie man mit TYPO3 und Typoscript für Facebook oder Twitter Buttons (Links) generiert, zeigt das Tutorial von Sven Wolfermann auf dem Marit AG TYPO3 Blog. Ein Vorteil wenn man nur 2-3 Social Bookmark-Dienste oder Soziale Netzwerke wie Xing oder MeinVZ o…

  2. [...] in TYPO3 mit TypoScriptin TypoScriptSuper Beitrag von Sven, wie man mit etwas TypoScript Socialbookmarks bauen kann, ohne dafür eine Extension zu [...]




Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>