So bettet ihr responsive X-Widgets (Twitter) in eure Website ein

Du hast den Einbettungscode von X (Twitter) auf deiner Website eingefügt. Auf dem Desktop sieht es toll aus. Dann schaust du auf dein Handy.

Jetzt ist alles ein Chaos. Der Feed läuft über den Bildschirm hinaus oder passt nur in einen schmalen 500px-Rahmen, um den herum überall Leerraum ist. Also versuchst du es mit einer schnellen CSS-Korrektur. Das funktioniert einen Tag lang, dann geht es wieder schief.

Wenn Ihnen das bekannt vorkommt, sind Sie nicht allein. Das ist eines der häufigsten Probleme bei X (Twitter)-Einbettungen (jetzt X (Twitter)), und die meisten der im Internet angebotenen „Lösungen“ sind unsichere Hacks aus dem Jahr 2012, die schon seit Jahren nicht mehr funktionieren.

Ich habe die Entwicklerforen durchforstet, die CSS-Workarounds getestet und herausgefunden, warum sie immer wieder fehlschlagen. Es stellt sich heraus, dass das eigene JavaScript von X (Twitter) einem dabei im Weg steht. Es gibt einen viel einfacheren Weg, der diesen ganzen Kampf umgeht.

Hier sind also zwei Möglichkeiten, einen X (Twitter)-Feed responsiv zu gestalten. Zunächst die manuelle CSS-Methode. Dann die Plugin-Methode, die von Haus aus responsiv ist, keinen Code erfordert und auch bei der nächsten Aktualisierung von X (Twitter) weiterhin funktioniert.

In diesem Artikel:

Kurzantwort: So bettet man einen responsiven X-Feed (Twitter) ein

Keine Zeit? Hier ist die Antwort, noch bevor es mit der vollständigen Anleitung losgeht.

Es gibt zwei Möglichkeiten, eine X (Twitter)-Einbettung responsiv zu gestalten. Die erste ist manuell. Man umschließt den iframe von X (Twitter) mit einem Container und erzwingt, dass er width: 100%, und die Inline-Stile mit CSS und Medienabfragen zu umgehen.

Das funktioniert zwar, ist aber sehr zeitaufwendig in der Umsetzung und Pflege. Außerdem kommt es häufig zu Fehlern, wenn X (Twitter) seinen Einbettungscode aktualisiert.

Die zweite Möglichkeit ist ein Plugin. Es rendert den Feed im Markup Ihres Themes, sodass er standardmäßig responsiv ist. Kein Code, keine Media-Queries, kein Kampf um Überschreibungen.

Für Nicht-Programmierer ist das Plugin die beste Wahl. Meine Empfehlung ist „X (Twitter) Feed Pro“, das Programmierkenntnisse überflüssig macht und Ihre Einbettungen von Anfang an responsiv gestaltet.

Mit beiden Ansätzen erhalten Sie letztendlich einen responsiven Feed, doch der Unterschied liegt darin, wie viel Zeit Sie dafür aufwenden und wie viel Wartungsaufwand Sie in Kauf nehmen müssen.

So schneiden die beiden im Vergleich ab.

	Manuelles CSS	X (Twitter) Feed Pro
Programmierung erforderlich	Ja	Keine
Übersteht X (Twitter)-Updates	Nein	Ja
Zeit für den Aufbau	30+ Minuten	Etwa 5 Minuten

Warum werden Ihre Änderungen an der CSS-Breite nicht übernommen?

Du stellst die Breite auf 100 % ein, speicherst und lädst die Seite neu. Es ändert sich nichts. Was überschreibt deine Einstellung also immer wieder?

Das eigene JavaScript von X (Twitter). Es wendet die Inline-Stile nach dem Laden der Seite erneut an, sodass Ihr CSS jedes Mal gelöscht wird.

Hier liegt der Haken. Die Einbettung gehört nicht wirklich dir. Es handelt sich um einen Iframe, ein kleines Fenster zu den Servern von X (Twitter), und du hast keine Kontrolle darüber, was darin angezeigt wird.

