So erstellst du ein Twitter (X) Widget für deine Website: Eine Schritt-für-Schritt-Anleitung
Hier ist ein detailliertes Tutorial, wie du ein Twitter (X) Widget in deine Website einbindest.
Ein Twitter-Widget (jetzt offiziell "X") ist eine hervorragende Möglichkeit, deine neuesten Tweets direkt auf deiner Website anzuzeigen, das Engagement zu steigern und deine Social-Media-Präsenz zu stärken.
Schritt 1: Wähle die Quelle aus
Bevor du startest, kopiere die URL des Twitter-Profils, der Liste oder des Hashtags, den du anzeigen möchtest.
- Beispiel für ein Profil:
https://twitter.com/DEIN_NUTZERNAME
Schritt 2: Besuche das offizielle Tool "X Publish"
Twitter stellt ein eigenes Tool zur Verfügung, um den Code für das Widget zu generieren.
- Gehe auf die Website publish.twitter.com.
- Füge die URL deines Profils in das Textfeld in der Mitte ein und drücke die Eingabetaste.
Schritt 3: Wähle die Anzeige-Option
Du hast nun meist zwei Optionen zur Auswahl:
- Embedded Timeline: Zeigt deine neuesten Tweets in einer Liste an (das klassische Widget).
- Twitter Buttons: Zeigt nur einen "Folgen"- oder "Erwähnen"-Button an.
Wähle für ein News-Feed-Widget die Option "Embedded Timeline".
Schritt 4: Das Widget anpassen (Customization)
Bevor du den Code kopierst, solltest du das Design an deine Website anpassen:
- Klicke auf den Link "set customization options".
- Hier kannst du folgende Einstellungen vornehmen:
- Height (Höhe): Gib einen Wert in Pixeln an (z. B. 600px), damit das Widget nicht unendlich lang wird.
- Width (Breite): Meistens passt sich das Widget automatisch an (Responsive), du kannst aber eine feste Breite eingeben.
- Theme: Wähle zwischen "Light" (hell) oder "Dark" (dunkel).
- Language: Wähle "German" oder lass es auf "Automatic".
Klicke nach den Einstellungen auf "Update".
Schritt 5: Code kopieren
Nachdem du die Einstellungen vorgenommen hast, generiert das Tool einen HTML-Code (beginnend mit <a class="twitter-timeline"...).
- Klicke auf den Button "Copy Code".
Schritt 6: Code in deine Website einbauen
Jetzt musst du den Code in den Quelltext deiner Website einfügen.
In WordPress:
- Gehe in dein Dashboard zu Design > Widgets.
- Füge ein neues Widget vom Typ "Individuelles HTML" in deine Sidebar oder den Footer ein.
- Füge den kopierten Code in das Textfeld ein und klicke auf Speichern.
- (Alternativ: Im Gutenberg-Editor den Block "Individuelles HTML" nutzen).
In einer statischen HTML-Seite:
- Öffne deine
.html-Datei in einem Editor. - Füge den Code an der Stelle ein, an der der Feed erscheinen soll (z. B. innerhalb eines
<aside>oder<div>Tags).
Wichtiger Hinweis zu Datenschutz (DSGVO)
Da das Widget Daten direkt von den Servern von X lädt, werden dabei auch IP-Adressen deiner Besucher an X übertragen. Um in Deutschland/EU rechtssicher zu sein, solltest du:
- Die Einbindung in deiner Datenschutzerklärung erwähnen.
- Idealerweise eine "Zwei-Klick-Lösung" oder ein Consent-Tool (wie Borlabs Cookie oder Cookiebot) verwenden, damit das Widget erst geladen wird, wenn der Nutzer zustimmt.
Zusammenfassung der Vorteile:
- Aktualität: Deine Website wirkt durch aktuelle Tweets lebendig.
- Vertrauen: Besucher sehen, dass du aktiv kommunizierst (Social Proof).
- Follower-Wachstum: Besucher können dir direkt von der Website aus folgen.