Feed mit dem Web-Widget einbinden

Mit dem Web-Widget bindest du einen Feed auf nahezu jeder Website ein – auch in Baukästen, Shop-Systemen und statischen HTML-Seiten. Eine zusätzliche Bibliothek oder jQuery ist nicht erforderlich.

Für die verbreiteten Systeme gibt es eine Anleitung mit den passenden Schritten: Webflow, Shopify, Squarespace, Joomla und Drupal. Für TYPO3 gibt es eine eigene Extension; das Widget bleibt dort der Weg ohne Extension.

Einrichten#

1. Verknüpfung anlegen unter Verknüpfungen → Web-Widget.
2. Unter Erlaubte Domains jede Domain in eine eigene Zeile eintragen, ohne https://.
3. Den Einbettungscode kopieren und auf der Seite einsetzen, auf der der Feed stehen soll.

<div class="feedivo-widget"
     data-feedivo-widget="deine-verknuepfungs-id"
     data-feedivo-feed="deine-feed-uuid"></div>
<script src="https://feedivo.de/assets/js/widget.js" async></script>

Das <script> brauchst du nur einmal pro Seite, auch wenn du mehrere Feeds einbindest. Für jeden Feed setzt du ein eigenes <div> ein.

Die Domain-Freigabe#

Praktische Hinweise:

• Trage jede tatsächlich verwendete Domain ein: bei Bedarf mit und ohne www sowie Test- und Staging-Adressen.
• Für lokale Entwicklung gehört localhost in die Liste.

Bleibt der Feed leer, prüfe zuerst die Schreibweise der freigegebenen Domain. Veröffentliche ausschließlich den Einbettungscode, den Feedivo für das Widget bereitstellt.

Content-Security-Policy ergänzen#

Verwendet deine Website eine strenge Content-Security-Policy (CSP), erlaube Feedivo in den passenden Direktiven:

script-src  https://feedivo.de
style-src   https://feedivo.de
img-src     https://feedivo.de data:
connect-src https://feedivo.de
frame-src   https://www.youtube-nocookie.com

frame-src ist nur nötig, wenn der Feed YouTube-Videos enthält.

Aussehen und Verhalten#

Stil und Klickverhalten kommen direkt aus dem Feed. Änderungen wirken beim nächsten Seitenaufruf, weil das Widget die aktuelle Fassung von Feedivo lädt.

Ist ein Feed durch den Tarif pausiert, zeigt das Widget einen kurzen Hinweis statt einer unerklärlich leeren Fläche. Weitere Ursachen findest du unter Probleme mit einem Feed beheben.