Der schnellste Weg, X-Einbettungen (Twitter) responsiv zu gestalten

Wenn Sie nach der besten Lösung suchen, können Sie das Plugin „X (Twitter) Feed Pro“ nutzen und all diese Probleme umgehen.

Mit dem führenden X (Twitter)-Feed-Plugin für WordPress können Sie mit nur wenigen Klicks X (Twitter)-Inhalte erstellen, anpassen und einbetten.

Alle Ihre Einbettungen sind automatisch responsiv, sodass sie unabhängig davon, ob jemand auf einem Smartphone, Tablet oder Desktop-Computer surft, immer korrekt angezeigt werden.

Im Gegensatz zur manuellen Methode fügt X (Twitter) Feed Pro auch keinen iFrame ein. Das Programm ruft Ihre Beiträge ab und bettet sie ordnungsgemäß in Ihre Website ein.

Und so verändert das die Lage:

• Standardmäßig ist er responsiv. Der Feed wird aus dem Markup Ihres Themes generiert und passt sich somit Ihrem Layout an, anstatt in einem festen 500px-Rahmen zu bleiben.
• Es gibt keinen Konflikt bei der Überschreibung. Kein Iframe bedeutet, dass kein X (Twitter)-JavaScript eingreift, um deine Stile zurückzusetzen.
• Es gibt keinen Fehler bei der Höhe. Da kein Iframe vorhanden ist , dessen Größe geschätzt werden müsste, ist der Feed immer nur so hoch wie sein Inhalt.

Darüber hinaus haben Sie die volle Kontrolle über das Design Ihrer X-Einbettungen (Twitter). Sie können sogar eine vorgefertigte Vorlage importieren, um die Anpassung schnell und einfach vorzunehmen.

Mit dem Live-Feed-Editor können Sie Ihre Einbettungen bis ins Detail gestalten – ganz ohne HTML, benutzerdefiniertes CSS oder jegliche Art von Code.

Außerdem befinden Sie sich in guter Gesellschaft. Die Plugins von Smash Balloon kommen auf mehr als 1,75 Millionen aktiven Websites zum Einsatz und haben eine Bewertung von 4,9 von 5 Sternen.

Sind Sie bereit, responsive X (Twitter)-Inhalte einzubinden? Holen Sie sich hier Ihre Version von X (Twitter) Feed Pro.

Schauen wir uns nun also an, wie man mit diesem Plugin X-Widgets (Twitter) am einfachsten responsiv gestalten kann.

So bettet ihr responsive X-Widgets (Twitter) in eure Website ein (auf einfache Weise)

Wenn Sie die nachstehende Schritt-für-Schritt-Anleitung befolgen, können Sie einen Feed mit für Mobilgeräte optimierten Einbettungen auf Ihrer Website einrichten.

Fangen wir an!

Schritt 1: Installieren Sie das Plugin „X (Twitter) Feed Pro“

Sie können loslegen, indem Sie sich hier Ihre Kopie von „X (Twitter) Feed Pro“ herunterladen. Sobald Sie die Plugin-Datei haben, installieren und aktivieren Sie sie auf Ihrem Computer.

Wenn Sie wissen möchten, wie das geht, finden Sie hier eine anfängerfreundliche Anleitung für die Installation eines WordPress-Plugins.

Schritt 2: Neues Widget erstellen

Da das Plugin einen 3-stufigen Assistenten bietet, ist es ganz einfach, ein neues Widget zur Anzeige responsiver Einbettungen zu erstellen.

Öffnen Sie zunächst in Ihrem Admin-Dashboard das Menü „X (Twitter)-Feed“ » „Alle Feeds “ und klicken Sie auf die Schaltfläche „Neu hinzufügen “.

Als Nächstes können Sie die Art des X-Widgets (Twitter) auswählen, das Sie einbetten möchten. Hier stehen Ihnen 4 verschiedene Optionen zur Auswahl:

