So erstellst du ein Twitter (X) Widget für deine Website: Eine Schritt-für-Schritt-Anleitung

Melden

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.

  1. Gehe auf die Website publish.twitter.com.
  2. 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:

  1. Embedded Timeline: Zeigt deine neuesten Tweets in einer Liste an (das klassische Widget).
  2. 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:

  1. Klicke auf den Link "set customization options".
  2. 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:

  1. Gehe in dein Dashboard zu Design > Widgets.
  2. Füge ein neues Widget vom Typ "Individuelles HTML" in deine Sidebar oder den Footer ein.
  3. Füge den kopierten Code in das Textfeld ein und klicke auf Speichern.
  4. (Alternativ: Im Gutenberg-Editor den Block "Individuelles HTML" nutzen).

In einer statischen HTML-Seite:

  1. Öffne deine .html-Datei in einem Editor.
  2. 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:

  1. Die Einbindung in deiner Datenschutzerklärung erwähnen.
  2. 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.
0