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

Du hast den Einbettungscode von 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 Twitter-Einbettungen (jetzt X), und die meisten der im Internet angebotenen „Lösungen“ sind unzuverlässige 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 Twitters eigenes JavaScript einem dabei im Weg steht. Es gibt einen viel einfacheren Weg, der diesen ganzen Kampf umgeht.

Hier sind also zwei Möglichkeiten, einen 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 X-Aktualisierung weiterhin funktioniert.

In diesem Artikel:

• Kurzantwort: So bettet man einen responsiven Twitter-Feed ein
  • Warum werden Ihre Änderungen an der CSS-Breite nicht übernommen?
• Der schnellste Weg, X-Einbettungen (Twitter) responsiv zu gestalten
• So bettet ihr responsive X-Widgets (Twitter) in eure Website ein (auf einfache Weise)
  • Schritt 1: Installieren Sie das Twitter Feed Pro Plugin
  • Schritt 2: Neues Widget erstellen
  • Schritt 3: Verbinden Sie Ihr X (Twitter)-Konto
  • Schritt 4: Passen Sie Ihre X-Einbettungen (Twitter) an
  • Schritt 5: Responsive X (Twitter)-Einbettungen zu WordPress hinzufügen
  • X/Twitter-Einbettungen zu Ihrer Webseite hinzufügen
  • Fügen Sie X/Twitter-Einbettungen in die Seitenleiste oder Fußzeile Ihrer Website ein

Kurzantwort: So bettet man einen responsiven Twitter-Feed ein

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

Es gibt zwei Möglichkeiten, eine Twitter-Einbettung responsiv zu gestalten. Die erste ist manuell. Man umschließt den Twitter-iframe 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 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 „Twitter Feed Pro“, das Programmierkenntnisse überflüssig macht und Ihre Einbettungen von Haus aus 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	Twitter Feed Pro
Programmierung erforderlich	Ja	Keine
Übersteht X 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?

Twitters eigenes JavaScript. Es wendet die Inline-Stile nach dem Laden der Seite erneut an, sodass Ihr CSS jedes Mal überschrieben 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 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 „Twitter Feed Pro“ verwenden und all diese Probleme umgehen.

Mit dem führenden 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 Twitter Feed Pro auch keinen iFrame ein. Das Programm ruft Ihre Beiträge ab und bettet sie tatsächlich 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 Twitter-JavaScript eingreift, um Ihre 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/Twitter-Einbettungen. 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-Inhalte (Twitter) einzubinden? Holen Sie sich hier Ihre Version von 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 Twitter Feed Pro Plugin

Sie können loslegen, indem Sie sich Ihr Exemplar von Twitter Feed Pro hier abholen. 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 das Menü Twitter-Feed " Alle Feeds in Ihrem Admin-Dashboard und klicken Sie auf die Schaltfläche Neu hinzufügen.

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

• Benutzer-Zeitleiste: Wählen Sie ein Twitter-Konto und betten Sie die Tweets dort ein
• Hashtag: Anzeige von Twitter-Einbettungen mit den von Ihnen gewählten Hashtags
• Suche: Wählen Sie einen Suchbegriff und betten Sie die passenden Tweets ein
• Listen: Wählen Sie eine Twitter-Liste und betten Sie alle Tweets von dort 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 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 Twitter Feed Pro Ihre Daten einsehen, hat jedoch mit diesem Zugriff 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 ein und zeigen alle Tweets 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 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 Tweets
• 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 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 “.

Danach können Sie das Layout der Tweets wählen, die auf Ihrer Website angezeigt werden. Tatsächlich können Sie aus 3 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.

Bei diesem Layout werden die Tweets in einem einzigen Widget angezeigt. Es eignet sich auch hervorragend für eingebettete Videos.

Als Nächstes haben Sie das Masonry-Layout , das Ihre eingebetteten Tweets in vielen Spalten anzeigen kann.

Auf diese Weise können Sie Ihre Website-Besucher ansprechen, indem Sie viele verschiedene Tweets auf einmal 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 Tweet-Box, 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 Twitter Feed Pro können Sie zwischen zwei verschiedenen Möglichkeiten wählen, Ihre responsiven Widgets einzubinden:

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

Im Folgenden werden wir uns beide Methoden ansehen.

X/Twitter-Einbettungen zu Ihrer Webseite hinzufügen

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/Twitter-Widget einfügen möchten, und klicken Sie dann auf „Hinzufügen“.

Twitter Feed Pro leitet Sie nun zu dieser Seite im WordPress-Editor 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 Twitter-Feed -Block darunter.

Damit fügt das Plugin das X/Twitter-Widget automatisch 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 einzubinden. Jetzt kannst du die Webseite öffnen und dir ansehen, wie deine Twitter-Einbettungen aussehen.

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

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

Falls Ihr Editor noch nicht geöffnet ist, öffnen Sie zunächst das Menü Twitter Feed " Alle Feeds in Ihrem Dashboard.

Klicken Sie hier auf das X/Twitter-Widget, 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.

Twitter Feed Pro leitet Sie jetzt auf die Widgets-Seite Ihrer Website weiter, wo 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 schließlich auf das Plus-Symbol (+) am unteren Rand und wählen Sie dann das Twitter-Feed-Widget 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 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-Einbettungen (Twitter) responsiv gestalten? Holen Sie sich hier „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.