• Benutzer-Timeline: Wähle ein X-Konto (Twitter) aus und binde die dortigen X-Beiträge ein
• Hashtag: Zeige X (Twitter)-Einbettungen mit den von dir ausgewählten Hashtags an
• Suche: Wählen Sie einen Suchbegriff aus und binden Sie die passenden X-Beiträge ein
• Listen: Wähle eine X-Liste (Twitter) aus und binde alle X-Beiträge daraus ein

Sobald Sie den gewünschten Widget-Typ ausgewählt haben, klicken Sie auf die Schaltfläche Weiter.

Für unser Beispiel wählen wir einen Hashtag-Widget-Typ aus.

Schritt 3: Verbinden Sie Ihr X (Twitter)-Konto

Sobald Sie Ihr X-Konto (Twitter) verknüpft haben, kann Ihr Widget damit beginnen, responsive Einbettungen auf Ihrer Website anzuzeigen.

Sind Sie bereit, loszulegen? Klicken Sie zunächst auf die Schaltfläche Verbinden im Popup-Fenster.

Dadurch werden Sie in Ihrem Browser von Ihrer Website zu www.x.com weitergeleitet. Dort können Sie dem Plugin Lesezugriff auf Ihr Konto gewähren.

Da Smash Balloon absolut sicher ist, kann X (Twitter) Feed Pro zwar auf Ihre Daten zugreifen, hat mit diesem Zugriff jedoch keine Berechtigung, Änderungen vorzunehmen.

Um fortzufahren, klicken Sie hier auf die Schaltfläche App autorisieren .

Wenn Sie darauf klicken, werden Sie wieder zu Ihrer WordPress-Website zurückkehren.

Hier können Sie die Quelle für Ihre Einbettungen auswählen. Je nach Widget-Typ kann dies ein X-Handle (Twitter), ein Hashtag, ein Suchbegriff und vieles mehr sein.

Zunächst geben wir den Hashtag „KEEB_PD“ in das Popup-Fenster ein und zeigen alle X-Beiträge mit diesem Hashtag an.

Um fortzufahren, können Sie Ihre Quelle eingeben und dann auf Weiter klicken.

Damit haben Sie eine neue Quelle für Ihr Widget hinzugefügt. In Zukunft können Sie diese Quelle mit einem einzigen Klick wiederverwenden, wann immer Sie neue X- (Twitter-)Widgets erstellen.

Schritt 4: Passen Sie Ihre X-Einbettungen (Twitter) an

Das Tolle an X (Twitter) Feed Pro ist, dass das Plugin die Einbettungen automatisch responsiv gestaltet und das Design Ihrer Website übernimmt.

Darüber hinaus steht Ihnen eine Sammlung von vorgefertigten Vorlagen zur Verfügung, die Sie für Ihr Widget importieren können:

• Standard
• Mauerwerk-Karten
• Einfaches Karussell
• Einfache Karten
• Schaukasten-Karussell
• Neueste X-Beiträge
• Widget

Wählen Sie einfach eine Vorlage aus, die Sie verwenden möchten, und klicken Sie dann auf Weiter.

Sobald Sie eine Vorlage importiert haben, öffnet X (Twitter) Feed Pro den Live-Feed-Editor, in dem Sie Ihre für Mobilgeräte optimierten Einbettungen detailliert anpassen können.

Auf der linken Seite haben Sie die Möglichkeit, das Layout Ihres Feeds, das Farbschema, die Kopfzeile, die Schaltfläche "Mehr laden" und vieles mehr zu ändern.

Außerdem können Sie alle Änderungen in Echtzeit über die Live-Feed-Vorschau auf der rechten Seite verfolgen. Die Anpassung ist also benutzerfreundlich, schnell und präzise.

Um mit der Gestaltung Ihrer Einbettungen zu beginnen, klicken Sie zunächst links auf die Option „Feed-Layout “.

Anschließend können Sie das Layout der X-Beiträge festlegen, die auf Ihrer Website angezeigt werden. Sie können dabei aus drei verschiedenen Layouts wählen:

• Liste
• Gemäuer
• Karussell

