Social-Media-Feed ohne WordPress einbinden

In diesem Tutorial bindest du einen fertigen Feed ohne WordPress-Plugin in eine Website ein. Du brauchst lediglich eine Stelle, an der dein System eigenes HTML erlaubt.

Voraussetzungen#

• mindestens ein verbundenes Social-Media-Konto
• ein gespeicherter Feed mit sichtbaren Posts
• Zugriff auf einen HTML- oder Code-Baustein deiner Website
• die genaue Domain, unter der die Seite aufgerufen wird

1. Feed vorbereiten#

Öffne den Feed in Feedivo und prüfe die Live-Vorschau. Für einen kompakten Bereich auf der Startseite eignet sich zum Beispiel:

• Raster · Klassisch oder Masonry · Karten
• 3 oder 4 Spalten
• 9 bis 12 zuerst geladene Posts
• Lightbox als Klickverhalten

Speichere den Feed. Änderungen am Design kannst du später jederzeit vornehmen, ohne den Einbettungscode auszutauschen.

2. Widget-Verknüpfung anlegen#

1. Öffne Verknüpfungen → Web-Widget.
2. Vergib einen Namen, etwa „Website Startseite“.
3. Wähle den vorbereiteten Feed aus.
4. Trage die erlaubte Domain ein und speichere die Verknüpfung.

Domains werden ohne Protokoll und Pfad gespeichert:

www.example.de
example.de
staging.example.de

Die Freigabe arbeitet mit exakten Hosts. example.de deckt www.example.de oder andere Subdomains nicht automatisch ab. Trage deshalb jede verwendete Domain einzeln ein.

3. Einbettungscode kopieren#

Auf der Detailseite der Verknüpfung steht für jeden freigegebenen Feed ein fertiger Code:

<div class="feedivo-widget"
     data-feedivo-widget="DEINE-WIDGET-ID"
     data-feedivo-feed="DEINE-FEED-UUID"></div>
<script src="https://feedivo.de/assets/js/widget.js" async></script>

Übernimm den erzeugten Einbettungscode unverändert und ergänze keine weiteren Kennungen oder Zugangsdaten.

4. Code in die Website einsetzen#

Füge den vollständigen Code in einen HTML-, Embed- oder Code-Baustein ein. Typische Bezeichnungen in Website-Systemen sind:

• „Benutzerdefiniertes HTML“
• „Embed Code“
• „Code einfügen“
• „HTML-Element“

Verwendest du mehrere Feeds auf derselben Seite, braucht jeder Feed sein eigenes <div>. Das <script> setzt du trotzdem nur einmal ein.

5. Veröffentlichung prüfen#

Öffne die veröffentlichte Seite in einem privaten Browserfenster und teste:

• Sind Posts sichtbar?
• Öffnet eine Kachel die eingestellte Lightbox oder den Original-Post?
• Funktioniert „Mehr laden“?
• Passt die Darstellung auf einem schmalen Bildschirm?

Das Widget übernimmt automatisch die aktuelle Darstellung des Feeds.

Wenn der Feed leer bleibt#

1. Öffne den Zugriffs-Verlauf der Widget-Verknüpfung.
2. Prüfe, ob dort die Domain abgelehnt wurde.
3. Ergänze bei Bedarf www, Subdomain oder Staging-Adresse einzeln.
4. Kontrolliere Widget-ID und Feed-UUID im Code.
5. Prüfe, ob die Verknüpfung oder der Feed durch den Tarif pausiert ist.

Bei einer Content-Security-Policy benötigt die Seite Freigaben für Skripte, Styles, Bilder und Verbindungen zu feedivo.de. Die vollständige Konfiguration steht unter Feed mit dem Web-Widget einbinden.