Social Media Automation mit TYPO3

Wie wäre es also, wenn Social Media Engagement automatisch und direkt aus dem TYPO3 Backend zu steuern ist?

Mittlerweile besteht Einigkeit darin, dass Social Media Engagement nicht „mal eben nebenbei“ erledigt werden kann. Viele Unternehmen haben erkannt, dass es nicht ausreicht, einen technikaffinen Mitarbeiter mit der Betreuung von Facebook, Twitter & Co. zu beauftragen und diese dort intuitiv agieren zu lassen. Sie haben erkannt, dass Social Media eine Strategie voraussetzt und es wichtig zu wissen ist, welche Themen, Plattformen für das Unternehmen Relevanz haben und von wem diese diskutiert werden. Dementsprechend haben sich die Social Media Kanäle als Instrumente im Marketing-Mix etabliert, die sowohl fachliche als auch finanzielle Ressourcen benötigen.

Trotz dieser positiven Entwicklung stellt das Social Media Engagement immer noch eine zeitintensive Disziplin dar, welche die Rufe nach Tools zur Unterstützung nicht verstummen lassen.

Der Markt bietet zahlreiche Werkzeuge, jedoch keine um aus einem Contentmanagementsystem wie TYPO3 heraus zu agieren.

Zu schön um wahr zu sein?

Nicht mit unserer RSS-to-Social-Media TYPO3 Extension.

Die RSS-to-Social-Media TYPO3 Extension der zeroseven design studios ist die Basis für die einfache Social Media Automation.

Mit der RSS-to-Social-Media TYPO3 Extension werden relevante Inhalte einfach und bequem, zentral im TYPO3 Backend gepflegt. Im Anschluss hieran können diese Inhalte dann automatisiert über einen RSS-Feed in Social Media Kanäle wie Facebook, Twitter, XING, Instagram und Pinterest geteilt werden.

Die Steuerung direkt aus TYPO3 heraus bietet einige Vorteile, da der relevante Content bereits im TYPO3 CMS hinterlegt ist und somit doppelte Datenbestände vermieden werden können. Darüber hinaus steht eine Hashtag-Library zur Verfügung, die es ermöglicht häufig verwendete Begriffe zu definieren und eine einheitliche Schreibweise sicherzustellen. Bei Bedarf können diese Hashtags ausgewählt werden.

2016-08-05 Mock-Up MacRSS1

Mit dieser TYPO3 Extension gelingt wieder die Fokussierung auf das Wesentliche der Arbeit. Mit wenigen Klicks wird ein einfacher und flexibler Automationsworkflow realisiert, der den Social-Media-Prozess schneller sowie produktiver gestaltet. Dabei werden keine Programmierkenntnisse benötigt.

2016-08-05 Mock-Up MacRSS2

Publikation

Inhalte können RSS-to-Social-Media TYPO3 Extension direkt aus dem Backend des TYPO3 CMS terminiert und gestaffelt publiziert werden. Status-Updates lassen sich damit über die Zeit verteilt veröffentlichen, um möglichst viele Empfänger aus der relevanten Zielgruppe anzusprechen.

Distribution

Ein Inhalt – zum Beispiel der Hinweis auf einen neuen Blogbeitrag – lässt sich automatisch auf mehreren Social-Media-Plattformen zeitgleich oder zeitversetzt veröffentlichen.

2016-08-05 Mock-Up MacRSS3

2016-08-05 Mock-Up MacRSS4

Facebook und Twitter Automation

Über die RSS-to-Social-Media TYPO3 Extension und unseren Automationsdienst lassen sich zwei mögliche Varianten der Automation auf Facebook und Twitter realisieren. In der ersten Variante werden Status-Updates mit Text, Bild und Links ermöglicht. Mit der zweiten Variante lassen sich Fotos auf der Facebook Fanpage oder Twitter direkt aus TYPO3 veröffentlichen. Welche Variante gewählt wird, steht frei und es kann zwischen ihnen gewechselt werden.

XING Automation

