TYPO3 Extension: Social Media Streams (pb_social)

#TYPO3
#pbsocial
#Web
#plus B

Social Media Streams ermöglicht es Dir, Beiträge aus Social Media Netzwerken in einem TYPO3-System anzuzeigen.

Derzeit werden folgende Social Media Netzwerke unterstützt: Facebook, Imgur, Instagram, LinkedIn, Pinterest, Tumblr, Twitter, YouTube, Vimeo und TYPO3 Extension tx_news

Mit dieser Erweiterung möchten wir eine Lücke in der Social Media Integration von TYPO3 schließen. Unser Ziel ist es, eine einfache und zeitsparende Möglichkeit der Integration und Interaktion mit gängigen Social Media Plattformen anzubieten. Unser Angebot mag nicht perfekt sein, aber wir arbeiten daran, diese Erweiterung so komfortabel wie möglich zu gestalten. Dazu brauchen wir Dein Feedback. Wenn Dir also etwas fehlt oder Du etwas anmerken möchtest, schreib einfach eine E-Mail an pb_social@plusb.de.

pb_social kann Feeds aus Social Media Netzwerken so anzeigen, wie Du es möchtest. Vielleicht willst Du Deine Facebook-Seiteninhalte auf Deiner TYPO3 Website darstellen? Kein Problem, richte Deine Facebook-Credentials und Facebook-UserId ein und schon ist pb_social startklar. Knifflige Authentifizierungsprozesse erledigt die TYPO3 Extension pb_social für Dich.

Manchmal musst Du einem Link folgen, um Zugangscodes für unser Plugin zu generieren, da die meisten sozialen Netzwerke OAuth2-Authentifizierung verwenden. Wir versichern, dass wir keinen Zugang zu Euren sensiblen Daten haben.

Wenn Du den Code der Extension nicht änderst, wird alles von der pb_social-Erweiterung in Deiner TYPO3-Datenbank und in Deinem TYPO3-Dateisystem gespeichert!

Mehr über OAuth erfährst Du hier.

1. Features der pb_social TYPO3 Social Media Streams Extension

  • unterschiedliche Konfiguration und Social Media Netzwerke für jedes Plugin und auf verschiedenen Seiten
  • verschiedene Social Media Netzwerk-Anmeldeinformationen auf jedem Plugin, die optionale Anmeldedaten für die Erweiterungskonfiguration überschreiben (global).
  • ScheDuler Cron Job zum Abrufen von Social Media Netzwerkdaten entsprechend der Konfiguration des Plugins
  • Anfordern einer Begrenzung (Request limit) für Beiträge und Filtereinstellungen für jedes Social Media Netzwerk in jedem Plugin
  • *tx_news* api access, Du kannst Deine eigenen tx_news Elemente in Deine Feeds aufnehmen mehr über die Erweiterung tx_news von Georg Ringer erfahren

2. Verwendung der pb_social TYPO3 Social Media Streams Extension

pb_social Installation

Installation mit Composer

