Social-Media-Posts von Facebook, Twitter, Instagram, Tumblr und TikTok können über den entsprechenden Button im Editor bequem eingebunden werden. Die Einbindung erfolgt über eine Eingabemaske. Nach dem Speichern wird ein BBCode-Snippet eingefügt, welches beim Ausspielen durch ein entsprechendes <div> ersetzt wird.
Für die vollumfängliche Nutzung von Facebook- und Instagram-Einbettungen muss kundenseitig eine konfigurierte Facebook-App (App-ID und Client-Token) mit hinzugefügtem Produkt oEmbed angeliefert werden. Details siehe in der Anleitung zum Set-up.
Für die Social-Media-Embeds greift die Datenschutz-Funktion für eingebettete Drittinhalte.
Funktionalitäten der Social-Media-Embeds
Integration externer Social-Media-Posts direkt im PORTAL
Bequemes Einbetten externer Social-Media-Posts über den Editor
Datenschutz-Funktion: Zustimmungspflichtiges Ausspielen von Einbettungen externer Social-Media-Posts
Inhaltsverzeichnis
Einbindung externer Social-Media-Posts
Editorleiste: Button zur Einbindung externer Social-Media-Posts
Benutzer:innen haben über die Editor-Funktion die Möglichkeit, Social-Media-Posts von Facebook, Twitter, Instagram, Tumblr und TikTok bequem einzubinden. Die Einbindung erfolgt jeweils über eine Eingabemaske. Nach dem Speichern wird ein BBCode-Snippet eingefügt, welches beim Ausspielen durch ein entsprechendes <div> ersetzt wird.
Für die Social-Media-Embeds greift die Datenschutz-Funktion für eingebettete Drittinhalte.
Unterstützte Plattformen
Facebook
Twitter
Instagram
Tumblr
TikTok
Beispiele eingebetteter Social-Media-Posts im PORTAL
Social-Media-Posts einbetten
Zum Einbetten der Social-Media-Posts klickt der bzw. die Benutzer:in auf den entsprechenden Button und gibt die URL (nicht den Einbettcode!) des entsprechenden Social-Media-Posts ein.
Eingabemaske zum Einbetten von Social-Media-Posts
Daraufhin erscheint ein entsprechender Platzhalter im Formular. Der BBCode für Social-Media-Posts lautet [facebook][/facebook], [twitter][/twitter], [instagram][/instagram], [tumblr][/tumblr],[tiktok][/tiktok].
Da die URLs unterschiedlich aufgerufen werden müssen, werden im Folgenden die Eingaben der jeweiligen Social-Media-Plattformen etwas detaillierter beschrieben:
Facebook einbetten
Abruf URL im Desktop
Die URL kann einfach über den Link-Anker auf dem Datum des Posts abgerufen werden. Alternativ kann im Kontextmenü auf “Einbetten” geklickt werden. Benutzer:innen werden dann auf die Seite weitergeleitet, von welcher die URL kopiert werden kann.
Abruf URL Mobil
Die URL kann einfach über den Link-Anker auf dem Datum des Posts abgerufen werden.
Platzhalter im Formular
Beispiele URLs
https://www.facebook.com/gogolpublishing/posts/3036632306388036 https://www.facebook.com/gogolpublishing/posts/3036632306388036?__cft__[0]=AZVDj8KEmCWCoiZC8F2gbYORUMQ31f8rlu42qLT8HnBZqy6-IPgYAWHdpNSDhap6lx8dFhd7N_rCRMRxoXcaDsi2K8YqkThzJ9TFCqUQeEDFP5N_yc8YMkcZgBoXpoGyIEZhhuWSOigxkPP-88v5qvcVmHJocmUvVBR8vgDwpODgGQ&__tn__=%2CO%2CP-R https://m.facebook.com/story.php?story_fbid=2952265694824698&id=131147120269917&__tn__=-R
Beispiel BB-Code:
[facebook]https://m.facebook.com/story.php?story_fbid=2952265694824698&id=131147120269917&__tn__=-R[/facebook]
Twitter einbetten
Abruf URL im Desktop
Abruf URL Mobil
Platzhalter im Formular
Beispiele URLs
https://twitter.com/gogolmedien/status/791564616904142848 https://twitter.com/gogolmedien/status/791564616904142848?s=20
Beispiel BB-Code:
[twitter]https://twitter.com/gogolmedien/status/791564616904142848[/twitter]
Instagram einbetten
Abruf URL im Desktop
Abruf URL Mobil
Platzhalter im Formular
Beispiele URLs
https://www.instagram.com/p/CCNzyooKlWs/ https://www.instagram.com/p/CCNzyooKlWs/?utm_source=ig_web_copy_link https://www.instagram.com/p/CCNzyooKlWs/?utm_source=ig_web_button_share_sheet
Beispiel BB-Code:
[instagram]https://www.instagram.com/p/CCNzyooKlWs/[/instagram]
Tumblr einbetten
Abruf URL im Desktop
Abruf URL Mobil
Platzhalter im Formular
Beispiele URLs
https://spidey11fan11.tumblr.com/post/174413939039
Beispiel BB-Code:
[tumblr]https://spidey11fan11.tumblr.com/post/174413939039[/tumblr]
TikTok einbetten
Abruf URL im Desktop
Abruf URL App
Platzhalter im Formular
Beispiel URL:
https://www.tiktok.com/@katzentrainer/video/7037921430926904582?is_copy_url=1&is_from_webapp=v1
Beispiel BBC-Code:
[tiktok]https://www.tiktok.com/@katzentrainer/video/7037921430926904582?is_copy_url=1&is_from_webapp=v1[/tiktok]
Datenschutz-Funktion
Für die Social-Media-Embeds greift die Datenschutz-Funktion für eingebettete Drittinhalte.
Informationen zu eingebundenen Drittanbietern & Cookies
Die unten stehenden Informationen beziehen sich auf Verarbeitungstätigkeiten, die seitens PEIQ durchgeführt werden. Es können keine Aussagen zu den konkreten Verarbeitungstätigkeiten aufseiten der eingebundenen Drittanbietern getätigt werden.
Eingebundene Dienste von Drittanbietern
Name des Dienstes | Dienstleister | Aufgerufene Domains | Technische Form der Einbindung | Zwecke der Einbindung | Datenschutzerklärung des Dienstes |
|---|---|---|---|---|---|
Facebook Inc. | Einbindung zur Darstellung von Facebook-Posts auf dem PORTAL. | ||||
Twitter Inc. | Einbindung zur Darstellung von Tweets auf dem PORTAL. | ||||
Facebook Inc. | Einbindung zur Darstellung von Instagram-Posts auf dem PORTAL. | ||||
Tumblr | Tumblr Inc. | Einbindung zur Darstellung von Tumblr-Posts auf dem PORTAL. | |||
TikTok | TikTok Pte. Ltd. | Einbindung zur Darstellung von TikTok-Videos auf dem PORTAL. |
Kommunikation der Website mit anderen URLs
Name des Dienstes | URLs und HTTP-Zugriffsmethode | Zweck, für den die URL aufgerufen wird | Aktiv übermittelte Parameter durch PEIQ |
|---|---|---|---|
API endpoint:
Weitere Endpunkte und URL-Schemata unter: https://developers.facebook.com/docs/plugins/oembed#url-formats | Darstellung von Facebook-Posts auf dem PORTAL. | - | |
| Darstellung von Tweets auf dem PORTAL. | - | |
API endpoint:
Weitere Endpunkte und URL-Schemata unter: https://developers.facebook.com/docs/instagram/oembed | Darstellung von Instagram-Posts auf dem PORTAL. | - | |
Tumblr |
| Darstellung von Tumblr-Posts auf dem PORTAL. | - |
TikTok | API endpoint:
| Darstellung von TikTok-Videos auf dem PORTAL. | - |
Speicherung von Informationen auf dem Endgerät der Benutzer:innen, z. B. Cookies
PEIQ kann zu Third-Party-Cookies oder ähnlichen Verfahren von Drittanbietern keine Aussage treffen. Informationen zum Cookie ggm_sme_agreed finden sich hier.
Anleitung zum Set-up
Facebook hat die zugrunde liegende Logik für oEmbed-Endpunkte für Facebook und Instagram zum 24. Oktober 2020 aus “Sicherheitsgründen” grundlegend angepasst. Mittlerweile können Facebook- und Instagram-Posts nur von authentifizierten Plattformen über oEmbed eingebunden werden.
Konkret bedeutet das, dass Sie für die vollumfängliche Nutzung unserer Social-Media-Embeds für Facebook und Instagram eine Facebook-App konfigurieren und uns die App-ID und Client-Token (Zugriffschlüssel) anliefern müssen.
Welche Daten benötigt PEIQ für die Aktivierung der Social-Media-Embed-Funktion für Facebook und Instagram?
Zum Aktivieren der Social-Media-Embed-Funktion für Facebook und Instagram benötigen wir folgende Daten: Die App ID und das Client-Token (Zugriffschlüssel) Ihrer konfigurierten Facebook-App.
Schritt 1: Einrichtung der Facebook-App
Um eine Facebook-App einzurichten benötigen Sie einen Facebook-Account, welchen Sie einfach durch Registrierung unter www.facebook.de erhalten können. Zum Anlegen einer Facebook-App müssen Sie die Developer-Seite von Facebook ansteuern und sich dort als Entwickler registrieren. Danach können Sie Ihre erste App (Typ: Konsument/Verbraucher) erstellen.
Nehmen Sie nun die Allgemeinen Einstellungen (
Einstellungen>Allgemein) der Facebook-App vor.
Weitere Hilfestellungen finden Sie auf der offiziellen Seite von Facebook: https://developers.facebook.com/docs/apps#register
Schritt 2: oEmbed zur App hinzufügen
Nachdem Sie die Allgemeinen Einstellungen der Facebook-App vorgenommen haben, nehmen Sie folgende Schritte vor:
Klicken Sie auf
Produkte +und fügen Sie das Produkt oEmbed hinzu:
Gehen Sie nun auf
Einstellungen>Erweitert> Sicherheit und kopieren Sie das Client-Token (ggf. müssen Sie dieses erst generieren):
Übergeben Sie die App-ID (wird oben in der Leiste immer angezeigt) sowie das Client-Token an PEIQ. Die Daten werden dann in Ihrer PORTAL-Konfiguration hinterlegt.
Sobald Sie das Client-Token zurücksetzen, wird ein neuer Schlüssel generiert. Der in Ihrem PORTAL hinterlegte Schlüssel wird damit ungültig. Falls Sie die Social-Media-Embeds für Facebook und Instagram weiterhin vollumfänglich nutzen möchten, müssen Sie das neue Client-Token an PEIQ übergeben. Mit dem nächsten Release sind die neuen Daten dann hinterlegt.
Schritt 3: Schalten Sie die App in den Live-Betrieb
Damit die Facebook-Embeds vollumfänglich funktionieren, muss sich die App zwingend im Live-Betrieb befinden.
Klicken Sie oben in der Leiste das Toggle neben “In Entwicklung an”:
Falls notwendige Angaben fehlen, werden Sie gebeten, diese noch zu ergänzen. Achten Sie darauf, dass Sie alle notwendigen URLs (insbesondere Datenschutzerklärung, AGB und Löschung der Userdaten) angegeben und eine Kategorie haben (siehe häufige Fehlermeldungen).
Ihre App ist nun live.
Typische Fehlermeldungen:
Schritt 4: App Review
Kund:innen müssen die App Review für das oEmbed Read Feature abschließen. Ansonsten können eingebettete Facebook- und Instagram-Posts nicht mehr geladen werden.
Weitere Informationen & Tipps finden sich bei Facebook:
https://developers.facebook.com/docs/app-review/support/rejection-guides/app-verification
https://developers.facebook.com/docs/facebook-login/permissions/
Vorgehen der App Review
Mit dem folgenden Verfahren haben Kund:innen in der Vergangenheit die App Review bestanden:
Zugriff beantragen: Die App Review wurde bei “Facebook Developer” gestartet. Dort muss der Zugriff zu “Oembed Read” beantragt werden. Sollte der Zugriff bereits erlaubt sein, ist dies entsprechend gekennzeichnet. Anderenfalls kann direkt an der Stelle über ein Feld der Zugriff beantragt werden.
App-Verifizierung abschließen: Englische Erklärung an Facebook, dass der Zugang benötigt wird, um z. B. Instagram und Facebook in redaktionelle Beiträge einbetten zu können. Damit sich Facebook das genauer ansehen kann, wurde für die App Review ein Test-Account angelegt, der entsprechende Rechte besitzt und nur (eigene) Artikel erstellen, aber nicht veröffentlichen kann. Es wurde auch bereits ein Test-Artikel angelegt, der Embeds enthält. Sofern von Facebook gebraucht, können sie sich somit auf der Seite einloggen und das Vorgehen mit Embed überprüfen. Dies erfolgte mit einer Schritt-für-Schritt-Erklärung für die Facebook-Entwickler:innen (auf Englisch).
Schritt 1: Öffnen der Seite {URL zum Portal}/login und Eingabe der E-Mail-Adresse und des Passworts des Test-Accounts.
Schritt 2: Klick auf das Profil im rechten Eck, das den Namen “Test User” besitzt.
Schritt 3: Im ausklappbaren Menü auf “Meine Beitragsentwürfe” klicken, der dritten Option von “Meine Beiträge”.
Schritt 4: Automatische Weiterleitung zu den Entwürfen und Auswahl des Test-Artikels (Angabe des exakten Namens).
Schritt 5: Exakter Link zum Entwurf des Test-Artikels, welcher nach dem Login-Prozess erreichbar ist.
Schritt 6: Klick auf das Kontext-Menü und Auswahl von “Beitrag bearbeiten”.
Schritt 7: Im “Beitrag erstellen”-Modus können nun bereits eingebettete Social-Media-Inhalte eingesehen oder neue hinzugefügt werden.
Schritt 8: Anleitung, wie man Social-Media-Inhalte hinzufügen kann (Button “Social-Media-Link einfügen”).
Schritt 9: Zum Ende der Seite scrollen und auf “Als Entwurf speichern” klicken.
Schritt 10: Weiterleitung zum fertigen Artikel, in dem der eingebettete Inhalt sichtbar ist.
Schritt 11: Zusätzliche Mitlieferung eines bereits veröffentlichten Inhalts mit einem Social-Media-Embed, der zeigt, dass dieser aufgrund der fehlenden Berechtigung von Facebook nicht korrekt angezeigt wird und nur ein Platzhalter vorhanden ist.
3. Angefragte Berechtigungen und Features: (Englische) Erläuterung, dass Social Embeds für die redaktionell erstellten Inhalte benötigt werden, um einerseits den Leser:innen einen Mehrwert zu bieten und den Artikel aufzuwerten und die Embeds andererseits häufig auch als Quelle für den Artikel dienen und damit direkt mit ihm in Verbindung gebracht werden.
Mitsenden eines zugänglichen Instagram- oder Facebook-Posts, der u.a. in den Test-Artikel von den Facebook-Entwickler:innen eingebettet werden kann.
4. App-Einstellungen vornehmen: Offene Felder gemäß der Anleitung ausfüllen und sicherstellen, dass alle Angaben aktuell sind.
Was passiert, wenn keine konfigurierte Facebook-App (App-ID und Client-Token) angeliefert wird?
In diesem Fall können die Social-Media-Embeds für Facebook und Instagram nicht vollumfänglich genutzt werden. Kund:innen, die keinen Zugriffschlüssel anliefern, erhalten einen datenschutzkonformen Fallback, der jedoch nur gewährleistet, dass der bzw. die Benutzer:in einen Link zum entsprechenden Post angezeigt bekommt.
Verwandte Seiten
Disclaimer
Für die vorliegende Systemübersicht/Publikation behalten wir uns alle Rechte vor. Nachdruck, Vervielfältigung und Verbreitung (auch auszugsweise) ist nur mit schriftlicher Genehmigung der PEIQ Publishing GmbH & Co. KG erlaubt. Wir behalten uns vor, die Systemübersicht/Publikation jederzeit ohne vorherige Ankündigung zu ändern und/oder zu erweitern. Die vorliegenden Angaben dienen lediglich Informationszwecken. Die PEIQ Publishing GmbH & Co. KG übernimmt keinerlei Haftung und/oder Garantie für Fehler und/oder unvollständige Angaben in der Systemübersicht/Publikation, mit Ausnahme von vorsätzlich falschen oder arglistig verschwiegenen Angaben. Da unsere Software laufend weiter entwickelt wird, handelt es sich bei den vorliegenden nur um allgemeine Angaben. Es handelt sich weder um eine Zusicherung von Mindestvertragsinhalten, noch um Beschaffenheitsgarantien im Sinne des § 443 BGB.