Im Folgenden wollen wir uns diese Layouts im Detail ansehen.

Wenn Sie möchten, dass X-Einbettungen (Twitter) auf Ihrer Website gut sichtbar sind, können Sie das Listenlayout verwenden.

Dieses Layout zeigt die X-Beiträge in einem einzigen Widget an. Es eignet sich auch hervorragend für eingebettete Videos.

Als Nächstes gibt es das „Masonry“-Layout , mit dem Sie Ihre eingebetteten X-Beiträge in mehreren Spalten anzeigen können.

Auf diese Weise können Sie die Besucher Ihrer Website begeistern, indem Sie eine Vielzahl verschiedener X-Beiträge gleichzeitig anzeigen.

Sie möchten Ihre Website interaktiver gestalten?

Wählen Sie einfach das Karussell-Layout aus und zeigen Sie ein Karussell mit Ihren X-Einbettungen (Twitter) an.

Nachdem Sie Ihr Layout ausgewählt haben, können Sie Ihre Änderungen speichern, indem Sie auf Speichern klicken.

Wenn Sie weitere Möglichkeiten zur individuellen Anpassung Ihrer X (Twitter)-Einbettungen suchen, klicken Sie auf die Schaltfläche „Anpassen “.

Anschließend können Sie den Live-Feed-Editor des Plugins nutzen, um die Farben Ihrer Einbettungen anzupassen.

Klicken Sie einfach auf die Option Farbschema auf der linken Seite, um dies zu tun.

Jetzt können Sie einfach das Farbschema auswählen, das Sie bevorzugen, um alle Farben Ihres Feeds auf einmal zu ändern.

Hier sind die Farbschemata, aus denen Sie wählen können:

• Vom Theme erben: Kopieren Sie automatisch die Farben Ihres WordPress-Themas
• Hell: Wählen Sie einen hellen Hintergrund und eine dunkle Schriftfarbe
• Dunkel: Anzeige eines dunklen Hintergrunds und stattdessen ein passendes Licht
• Benutzerdefiniert: Wählen Sie alle Farben für Ihr Widget manuell aus

Nachdem Sie Ihr Farbschema ausgewählt haben, klicken Sie noch einmal auf Speichern.

Nun können Sie die übrigen Anpassungsoptionen des Plugins nutzen, um das Design Ihrer X-Beitragsbox, die Kopfzeile, die „Mehr laden“-Schaltflächen, die Feed-Größe und vieles mehr individuell anzupassen.

Wie Sie sehen können, macht es dieses Plugin ganz einfach, X-Feeds (Twitter) anzupassen und einzubinden – CSS oder HTML sind überhaupt nicht erforderlich!

Klicken Sie abschließend auf Speichern, um Ihre Änderungen zu speichern, bevor Sie zum letzten Schritt übergehen.

Schritt 5: Responsive X (Twitter)-Einbettungen zu WordPress hinzufügen

Da dieses Plugin Ihre Einbettungen automatisch responsiv macht, können Sie Ihr X-Widget (Twitter) nun einbetten.

Mit X (Twitter) Feed Pro können Sie zwischen zwei verschiedenen Möglichkeiten wählen, Ihre responsiven Widgets einzubinden:

• Fügen Sie X-Einbettungen (Twitter) in Ihre Webseite ein
• Fügen Sie X-Einbettungen (Twitter) in die Seitenleiste oder Fußzeile Ihrer Website ein

Im Folgenden werden wir uns beide Methoden ansehen.

Fügen Sie X (Twitter)-Einbettungen zu Ihrer Webseite hinzu

Sind Sie bereit, die responsiven Widgets auf Ihrer Website einzubinden?

Klicken Sie zunächst auf die Schaltfläche Einbetten in der oberen rechten Ecke.

Wenn Sie darauf klicken, werden die Einbettungsoptionen für dieses Widget angezeigt. Sie können es auf einer WordPress-Seite, in der Seitenleiste oder in der Fußzeile einbetten.

Diesmal können Sie auf die Option Zu einer Seite hinzufügen klicken.