Installiere die Erweiterung über [Composer](https://getcomposer.org/ „Mehr über composer erfahren“). In Deinem Composer-basierten TYPO3-Projektstamm den Befehl composer req plusb/pb_socialausführen.Die aktuelle Version hat ein Problem mit Composer. [View Issue].

Installation als Erweiterung aus dem TYPO3 Extension Repository (TER)

Lade die Erweiterung herunter und installiere sie mit dem Erweiterungsmanager-Modul.

2.2. Minimales Setup

  • Füge das TypoScript in Deinen Root-Template-Datensatz oder in den Template-Datensatz der Seite ein, die ein pb_social Plugin enthält.
  • Gehe zur Erweiterungskonfiguration von pb_social in den Admin Tools / Extensions / pb_social, klicke auf das Zahnradsymbol.
    • Füge die API-Anmeldeinformationen des Social Media-Netzwerks ein
  • Erstelle ein Plugin von pb_social auf einer Seite und setzte dieses Social Media Netzwerk auf „Aktiv“ (Kontrollkästchen klicken, Plugin-Änderungen speichern (vielleicht möchtest Du weitere Daten wie eine Such-ID oder etwas anderes eingeben).

2.3 Detailliertes Setup

1. Gib alle verfügbaren Social Media-Kontendaten in die entsprechenden Eingabefelder ein. Wenn Du in diesem Bereich neu bist oder die Daten nicht hast, geben die folgenden Links eine grundlegende Orientierung, wo die Zugangsdaten generiert/erhalten werden können.

Möglicherweise müssen spezielle Berechtigungen erteilt und Benutzer zu Deiner Anwendung hinzufügt werden.

Alle Details sollten auf den obigen Seiten dokumentiert werden. Wenn Du auf Schwierigkeiten stoßen solltest, lies den Abschnitt FAQ oder kontaktiere uns unter pb_social@plusb.de. Mit der Version 1.2.7 kannst Du tx_news Beiträge in den Feed integrieren. Es ist möglich, Nachrichten nach Kategorien anzuzeigen. Das Plugin benötigt ein News-Plugin, um Detailansichtslinks zu generieren. Stelle sicher, dass tx_news installiert ist, läuft und Du einige Neuigkeiten anzeigen kannst.

  • Füge das Erweiterungs-Typoscript ein.
  • Navigiere zu einer leeren Seite und füge das „Socialfeed“-Plugin ein.
  • Öffne Flexform und navigiere durch die Provider-Tabs, die Du aktivieren möchtest.
  • Es können mehrere Suchwerte verwendet werden, einfach eine kommagetrennte Zeichenkette verwenden.
  • Füge den ScheDuler-Task „Extbase CommandController Task“ hinzu und wähle „PbSocial PbSocial: updateFeedData“ (Hinweis: Die Frequenz sollte auf einen relativ kleinen Wert gesetzt werden, da die Flexform-Eigenschaft „Feed update interval“ die Aktualisierungsrate in der Frontend-Vorlage steuert. Andererseits beschränken die meisten APIs die Anfragen auf alle 10 bis 15 Minuten. Achte darauf, dass diese Anforderungsgrenzen eingehalten werden. Ein ScheDuler-Task, der jede Minute ausgeführt wird, füllt nur das error_log. Ein guter Wert ist 15 Minuten.)
  • Um einen Cronjob für TYPO3 einzurichten, besuche bitte https://docs.typo3.org/typo3cms/extensions/scheDuler/Installation/CronJob/Index.html

  • Lösche alle Caches und genieße das Ergebnis.
  • Feed-Caching durch den CommandController wird im System-Cache gespeichert. Das Löschen des System-Cache löscht auch die Beiträge. Stelle sicher, dass der ScheDuler-Task nach jedem Befehl zum Löschen des System-Cache erneut ausgeführt wird.

Wenn der folgende Fehler im PHP-Fehlerprotokoll erscheint: „Fehler: SSL-Zertifikatsproblem: Lokales Ausstellerzertifikat kann nicht abgerufen werden“, geschieht dies aufgrund einer veralteten Root-Zertifizierungsstellen-Datei (cacert.pem).

Links für weitere Details:

Füge eine gültige cacert.pem-Datei zum php-Stammverzeichnis hinzu und ergänze folgende Zeile in dieser Datei php.ini`curl.cainfo="PATH TO\php\cacert.pem.

Für eine „quick and dirty“ Lösung haben wir in die Erweiterungskonfiguration ein Kontrollkästchen integriert, das die SSL-Verifizierung für alle pb_social-Anfragen deaktiviert. ACHTUNG: Die Aktivierung dieses Kontrollkästchens kann ein mögliches Sicherheitsrisiko darstellen!

Testen des ScheDuler-Task

Zum Testen kann der einzelne Befehl: ./typo3/cli_dispatch.phpsh extbase pbsocial:updatefeeddata oder ./vendor/bin/typo3 pb_social:pbsocial:updatefeeddata über die Kommandozeile ausgeführt werden.

Bei Problemen: typo3temp/var/logs/typo3_pb_social_*.log oder Syslog (SYSTEM/Log im TYPO3 Backend) überprüfen. Stelle sicher, dass die `$GLOBALS[‚TYPO3_CONF_VARS‘][‚SYS‘][’systemLogLevel‘]` in LocalConfiguration.php auf 0 gesetzt wurde, um Probleme und Erfolge zu sehen. Nicht vergessen: systemLogLevel im Produktivmodus auf einen höheren Wert zurückzusetzen.

3. Hinweise für Social Media Netzwerke

Facebook

https://developers.facebook.com/apps pb_social verwendet Facebook SDK für PHP v5.0.0.0 – dieses passt zu Facebook Api v3.2 (nicht v3.3).

Du wirst eine so genannte „App-Review“ brauchen

  • Bitte registriere ein Konto unter developers.facebook.com und registriere die pb_social Erweiterung als App.
  • Stelle einen Antrag auf Zugriffsrechte unter dem Menüpunkt „App Review“.
  • Bitte wähle (E-Mail, Standard) Page Public Content Access („manage_pages“ genügt nicht, da das Facebook SDK für PHP kein aktives Zugriffstoken enthält).

Für das App Review Team benötigst Du ein TYPO3 Backend, um die Ausgabe zeigen zu können. Facebook benötigt dazu ebenso Zugriff auf die pb_social Plugin-Einstellungen. Bitte reiche eine TYPO3 Backend URL, einen Backend-User und das Passwort ein.

Du benötigst einen Screencast Deines Backends, der zeigt, wie Du auf form BE login klickst, um das Plugin auf der Registerkarte „facebook“ zu bearbeiten (stelle sicher, dass sie keine anderen Dinge in Deinem Backend tun können).

Gib folgenden Hinweis im Textfeld an:

Beispiel: Facebook-Search-ID get(‚/Typo3campBerlin/feed‘) oder get(‚/Typo3campBerlin/post‘) und die Reaktionen werden in regelmäßigen Abständen abgefragt. Diese Daten stammen nicht von unserer Seite, sondern werden mit der Such-ID von Facebook abgerufen.

Folgende Daten werden abgefragt: id,link,message,picture.

Der Typo3-Administrator installiert die TYPO3-Erweiterung pb_social, regisistriert diese Erweiterung als App in den Facebook Developer Tools (developers.facebook.com) und fügt die Facebook-Applikations-ID und das Facebook-App-Secret zu TYPO3 hinzu. Dann nennt er eine Facebook-Such-ID wie z.B. „Typo3campBerlin“ und wählt, ob die Beiträge oder Feeds geladen werden sollen. Auf der Startseite seiner Website werden die Artikel aus „Typo3campBerlin“ angezeigt: id,link,message,picture.

Eine Anmeldung bei Facebook findet nicht statt, es wird nur ein Access-Token generiert.

Diese Typo3-Erweiterung pb_social hat > 12.000 Downloads: https://extensions.typo3.org/extension/pb_social/

Anstatt eine Geschichte zu schreiben, kannst Du versuchen, einfach URL, BE-Benutzer und Passwort anzugeben.

Nach ein paar Tagen (2 Stunden war unser schnellster Versuch) werden dann die benötigen Rechte freigeschaltet.

Bitte setze nun den Status der Facebook-App unter (https://developers.facebook.com/apps) App Review auf „on“ in der oberen Menüzeile.

Kann ich meine eigene Facebook-Parameterliste verwenden?

Generell: Ja! Wir gehen bei diesen Anpassungen von einem fundierten Wissen über TYPO3 aus.

In den TypoScript-Contants kann `plugin.tx_pbsocial.settings.facebook.requestParameterList` konfiguriert werden. Du kannst einen Parameter hinzufügen, indem Du „addToList()“ im TypoScript Setup verwendest, z.B.: plugin.tx_pbsocial.settings.facebook.requestParameterList := addToList(status_type).

Wenn TypoScript-Appending für Dich nicht funktionieren, kopiere die Standardzeichenfolge und füge die Parameter nach dieser Zeichenfolge durch klare Kommatrennung an. (Aber `addToList()`oben ist der coolste Weg, es zu tun). picture,comments.summary(total_count).limit(0).as(comments),created_time,full_picture,reactions.summary(total_count).limit(0).as(reactions),reactions.type(NONE).summary(total_count).limit(0).as(none),reactions.type(LIKE).summary(total_count).limit(0).as(like),reactions.type(LOVE).summary(total_count).limit(0).as(love),reactions.type(WOW).summary(total_count).limit(0).as(wow),reactions.type(HAHA).summary(total_count).limit(0).as(haha),reactions.type(SAD).summary(total_count).limit(0).as(sad),reactions.type(ANGRY).summary(total_count).limit(0).as(angry),reactions.type(THANKFUL).summary(total_count).limit(0).as(thankful) Wenn Du „Kommentare“ und „Reaktionen“ verwenden möchtest, müssen diese unter https://developers.facebook.com/apps „App Review“ (siehe oben) „user_likes“ angefordert werden.

Wichtig: „id“, „link“ und „message“ sind in der Liste php-weitig immer vorangestellt (also nicht wiederholen) und daher nicht in der obigen TypoScript-Konstanten-Zeichenkette zu finden.

Eigenen Parameter gemäß https://developers.facebook.com/docs/workplace/integrations/custom-integrations/reference/ aufrufen.

Bitte denke daran, auch das Extension Fluid-Template Partials\Feed\Provider-facebook.html zu ändern! Dein Anfrageparameter wird nur angezeigt, wenn Du ihn dort unten notierst:

Zum Anzeigen von Werten immer voranstellen „feed.raw“: {feed.raw.my_facebook_parameter_i_desire} z.B. {feed.raw.status_type}.

Um eine Fluid-Template zu ändern, kopiere dieses bitte in einen eigenen Konfigurationsbereich, damit da nach einem Update nichts überschrieben wird: Lies dazu auch: Extrabase-Erweiterung erweitern.

Instagram

Instagram-Code: instagram.client.access_code Instagram-Code: Rufe den Code mit der folgenden URL ab (alle Zeichen nach „code“):

https://api.instagram.com/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=public_content

Instagram Access Token: instagram.client.access_token Rufe den Zugriffstoken mit der folgenden URL ab (alle Zeichen nach dem „Token“):

https://api.instagram.com/oauth/authorize/?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=token

Bemerkung: Es muss „Disable implicit OAuth“ bei Instagram aktiviert sein, um die Client-Webkonsole zu verwalten.

LinkedIn

https://www.linkedin.com/developer/apps

Access Token: linkedin.access_token

  • Rufe den Code und Token mit den folgenden URLs ab: Zugangscode (alle Zeichen nach „Code“): https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=rw_company_admin,r_basicprofile
  • Du musst zuerst die Bereiche „rw_company_admin“ und „r_basicprofile“ aktivieren (LinkedIn Developer Backend).
  • Bitte beachte, dass der Zugangscode nur ca. 20 Sekunden gültig ist. Unmittelbar nach der Generierung des Codes muss ein Zugriffstoken über https://www.linkedin.com/oauth/v2/accessToken?grant_type=authorization_code&code=GENERATED_CODE&redirect_uri=YOUR_REDIRECT_URI&client_id=YOUR_CLIENT_ID&client_secret=YUR_CLIENT_SECRET generiert werden.

Wie richte ich LinkedIn ein?

Um LinkedIn Firmenbeiträge anzuzeigen, musst Du ein Administrator des Firmenprofils auf Linkedin sein. Im Entwickler-Backend müssen die Berechtigungen „r_basicprofile“ und „rw_company_admin“ festlegt werden.

Nachdem die Berechtigungen eingerichtet sind, fahre mit folgenden Schritten 1 bis 3 dieses Handbuchs fort: https://developer.linkedin.com/docs/oauth2 (wie üblich kann die Redirect-URL eine beliebige URL sein, da du nur die angegebenen Codes benötigst). Es ist wichtig, den in Schritt 2 erhaltenen Autorisierungscode sehr schnell gegen ein Zugriffstoken auszutauschen, da diese Codes nach ca. 20 Sekunden ablaufen. Tools wie Postman können dafür nützlich sein, sind aber nicht notwendig.

Pinterest

https://developers.pinterest.com/apps/

  • auth-Code: pinterest.app.code https://api.pinterest.com/oauth/?response_type=code&redirect_uri=YOUR_REDIRECT_URI&client_id=YOUR_APP_ID&scope=read_public

  • alle Zeichen nach „Code“

twitter

Youtube

Vimeo

Tumblr

imgur

4. How To Migrate

4.1 Migration from `1.3.1` to `1.3.4`: Instagram access token

Instagram hat sein Zugriffstoken-Verfahren geändert. Anscheinend wird eine eingeloggte Browsersitzung benötigt, um das Zugriffstoken zu erhalten. Die automatische Generierung durch unseren Code wird also nicht mehr funktionieren. Um den Token zu erhalten, logge Dich bitte in Dein Instagram ein und lies die Informationen unter [instagram developer information](http://instagram.com/developer/clients/manage/).

Bitte beachte, für diese Zeit „Disable implicit OAuth:“ zu aktivieren (bitte nach erfolgreicher Durchführung deaktivieren).

Nachdem Du das Zugriffstoken erhalten hast, gib diese Zeichenkette in die Konfiguration der `pb_scoialen Erweiterung` im Tab `“Instagram“` / `“Instagram Zugriffstoken“` ein und klicke auf „Speichern“.

5. Bekannte Probleme

  • linkedIn verursacht einige Probleme, wenn eine „LinkedIn Firmen-ID“ nicht existiert oder `Stellenanzeigen anzeigen` und `Produktanzeigen anzeigen` in den Plugin-Einstellungen aktiviert ist.
    • Hinweis: Versucht in diesem Fall, sowohl „Stellenanzeigen anzeigen“ als auch „Produktanzeigen“ in den Plugin-Einstellungen zu deaktivieren, den Cache dieser Seite zu leeren und danach neu zu laden.
  • Bei lokalen Tests mit der pb_social Extension kann es zu kleineren Problemen kommen:
  • Facebook-Posts können aufgrund einer xampp-Fehlkonfiguration nicht geladen werden. Du hast hier zwei Möglichkeiten:
  • Aktualisiere die SSL-Zertifikate (.cert Dateien) oder deaktiviere die SSL-Verifizierung (gilt als unsichere Methode, da Du Deine Anmeldeinformationen unverschlüsselt sendest) – siehe FAQ für Details.
  • Private Facebook-Profilbeiträge werden möglicherweise nicht angezeigt.
  • Beiträge ohne Bild können das Platzhalterbild aufgrund eines Fehlers „Not allowed to load local resource“ nicht laden.
  • Abhängig von Deinem Instagram-Entwickler-App-Status ist es Dir möglicherweise nicht gestattet, Daten von anderen Benutzern zu erhalten. Weitere Informationen findest Duim Abschnitt FAQ.
  • Das Löschen des System-Cache wird auch alle Beiträge löschen, eine weiße Seite könnte entstehen, bis die Beiträge neu geladen werden.
  • Die ScheDuler-Task sollten aufgrund von API-Beschränkungen nur alle 10 bis15 Minuten ausgeführt werden.

6. FAQ

Wie kann ich mit Plus B in Kontakt treten, wenn ich Vorschläge habe oder ein Problem und Hilfe benötige?

Wo finde ich Fehlerprotokolle?

  • Bitte geh zum TYPO3 Backend und klicke im Admin Tool „System“ auf „Log“
  • Bitte schau unter (/typo3temp/log/) auf Deinem Webserver im Document-Root oder Projekt-Folder.

Du siehst nichts auf Deiner Seite?

  • Vielleicht verwendest Du einen Werbeblocker wie Adblock oder uBlock in Deinem Browser?

Deine Feeds werden nicht oft genug aktualisiert?

  • Gehe zu Deiner Plugin-Konfiguration und wirf einen Blick auf das Datenbankfeld „Allgemein“. Überprüfe die Eingabe bei `Feed Update Intervall (in Minuten)` (Minimum: 10 Minuten).
  • Gehe zu Deiner Datenbank und überprüfe das Datumsfeld der Tabelle `tx_pbsocial_domain_model_item`.

Deine Feeds sind nicht anklickbar?

  • Überprüfe, ob jQuery geladen ist und schau auf eventuelle JavaScript-Fehler.
  • Überprüfe, ob jQuery vielleicht zweimal geladen wird und schalte in diesem Fall das Laden von jQuery in pb_social aus: TypoScript Konstante `plugin.tx_pbsocial.settings.load-jquery = 0`
  • Wenn Du dafür allgemeine Hilfe brauchst: Konstanten für den Constant Editor deklarieren

Kann ich pb_social stoppen, jQuery einzubinden und es selbst einbinden?

  • TypoScript-Konstante konfigurieren `plugin.tx_pbsocial.settings.load-jquery = 0`

Gibt es eine Beschränkung auf die Anzahl der Kommentare / Likes, die in Beiträgen angezeigt werden?

  • Likes und Kommentare von Facebook-Posts sind auf 70 begrenzt. Beiträge mit mehr als 70 Likes/Kommentaren werden als 70+ gekennzeichnet.

Brauchen alle Social Media Netzwerke eine numerische Kanal-ID/Such-ID in meinen Plugin-Einstellungen?

  • Youtube- und Vimeo-Kanal-IDs müssen nicht unbedingt ein numerischer Wert sein.
  • Facebook-Such-IDs sind ein Name.
  • Instagram Search IDs sind ein numerischer Wert.
  • LinkedIn Firmen-IDssind ein numerischer Wert.

Wie viele Tags kann ich in den Tumblr Plugin-Einstellungen eingeben?

  • Tumblr-Posts können nur nach einem der ersten fünf Tags gefiltert werden, da nur die ersten 5 Ihrer Tags auf Tumblr durchsuchbar sind.

Was kann ich tun, wenn nichts oder nur Fragmente sichtbar sind?

  • Alle Caches löschen
  • Überprüfe, ob eine Art Adblock läuft.
  • TYPO3-System-Login im Backend überprüfen
  • Protokolldatei prüfen (/typo3temp/log/log/typo3.log)
  • Datenbanktabelle „tx_pbsocial_domain_model_item“…. überprüfe das Datumsfeld Deines Feeds.

Feeds, die nicht schnell genug aktualisiert werden?

  • Überprüfe Flexform auf der Registerkarte Allgemein. Ist die „Aktualisierungszeit in Minuten“ richtig eingestellt? (Minimalwert 10 min)
  • Überprüfe das Aktualisierungsintervall in Deinem ScheDuler-Task. Beide Werte arbeiten „zusammen“.

Seltsame PHP-Fehler?

  • Überprüfe, ob Curl auf Deinem Server aktiviert ist.

Dein Instagram-Feed sollte funktionieren, aber das Plugin kann den gesuchten Benutzer nicht finden?

  • Vielleicht betreibst Du Deine Instagram-App im Sandbox-MoDus. Das ist generell kein Problem, wenn Du die User, deren Inhalte angezeigt werden sollen, einladen kannst. Mehr zum Sandbox MoDus.

Der Instagram-Feed kann die Beiträge eines Benutzers nicht anzeigen?

  • Wenn sich Deine Instagram-App noch im Sandbox-MoDus befindet, musst Du eine Sandbox-Einladung an den Benutzer senden, von dem Du Beiträge erhalten möchtest. Die Richtlinie von Instagram hat sich in letzter Zeit geändert. Daher musst Du nun die Benutzer in Deine Sandbox einladen, um ihre Beiträge zu erhalten.

Meine Seite wird nicht umgeleitet! Was ist meine Redirect-URI?

  • Die Redirect-URI ist nur ein obligatorischer Wert, den Du angeben musst, um dich über OAuth authentifizieren zu können. Gib einfach die Basis-URL der Seite ein, auf der Du das Plugin für Deine XXX?? verwendest.