Durch den speziell für XING optimierten RSS-Feed der RSS-to-Social-Media TYPO3 Extension können Mitarbeiter, diesen in ihr Profil einbinden. Mit jeder neuen Meldung teilen diese Mitarbeiter neue Nachrichten automatisch in deren XING-Netzwerk und werden damit als glaubwürdiger Markenbotschafter des Unternehmens wahrgenommen und erzielen damit eine hohe Reichweite.

Instagram und Pinterest Automation

RSS-to-Social-Media TYPO3 Extension stellt Fotos mit Beschreibung und Link automatisch auf den Fotoplattformen bereit. Damit wird lediglich auf die Bilder zugegriffen, die TYPO3 gepflegt bzw. in der Dateiliste hinterlegt sind. Das spart Zeit durch die Vermeidung von zusätzlichen Uploads auf den jeweiligen Plattformen.

Haben wir Ihr Interesse geweckt?

Perfekt! Gerne stellen wir Ihnen in einem persönlichen Termin die Extension unverbindlich und kostenlos vor.
Am besten kontaktieren Sie uns noch heute – wir freuen uns auf Sie!

Responsive und Retina-optimieriert Bilder in TYPO3

Bilder und responsive Webdesign sind nur schwer zu vereinen.
Während das Frontend in relativen Prozent-Angaben und Breakpoints arbeitet, bleiben Bilder zwangsläufig in Form von einzelnen Pixeln erhalten.

Die <picture>-Tag-Lösung hat unter Webentwicklern zwischenzeitlich eine hohe Beliebtheit gefunden und wird von vielen Browsers bereits nativ unterstützt.
Ältere Browser können über Polyfills versorgt werden.

Während aus technischer Sicht die Lösung steht, fängt für den Redakteur der Website das Problem gerade einmal an.

Anforderungen:

Ein Bild-Set für hochauflösende und Pagespeed-optimierte Darstellung von Grafiken verlangt unter Umständen folgendes:

  • Ein Bild pro Viewport für „normale“ Displays.
  • Ein Bild pro Viewport für Retina-Displays.
  • Eine Fallback-Grafik für ältere Browser.
  • Eventuell eine vergrößerte Grafik für die Lightbox-Funktion.

Für den Redakteur bedeutet dies schnell mal bis zu 14 einzelne Bilder in unterschiedlichen Größen zu erstellen, auf den Server zu laden und zu verknüpfen.

html picture-tag

Unser Tribut an alle Mobile-User mit geringer Bandbreite und Retina-Displays

Mit dem neuen fluid-basierten Content-Elemente-Rendering in der jüngsten Version von TYPO3 haben wir eine Lösung ausgearbeitet, welche es erlaubt mit nur einer Grafik die gewünschten Bild-Größen einzelner Viewports im Backend einfach auszuwählen.
Der Rest läuft nun ganz automatisch ab!

Ihre Grafik wird mit einem Klick auf allen Viewports in die optimale Größe gebracht.
Die Möglichkeit den Bildausschnitt über die Crop-Funktion zu wählen bleibt dabei selbstverständlich erhalten.

Keine Lust mehr darauf alle Fotos manuell mit Photoshop auf die richtige Größe zu bringen?
Wir auch nicht!

mask image online
Bild-Ausschnitt wählen

TYPO3 und SEO

Grundlage in der Suchmaschinenoptimierung reichen oftmals schon aus, dass eine Website bei Google entsprechend gelistet wird. TYPO3 liefert hierbei schon wichtige Voraussetzungen für die Pflege einer Website. Grundsätzlich ist der wichtigste Faktor bei der Suchmaschinenoptimierung der Content einer Website. Wird hier der gewünschte Text oder Wortkombination nicht gelistet, ist es eigentlich unmöglich, im Rennen um das Ranking eine entscheidende Rolle zu spielen. Aber auch im Content ist Google über deren semantische Webcrawlern sehr sensibel. Die modernen Algorithmen von Google können mittlerweile schon erkennen, ob Inhalte sinngemäß sind oder nicht.
Wie funktionieren eigentlich Suchmaschinen? TYPO3 und SEO weiterlesen

RTE für Extbase-Extensions konfigurieren