Sie können nun eine Liste aller WordPress-Seiten auf Ihrer Website sehen.

Um fortzufahren, klicken Sie einfach auf die Seite, auf der Sie das responsive X-Widget (Twitter) einfügen möchten, und klicken Sie dann auf „Hinzufügen“.

X (Twitter) Feed Pro leitet Sie nun im WordPress-Editor auf diese Seite weiter.

Hier können Sie einen neuen Inhaltsblock hinzufügen, indem Sie auf das Pluszeichen (+) klicken.

Geben Sie als Nächstes „Twitter-Feed“ in die Suchleiste oben ein und klicken Sie anschließend auf den Block „X (Twitter)-Feed“ darunter.

Damit fügt das Plugin automatisch das X-Widget (Twitter) zu Ihrer Seite hinzu.

Um Ihr neues Widget zu bestätigen, klicken Sie oben auf die Schaltfläche Aktualisieren.

Wie du siehst, ist es kinderleicht, deine X (Twitter)-Einbettungen responsiv zu gestalten und sie auf deiner Website einzufügen. Jetzt kannst du die Webseite öffnen und dir ansehen, wie deine X (Twitter)-Einbettungen aussehen.

Fügen Sie X-Einbettungen (Twitter) in die Seitenleiste oder Fußzeile Ihrer Website ein

Über den Live-Feed-Editor können Sie auch X-Inhalte (Twitter) in die Widget-fähigen Bereiche Ihrer Website einbinden.

Falls Ihr Editor noch nicht geöffnet ist, öffnen Sie zunächst in Ihrem Dashboard das Menü „X (Twitter)-Feed » Alle Feeds “.

Klicken Sie hier auf das X-Widget (Twitter), das Sie einbetten möchten.

Und schon wird Ihr Widget im Live-Feed-Editor geöffnet.

Wie zuvor können Sie auf Einbetten klicken, um fortzufahren.

Daraufhin wird das Popup-Fenster mit den Einbettungsoptionen noch einmal angezeigt.

Sie können auf Zu einem Widget hinzufügen klicken, um fortzufahren.

X (Twitter) Feed Pro leitet Sie nun zur Widget- Seite Ihrer Website weiter, auf der Sie Ihre vorhandenen Widgets verwalten und neue hinzufügen können.

Hier können Sie wählen, ob Ihr Widget in der Seitenleiste oder in der Fußzeile angezeigt werden soll.

Wir verwenden die Fußzeile für unser Beispiel.

Klicken Sie abschließend unten auf das Plus-Symbol (+) und wählen Sie dann das Widget „X (Twitter)-Feed“ aus.

Wenn Sie auf die Schaltfläche „Aktualisieren“ klicken, wird Ihr neues X (Twitter)-Widget auf Ihrer Website angezeigt.

Auf diese Weise können alle Besucher Ihrer Website Ihre responsiven Einbettungen in der Fußzeile Ihrer Website sehen:

Und da haben Sie es!

In nur wenigen einfachen Schritten können Sie einen Feed mit responsiven X-Einbettungen (Twitter) erstellen, um Besucher zu begeistern, die Konversionsrate zu steigern und Ihre Followerzahl in den sozialen Medien zu vergrößern.

Mit Hilfe von X (Twitter) Feed Pro können Sie ganz einfach ansprechende Widgets anzeigen, die auf allen Bildschirmgrößen einwandfrei geladen werden – ganz ohne Programmieraufwand.

Möchten Sie X (Twitter)-Einbettungen responsiv gestalten? Holen Sie sich hier „X (Twitter) Feed Pro“ für Ihre Website.

Eine einfache Möglichkeit, Ihre Verkäufe anzukurbeln, bietet unsere Anleitung zum Einbetten von Google-Bewertungswidgets in WordPress.

Und wenn Ihnen dieser Artikel gefallen hat, können Sie uns gerne auf X (Twitter) und Facebook folgen, um weitere Tutorials zum Thema Social-Media-Marketing zu erhalten.