Twitter-Feed in HTML einbetten: Schritt-für-Schritt-Anleitung 2026

Wenn Sie einen Twitter-Feed in HTML einbetten möchten, ist die offizielle Methode einfach: Code kopieren, in Ihre HTML-Seite einfügen, fertig. Aber das ist nur die halbe Geschichte.

Die meisten Websites benötigen ein responsives und aktualisiertes Twitter-Widget, das gebrantet, schnell zu laden und kontrollierbar ist. Deshalb müssen wir besser vorgehen als nur das Snippet zu kopieren.

Hier zeige ich Ihnen die genaue HTML-Methode zum Einbetten eines Twitter-Feeds, erläutere die echten Grenzen und führe Sie dann durch einen skalierbaren Weg mit EmbedSocial.

Zunächst befassen wir uns mit dem nativen Ansatz.

Der offizielle Weg, um einen Twitter-Feed in HTML einzubetten

Twitter (X) stellt ein Web-Tool namens Twitter Publish bereit, das Embed-Code für Posts, Profile, Hashtags und Timelines generiert. So funktioniert es:

1. Gehen Sie zu publish.twitter.com
2. Fügen Sie die URL Ihres Twitter-Profils ein
3. Wählen Sie “Embedded Timeline”
4. Kopieren Sie das generierte HTML-Snippet

1. Rufen Sie die Twitter-Publish-Website auf

Öffnen Sie https://publish.twitter.com in Ihrem Browser. Dies ist Twitters offizielles Tool zum Generieren von Embed-Code, ohne dass API-Schlüssel oder Entwicklersetup erforderlich ist:

2. Fügen Sie Ihre Twitter-Profil-URL ein

Kopieren Sie Ihre öffentliche Twitter-URL (z. B. https://twitter.com/yourusername) und fügen Sie sie in das Eingabefeld ein. Stellen Sie sicher, dass das Konto öffentlich ist, sonst wird der Feed nicht generiert:

3. Wählen Sie “Embedded Timeline”

Wählen Sie “Embedded Timeline”, um einen aktiven, automatisch aktualisierenden Twitter-Timeline-Feed zu erstellen. Diese Option stellt sicher, dass neue Posts automatisch auf Ihrer Website angezeigt werden:

4. Kopieren Sie das generierte HTML-Snippet

Klicken Sie auf “Copy Code” und fügen Sie den bereitgestellten HTML-Code dort in den Ihrer Seite ein, wo der Feed angezeigt werden soll. Das enthaltene Script rendert die Timeline automatisch:

Der Code sieht etwa so aus:

<a class="twitter-timeline" href="https://twitter.com/yourusername">
Tweets by yourusername
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Hinweis: Sie können nur öffentliche Twitter-Inhalte mit der obigen Methode einbetten. Posts aus geschützten Konten sind daher mit dieser Methode nicht kompatibel.

Einen einzelnen Tweet einbetten versus eine vollständige Twitter-Timeline

Es gibt einen großen Unterschied zwischen dem Einbetten eines Tweets und dem Einbetten eines Live-Feeds.

Wenn Sie einen einzelnen Tweet einbetten, fügen Sie eine statische Referenz hinzu. Dies funktioniert gut in Blog-Posts, Fallstudien oder Produktankündigungen, bei denen der Kontext wichtig ist.

Andererseits: Wenn Sie eine vollständige Twitter-Timeline einbetten, erstellen Sie einen dynamischen Abschnitt Ihrer Website, der sich automatisch aktualisiert, sobald Sie posten.

Für die meisten Unternehmen ist eine vollständige Timeline leistungsstarker, da sie die Seite aktuell hält, ohne manuelle Updates zu erfordern. Aber es führt auch zu mehr Design- und Leistungsüberlegungen.

So betten Sie einen Twitter-Feed auf einer Website mit Raw HTML ein

Der Kern-Embed-Code ändert sich nicht zwischen Plattformen. Was sich ändert, ist die Behandlung von Scripts durch Ihr CMS. Auf einer statischen HTML-Website fügen Sie den Code einfach in Ihre Seitendatei ein:

• Auf WordPress verwenden Sie einen “Custom HTML”-Block.
• Auf Webflow fügen Sie ein Embed-Element hinzu.
• Auf Shopify fügen Sie es in einen benutzerdefinierten Bereich oder eine Theme-Datei ein.

An einer Stelle, an der Entwickler oft feststecken (etwas, das ich wiederholt in Entwickler-Foren sehe), ist das Script-Stripping. Einige Builder entfernen