Wer sich mit dem RTE in TYPO3 schon einmal genauer auseinander gesetzt hat, der weiß, dass für die interne Speicherung und Verarbeitung von Links nicht der gewöhnliche HTML-Tag <a> verwendet wird. Vielmehr arbeitet der RTE intern mit einem <link>-Tag. Auf den ersten Blick mag das seltsam erscheinen, bei näherer Betrachtung ist das jedoch logisch und konsequent. RTE für Extbase-Extensions konfigurieren weiterlesen

Felder im TYPO3-Backend gruppieren

Mit der TYPO3-Extension Extension Kickstarter lassen sich Extensions incl. der dazu gewünschten Tabellen recht einfach anlegen. Allerdings werden alle Felder nur simpel nacheinander aufgelistet und eine echte Zusammengehörigkeit ist nicht sofort zu erkennen.

Um dem Redakteur zumindest eine kleine Hilfestellung zu geben, könnte man die Feldbeschriftungen anpassen. Dadurch lässt sich zumindest auf den zweiten Blick eine Zusammengehörigkeit erkennen.

Mit ein klein wenig Kenntnis über das „Table Configuration Array“ (TCA) kann man Felder jedoch auch sinnvoll und unverkennbar gruppieren. Wie das geht wird im Folgenden vorgestellt.

Zunächst öffnen wir die vom Extension Kickstarter angelegte Datei tca.php und suchen dort die Konfiguration für die entsprechende Tabelle. Diese sieht in stark vereinfachter Darstellung in etwa so aus:

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, x, y, isbranch')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime')
	)
);

Im Feld [types][0] sind alle Felder in der Reihenfolge aufgelistet, wie sie im Backend-Formular zu sehen sein werden. Im Feld [palettes][1] ist die zweite Optionspalette definiert, die dem Feld hidden über den Index 1 zugeordnet ist. Genau eine solche Optionspalette wollen wir uns, in angepasster Form, zu Nutzen machen. Zu diesem Zweck verlagern wir die Felder x, y, isbranch in eine eigene Palette.

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, --palette--;Flash-Weltkarte;worldmap')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime'),
		'worldmap' => array('showitem' => 'x, y, isbranch')
	)
);

Dieser geben wir der Übersichtlichkeit halber keine Zahl als Index, sondern den Namen worldmap. Zusätzlich platzieren wir in der normalen Liste aller Felder ([types][0]) ein neues Feld, das ebenfalls einer kleine Erklärung bedarf: --palette--;Worldmap;worldmap. Diese Konfiguration wird durch Semikolon in drei Bereiche unterteilt:

  • Der erste Wert --palette-- bedeutet, dass das kein reguläres Eingabefeld ist, dessen definition sich ebenfalls im TCA befindet, sondern ein Spezialfeld als Platzhalter für eine Palette.
  • Der dritte Wert worldmap ist der Index für die Palette, wie er auch im Array [palettes] auftaucht.
  • Der Zweite Konfigurations-Wert ist der angezeigte Name der Palette.

Als letzten Feinschliff geben wir der Palette noch ein Attribut canNotCollapse. Das bedeutet, dass sie nicht mit der Option „Zweite Optionspalette anzeigen“ erscheint und verschwindet, sondern immer noch zu sehen ist. Zusätzlich machen wir den Namen Übersetzbar. Das geschieht, indem wir den vorher fest eingetragenen Wert Flash-Weltkarte durch einen Verweis auf die Local-Lang ersetzen. Selbstverständlich muss in der Datei locallang_db.xml dann auch der entsprechende Eintrag vorhanden sein.

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, --palette--;LLL:EXT:myextension/locallang_db.xml:tx_myextension_demo.worldmap;worldmap')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime'),
		'worldmap' => array('showitem' => 'x, y, isbranch', 'canNotCollapse' => 1)
	)
);

Tipp: 90% aller TYPO3 Fehler beheben

Kennen Sie das nicht? Sie ändern eine Headline oder einen Text in TYPO3 und plötzlich taucht eine Fehlermeldung auf mit der Meldung, das diese durchgeführte Änderung nicht möglich seie. Sprich Ihre Änderung wird auf dem Live-System einfach garnicht erst angezeigt.

