Mittwoch, 6. August 2014

Integration von Twitter, Facebook, G+ und Co.

TYPO3 Extension form4_socialmedialinks

Die Extension form4_socialmedialinks vereinfacht die Pflege und Integration von Socialmedia-Links in eine TYPO3 Seite.

Installation

Wie üblich wird die Extension über den Extension Manager installiert. Anschließend wählt man im Root-Template-Record das Statische Template für form4_socialmedialinks aus.

Nun empfiehlt es sich einen, Sysfolder anzulegen. Im Extension Manager wählt man die Konfiguration der Extension form4_socialmedialinks aus und konfiguriert die Id des neuangelegten Socialmedialinks-Sysfolders.

Konfiguration

Eigene Socialmedia Links lassen sich recht einfach erstellen:

Man fügt im Sysfolder einen neuen Datensatz ein und wählt zwischen den zwei unterschiedlichen Varianten aus: Script und Url.

Ein Datensatz vom Typ "Script" integriert einen Javascript Block und "Url" bietet die Pflege eines einfachen Links mit einem gepflegten Bild.

Hier ein Beispiel-Datensatz des Typ "Url" der eine einfache Verlinkung auf Diaspora bereitstellt. Der Beispiellink word für Diaspora wie folgt aufgebaut: https://joindiaspora.com/bookmarklet?url="URL"&title="TITEL"

Für ein Twitter FollowMe Icon wird eine Einbindung des Sharebuttons mit Hilfe von Javascript benötigt. Hier das Beispiel von Twitter FollowMe als Script:

Zur Unterstützung der Implementierung werden Marker genutzt, die innerhalb einer Url oder einem Script dynamisch die gewünschten Inhalte oder Werte erzeugen.

So kann ein einfacher Link z.B. so erzeugt werden: del.icio.us/post. Bild und ID werden entsprechend aus dem gepflegten Feld dargestellt.

Möchte man eigene Platzhalter definieren so werden diese via Typoscript innerhalb von plugin.tx_form4socialmedialinks_pi1.placeholder.NAME definiert und können dann wie ###URL### und ###TITLE### eingebunden werden.

Ein Beispiel:

plugin.tx_form4socialmedialinks_pi1 {
    placeholder {       
        TITLE = TEXT
        TITLE.data = page:title
        TITLE.htmlSpecialChars = 1
        TITLE.rawUrlEncode = 1
    }
}

Der definierte Platzhalter wird als ###TITLE### in Url oder Script Konfiguration gepflegt. Der Globale Unique Identifier wird später bei der Einbindung benötigt.

Einbindung

Für die Einbettung der Social-Media-Links in die Seite bieten sich zwei Varianten an:

  1. via Plugin  an beliebiger Stelle
  2. via Typoscript z.B. wiederkehrend innerhalb bestimmter Seitenbereiche.

Das Plugin erlaubt die Auswahl der Links und stellt diese dann an entsprechender Stelle als Content-Element dar:

Via Typoscript wird ein USER-Objekt angeboten, das gewünschte Links z.B. in Footern oder anderen Bereichen integriert:

10 < plugin.tx_form4socialmedialinks_pi1
10.displayItems = twitter,facebook

Bei der zweiten Zeile kommen hier nun die Globale Unique Identifier zum Einsatz, die zuvor für die Socialmedia Links vorgegeben wurden. Sie selektieren mit "displayItems" die entsprechend Datensätze aus dem Sysfolder und stellt sie dann im Front-End dar.

comments powered by Disqus