PORTAL und PPS Knowledge Base

Social-Media-Embeds

Owned by Franziska Franz
Last updated: 2024-10-25 by Ilker Oygün
8 min read

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:

Instagram einbetten

Abruf URL im Desktop
Abruf URL Mobil
Platzhalter im Formular

 

Beispiele URLs

Beispiel BB-Code:

Tumblr einbetten

Abruf URL im Desktop
Abruf URL Mobil

 

Platzhalter im Formular

 

Beispiele URLs

Beispiel BB-Code:

TikTok einbetten

Abruf URL im Desktop

 

Abruf URL App

 

Platzhalter im Formular

 

Beispiel URL:

Beispiel BBC-Code:

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

Name des Dienstes

Dienstleister

Aufgerufene Domains

Technische Form der Einbindung

Zwecke der Einbindung

Datenschutzerklärung des Dienstes

Facebook

Facebook Inc.

facebook.com

oEmbed

Einbindung zur Darstellung von Facebook-Posts auf dem PORTAL.

https://www.facebook.com/policy.php

Twitter

Twitter Inc.

twitter.com

oEmbed

Einbindung zur Darstellung von Tweets auf dem PORTAL.

https://twitter.com/de/privacy

Instagram

Facebook Inc.

instagram.com
instagr.am

oEmbed

Einbindung zur Darstellung von Instagram-Posts auf dem PORTAL.

https://help.instagram.com/155833707900388

Tumblr

Tumblr Inc.

tumblr.com

oEmbed

Einbindung zur Darstellung von Tumblr-Posts auf dem PORTAL.

https://www.tumblr.com/privacy/de

TikTok

TikTok Pte. Ltd.

tiktok.com

oEmbed

Einbindung zur Darstellung von TikTok-Videos auf dem PORTAL.

Privacy Policy | TikTok

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

Name des Dienstes

URLs und HTTP-Zugriffsmethode

Zweck, für den die URL aufgerufen wird

Aktiv übermittelte Parameter durch PEIQ

Facebook

API endpoint: 

  • GET /oembed_post HTTP/1.1

  • GET /oembed_page HTTP/1.1

  • GET /oembed_video HTTP/1.1

  • Host: graph.facebook.com 

Weitere Endpunkte und URL-Schemata unter: https://developers.facebook.com/docs/plugins/oembed#url-formats

Darstellung von Facebook-Posts auf dem PORTAL.

-

Twitter

  • URL scheme: https://twitter.com/*/status/*

  • URL scheme: https://*.twitter.com/*/status/*

  • URL scheme: https://twitter.com/*/moments/*

  • URL scheme: https://*.twitter.com/*/moments/*

  • API endpoint: https://publish.twitter.com/oembed

Darstellung von Tweets auf dem PORTAL.

-

Instagram

API endpoint: 

  • GET /instagram_oembed HTTP/1.1

  • Host: graph.facebook.com 

Weitere Endpunkte und URL-Schemata unter: https://developers.facebook.com/docs/instagram/oembed

Darstellung von Instagram-Posts auf dem PORTAL.

-

Tumblr

  • URL scheme: https://*.tumblr.com/post/*

  • API endpoint: https://www.tumblr.com/oembed

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

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

  2. 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:

  1. Klicken Sie auf Produkte + und fügen Sie das Produkt oEmbed hinzu:

     

     

     

  2. Gehen Sie nun auf Einstellungen > Erweitert > Sicherheit und kopieren Sie das Client-Token (ggf. müssen Sie dieses erst generieren):

     

  3. Ü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.

Schritt 3: Schalten Sie die App in den Live-Betrieb

  1. Klicken Sie oben in der Leiste das Toggle neben “In Entwicklung an”:

     

  2. 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).

  3. 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:

Vorgehen der App Review

Mit dem folgenden Verfahren haben Kund:innen in der Vergangenheit die App Review bestanden:

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

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

 

Nur für PEIQ-Mitarbeiter:innen
https://peiq.atlassian.net/wiki/x/AQBdD

 

Impressum