Diesem Problem können Sie als TYPO3 User nun aber leicht entgegenwirken, indem Sie ganz einfach in der Administrationsoberfläche von TYPO3 oben auf das Blitz TYPO3 Blitzicon in der Menüleiste klicken und anschließend den Punkt “ Alle Caches löschen“ auswählen.

Mit diesem Tipp, können Sie in der Regel rund 90% aller TYPO3 Fehler beheben.

TYPO3-Tabellen nur auf der root-Ebene

In TYPO3 ist in der Regel jeder Datensatz einer konkreten Seite zugeordnet. Das hat seinen Sinn, um Ordnung zu schaffen. Allerdings kann es in einigen Fällen auch von Nachteil sein, wenn Datensätze dadurch evtl. schwerer auffindbar sind. Abhilfe kann geschaffen werden, indem eine Tabelle nur noch für die root-Ebene (pid = 0) erlaubt wird.

Das geht ganz einfach mit einem Eintrag in der TCA der entsprechenden Tabelle, z.B. in der Datei typo3conf/extTables.php

$TCA[<tablename>]['ctrl']['rootLevel'] = 1;

Es ist aber dabei zu beachten, dass nur Backend-Benutzer mit Administrator-Rechten auf der root-Ebene arbeiten dürfen.

Read-Only-Felder im TYPO3-Backend

In manchen Fällen ist es wünschenswert, in TYPO3 Tabellenfelder für einen BE-User bzw. Administrator zwar sichtbar zu machen, aber nicht bearbeitbar. Das funktioniert mit einer kleinen Anpassung im Table Configuration Array (TCA) der entsprechenden Tabelle.

$TCA[<tablename>]['columns'][<fieldname>]['config']['readOnly'] = 1;

Das Attribut kann auf die unterschiedlichsten Feldtypen angewendet werden. Hier ist außer einem einzeiligen und einem mehrzeiligen Textfeld sogar ein Datei-Feld auf „readOnly“ gesetzt:

Die Sinnhaftigkeit dieses Vorgehens muss natürlich in jedem Fall individuell geprüft werden. Der oben gezeigte Screenshot zeigt einen Ausschnitt aus einer Extension, die über Fronten-User-Eingaben befüllt wird. Den Backend-Usern ist es dann noch gestattet, zusätzliche Dateien anzuhängen.

Breite von Mehrfach-Auswahlboxen im TYPO3-Backend

Wer regelmäßig mit dem TYPO3-Backend arbeitet, wird auch die Auswahlboxen mit Mehrfachauswahl kennen: Rechts eine Box mit allen verfügbaren Elementen, links eine Box mit allen gewählten Elementen in der festgelegten Reihenfolge. – Eigentlich eine einfache Sache. Doch sobald die Einträge zu lang sind, werden sie automatisch abgeschnitten und lassen sich unter Umständen nicht mehr korrekt voneinander unterscheiden.

Diese Multiple-Selectboxen lassen sich jedoch mit Leichtigkeit anpassen. Dazu reichen wenige Zeilen Code, die am besten in der Datei extTables.php platziert werden. Hier am Beispiel des Feldes include_static_file der Tabelle sys_template:

t3lib_div::loadTCA('sys_template');
$TCA['sys_template']['columns']['include_static_file']['config']['selectedListStyle'] = 'width:400px';
$TCA['sys_template']['columns']['include_static_file']['config']['itemListStyle'] = 'width:400px';

Die Konfigurations-Option selectedListStyle bezieht sich auf die Liste der bereits ausgewählten Elemente, also die linke Box. Während itemListStyle die Liste aller Elemente anspricht, also die rechte Box.

Es können beliebige CSS-Informationen hinterlegt werden. Statt width könnten also ebenso Anweisungen wie min-width oder max-width hinterlegt werden. Auch Anweisungen zu Farben, Schrift etc. können hinterlegt werden. Mehrere Anweisungen lassen sich – wie bei CSS gewohnt – mit Semikolon getrennt angeben.

$TCA['sys_template']['columns']['include_static_file']['config']['itemListStyle'] = 'width:400px;font-style:italic;color:grey';