Möchten Sie reaktionsschnelle Twitter-Einbettungen anzeigen, um Website-Besucher anzusprechen?
Wenn Sie alle Besucher Ihrer Website einbeziehen möchten, ist die Einbettung von responsiven Twitter-Beiträgen eine einfache Lösung.
Das Hinzufügen von responsiven Twitter-Einbettungen kann jedoch verwirrend sein - vor allem, wenn Sie nicht bereits an den Umgang mit Code gewöhnt sind.
In diesem Artikel führen wir Sie durch den Prozess der Einbettung von responsiven Twitter-Feeds auf Ihrer Website.
Doch zunächst wollen wir uns die verschiedenen Möglichkeiten ansehen, wie Sie Ihre Twitter-Einbettungen responsive gestalten können.
Oder Sie können hier klicken, um direkt zum Tutorial zu gelangen.
Möglichkeiten zum Hinzufügen von responsiven Twitter-Embeds auf Ihrer Website
Um Inhalte von Twitter einzubetten und gleichzeitig sicherzustellen, dass die Tweets responsiv sind, gibt es 2 Möglichkeiten:
- Manueller Weg: Generieren Sie einen Einbettungscode, ändern Sie den Code, um ihn responsiv zu machen, und fügen Sie ihn zu Ihrer Website hinzu.
- Automatischer Weg: Verwenden Sie ein Social-Media-Plugin, das automatisch mobilfreundliche Twitter-Feeds anzeigen kann.
Wenn Sie sich für den manuellen Weg entscheiden, müssen Sie den offiziellen Twitter-Einbettungscode-Generator publish.twitter.com in Ihrem Browser öffnen.
Sobald Sie den HTML-Einbettungscode erstellt haben, öffnen Sie Ihre Website erneut und fügen Sie den Einbettungscode ein.
Leider sind Ihre Tweets möglicherweise nicht jedes Mal ansprechbar, wenn Sie die manuelle Methode verwenden. Um dieses Problem zu lösen, können Sie diesen CSS-Code hinzufügen.
.twitter-timeline {
width: 100vw !important;
}
Und wenn Sie Ihre Twitter-Beiträge mit iFrames anpassen möchten, müssen Sie den Code noch mehr manuell bearbeiten oder einen Entwickler beauftragen.
Wie Sie sehen, kann das Einbetten von responsiven Twitter-Inhalten zeitaufwändig und kompliziert sein, wenn Sie diese Methode verwenden.
Was ist besser: iFrame oder Twitter-Einbettungen?
Manche Leute verwenden iFrames, um Twitter-Inhalte anzuzeigen, aber das kann Ihrer Website in vielerlei Hinsicht schaden.
Da iFrames standardmäßig nicht responsiv sind, müssen Sie den Code manuell bearbeiten, um sie mobilfreundlich zu machen.
Dies hat zur Folge, dass Besucher auf mobilen Geräten Ihre Tweets möglicherweise nicht richtig sehen können.
Außerdem können Suchmaschinen wie Google den Inhalt von iFrames nicht lesen, was sich negativ auf die Suchmaschinenoptimierung auswirken kann.
Die gute Nachricht ist, dass Sie den automatischen Weg nutzen können, um reaktionsfähige Twitter-Beiträge mit Leichtigkeit einzubetten. Sie können ein WordPress-Plugin verwenden, das sich über die API mit Twitter verbindet und Tweets auf Ihrer Website sammelt.
Schauen wir uns diese Methode im Folgenden an.
Die einfachste Art, responsive Twitter-Inhalte einzubetten
Wenn Sie auf der Suche nach der einfachsten Möglichkeit sind, Twitter-Inhalte einzubinden, ist ein Plugin wie Twitter Feed Pro die beste Option.
Mit Twitter Feed Pro können Sie mühelos responsive Twitter-Feeds erstellen, anpassen und in Ihre Website einbetten - ganz ohne HTML, Javascript, benutzerdefiniertes CSS oder anderen Code.
Folgen Sie einfach einer 3-Schritte-Anleitung, und schon haben Sie einen schönen Twitter-Feed. Sie können eine Twitter-Timeline, Hashtags, Suchergebnisse, eine Home-Timeline und mehr einbetten.
Da Twitter Feed Pro automatisch das Design Ihrer Website kopiert, passen Ihre Twitter-Inhalte von Anfang an perfekt zum Erscheinungsbild Ihrer Marke.
Sie können dann Ihren Twitter-Feed noch weiter anpassen, indem Sie eine vorgefertigte Vorlage auswählen, die Sie importieren möchten.
Für weitere Anpassungen verfügt das Plugin über einen visuellen Editor, in dem Sie Layout, Farbe, Anzahl der Tweets, Header-Stil, weitere Schaltflächen und vieles mehr einstellen können.
Außerdem können Sie alle Ihre Änderungen in der Live-Vorschau verfolgen.
Das Plugin verfügt über ein intelligentes Caching-System, das eine Kopie Ihrer Twitter-Inhalte speichert. So kann Ihre Website den Besuchern die gespeicherte Kopie zeigen, anstatt Ihre Tweets jedes Mal von Grund auf zu laden.
Infolgedessen kann Ihre Website viel schneller geladen werden. Und mit einer schnelleren Website erhalten Sie auch eine viel bessere Suchmaschinenoptimierung.
Da Twitter Feed Pro eine Sicherungskopie speichert, sind Ihre eingebetteten Tweets auch dann noch online, wenn Twitter selbst vorübergehend nicht erreichbar ist.
Alles in allem ist es das beste Twitter-Feed-Plugin, das es gibt, und eine fantastische Lösung, wenn Sie reaktionsfähige Twitter-Einbettungen wünschen.
Sind Sie bereit für das Einbetten von responsiven Twitter-Feeds? Holen Sie sich noch heute Ihr Exemplar von Twitter Feed Pro!
Sehen wir uns nun an, wie Sie dieses Plugin verwenden können, um Ihrer Website responsive Twitter-Einbettungen hinzuzufügen.
So betten Sie einen responsiven Twitter-Feed in Ihre Website ein
Um mit dem Hinzufügen von responsiven Twitter-Einbettungen zu beginnen, können Sie einfach die folgende Schritt-für-Schritt-Anleitung befolgen:
Schritt 1: Installieren und Aktivieren von Twitter Feed Pro
Sie können beginnen, indem Sie sich eine Kopie des Twitter Feed Pro Plugins von hier holen. Sobald Sie das Plugin haben, installieren und aktivieren Sie es auf Ihrer WordPress-Website, um fortzufahren.
Weitere Informationen finden Sie in dieser benutzerfreundlichen Anleitung zur Installation von WordPress-Plugins.
Danach können Sie zu Schritt 2 übergehen und einen responsiven Twitter-Feed erstellen.
Schritt 2: Erstellen eines Twitter-Feeds
Da das Plugin mit einem einfachen, geführten Ablauf ausgestattet ist, können Sie einen neuen Twitter-Feed mit nur wenigen Klicks erstellen.
Öffnen Sie zunächst Ihr Admin-Dashboard und navigieren Sie im Menü Twitter Feed " Alle Feeds , bevor Sie oben auf die Schaltfläche Neu hinzufügen klicken.
Als Nächstes fordert das Plugin Sie auf, die Art der Twitter-Einbettungen zu wählen, die Sie auf Ihrer Website haben möchten. Es gibt 6 Optionen, aus denen Sie wählen können, und jede zeigt Tweets aus einer anderen Quelle an.
- Benutzer-Zeitleiste: Wählen Sie Twitter-Profile aus, deren Tweets Sie einbetten möchten
- Hashtag: Wählen Sie bestimmte Hashtags und betten Sie dann die Tweets mit diesem Hashtag ein
- Startseite Zeitleiste: Tweets aus der Home-Timeline Ihres Kontos einbetten
- Suche: Wählen Sie Suchbegriffe und betten Sie die Twitter-Suchergebnisse auf Ihrer Website ein
- Erwähnungen: Anzeige von Tweets, die das Twitter-Konto Ihrer Marke erwähnen
- Listen: Zeigen Sie Inhalte aus Ihrer ausgewählten Twitter-Liste
Sie können sogar mehr als eine Option auswählen, wenn Sie verschiedene Feed-Typen in einem Twitter-Feed kombinieren möchten.
Um fortzufahren, wählen Sie Ihren Twitter-Feed-Typ aus und klicken Sie dann auf die Schaltfläche Weiter.
In unserem Beispiel verwenden wir einen Hashtag-Feed, um responsive Twitter-Einbettungen anzuzeigen.
Da Ihr Twitter-Feed nun erstellt ist, können Sie ihn in Schritt 3 mit Ihrem Twitter-Konto verbinden.
Schritt 3: Verbinden Sie Ihr Twitter-Konto
Um responsive Einbettungen auf Ihrer Website anzuzeigen, verbindet sich das Plugin nun mit Ihrem Twitter-Konto.
Klicken Sie dazu zunächst auf die Schaltfläche Verbinden .
Als Nächstes bittet Twitter Feed Pro um schreibgeschützten Zugriff auf Ihr Konto. Das Plugin kann dann den Zugriff nutzen, um Twitter-Informationen anzuzeigen, aber es kann keine Änderungen an Ihrem Konto vornehmen.
Daher ist das Twitter Feed Pro Plugin absolut sicher.
Klicken Sie dazu einfach auf die Schaltfläche App autorisieren .
Sobald Sie dies getan haben, öffnet Twitter Feed Pro Ihre Website, damit Sie eine Quelle für Ihren Twitter-Feed hinzufügen können.
Eine Quelle ist das Twitter-Profil, der Hashtag, der Suchbegriff, die Liste usw., die Sie auf Ihrer Website einbetten möchten.
Um fortzufahren, geben Sie die Quelle in das Popup-Fenster ein und klicken Sie dann auf Weiter.
Für diesen responsiven Twitter-Feed verwenden wir den Hashtag "KEEB_PD" als Quelle.
Jetzt, wo Sie Ihren Feed mit Twitter verbunden und Ihre Quelle hinzugefügt haben, können Sie ihn anpassen.
Schritt 4: Passen Sie Ihre Responsive Twitter Embeds an
Damit Sie schnell festlegen können, wie die responsiven Tweets auf Ihrer Website erscheinen, können Sie eine vorgefertigte Vorlage importieren.
Hier sind die Feed-Vorlagen, aus denen Sie wählen können:
- Standard
- Gemäuer
- Einfaches Karussell
- Einfache Karten
- Schaufenster-Karussell
- Neueste Tweets
- Widget
Klicken Sie auf Weiter, sobald Sie eine Feed-Vorlage ausgewählt haben, die Sie bevorzugen.
Jetzt können Sie Ihren Twitter-Feed mit dem Live-Feed-Editor anpassen. Auf der linken Seite finden Sie die Anpassungsoptionen zum Ändern des Feed-Layouts, des Header-Designs, der Lightbox-Option, des Farbschemas und vieles mehr.
Sie können auch die Moderationsoptionen in den Feed-Einstellungen verwenden, um die Tweets, die auf Ihrer Website erscheinen, zu kuratieren.
Das Plugin verfügt über eine einfache Echtzeit-Vorschau auf der rechten Seite, damit Sie Ihre Änderungen im Auge behalten können.
Für den Anfang können Sie das Layout der Tweets auf Ihrer Website ändern.
Suchen Sie dazu die Option Feed-Layout auf der linken Seite und klicken Sie sie an.
Als Nächstes zeigt Ihnen Twitter Feed Pro 3 Layouts an, aus denen Sie auswählen können: Liste, Karussell und Masonry.
Schauen wir sie uns im Folgenden an:
Wenn Sie Tweets ähnlich wie auf der offiziellen Twitter-Seite anzeigen möchten, können Sie sich für das Listenlayout entscheiden.
Außerdem wird Ihr Twitter-Feed auf diese Weise auf Ihrer Website deutlich sichtbar sein.
Wenn Sie Spalten für die Anzeige von Twitter-Einbettungen verwenden möchten, können Sie das Masonry-Layout verwenden.
Mit diesem Layout können Sie eine Vielzahl von Tweets auf einmal anzeigen.
Wenn Sie sich für die Karussell-Layout-Option entscheiden, können Sie Ihre Tweets in einer interaktiven Twitter-Slideshow zeigen.
Ihre Besucher haben so eine weitere Möglichkeit, sich mit Ihrer Website zu beschäftigen.
Nachdem Sie ein Feed-Layout ausgewählt haben, klicken Sie auf die Schaltfläche Speichern .
Klicken Sie anschließend auf die Schaltfläche Anpassen , um das Aussehen Ihres Twitter-Feeds weiter anzupassen.
Diesmal können Sie die Farben Ihres responsiven Twitter-Feeds auswählen.
Klicken Sie zunächst auf die Option Farbschema .
Twitter Feed Pro wird mit 4 Farbschema-Optionen geliefert, die Sie ausprobieren können:
- Vom Theme erben: Kopiere die Farben deines WordPress-Themes für deine Tweets
- Hell: Dunkle Schriftfarbe mit hellem Hintergrund
- Dunkel: Dunkler Hintergrund und eine helle Schrift
- Benutzerdefiniert: Wählen Sie manuell alle Ihre Farben aus
Um fortzufahren, wählen Sie Ihr Farbschema aus und klicken Sie dann auf Speichern.
Möchten Sie Ihre Twitter-Einbettungen noch weiter anpassen? Mit den übrigen Schaltflächen können Sie den Stil der Kopfzeile, das Design der Schaltflächen, die Anzahl der Tweets, die Größe des Feeds und vieles mehr festlegen.
Klicken Sie abschließend auf Speichern, um das neue Design Ihres Twitter-Feeds zu bestätigen.
In Schritt 5 können Sie schließlich diesen Twitter-Feed mit diesem Plugin in Ihre WordPress-Website einbetten.
Schritt 5: Responsive Twitter-Embeds auf Ihrer Website hinzufügen
Mit Hilfe von Twitter Feed Pro gibt es 2 Möglichkeiten, Twitter-Inhalte in Ihre Website einzubinden:
- Reaktionsfähige Twitter-Einbettungen auf einer Webseite hinzufügen
- Hinzufügen von reaktionsfähigen Twitter-Einbettungen in der Seitenleiste oder Fußzeile der Website
Responsive Twitter-Embeds auf einer Webseite hinzufügen
Da das Plugin so benutzerfreundlich ist, können Sie Ihren Twitter-Feed direkt vom Live-Feed-Editor aus einbetten.
Klicken Sie zunächst auf die Schaltfläche Einbetten am oberen Rand des Editors.
Sobald Sie das getan haben, zeigt Ihnen das Plugin ein Popup mit den verschiedenen Möglichkeiten, wie Sie Twitter-Feeds einbetten können.
Klicken Sie auf die Schaltfläche Zu einer Seite hinzufügen auf dem Popup, um fortzufahren.
Sie können nun die WordPress-Seite auswählen, auf der Sie den Feed anzeigen möchten.
Nachdem Sie die Seite im Popup ausgewählt haben, klicken Sie auf die Schaltfläche Hinzufügen, um fortzufahren.
Sobald Sie das getan haben, öffnet das Plugin die Seite im WordPress-Editor, damit Sie Ihren Feed einbetten können.
Fügen Sie nun einen neuen Inhaltsblock hinzu, indem Sie auf das Plus-Symbol (+) klicken.
Suchen Sie in der Suchleiste oben nach dem Block "Twitter Feed" und klicken Sie dann auf den darunter liegenden Block " Twitter Feed".
Sie sehen dann Ihre Twitter-Einbettung im WordPress-Editor.
Klicken Sie abschließend auf die Schaltfläche Aktualisieren, und Ihr Twitter-Feed ist online.
Wenn Sie Ihre Webseite öffnen, können Sie sehen, wie Ihre responsiven Twitter-Einbettungen aussehen.
Wie Sie sehen, ist es mit Twitter Feed Pro ganz einfach, Twitter-Inhalte mobilfreundlich auf Ihrer Website anzuzeigen.
Sehen wir uns also die nächste Möglichkeit an, Twitter-Feeds einzubetten.
Responsive Twitter-Embeds in der Seitenleiste oder Fußzeile der Website hinzufügen
Die nächste Option ist die Verwendung eines Twitter-Widgets zur Anzeige von Tweets in der Seitenleiste oder Fußzeile Ihrer Website.
Wie bei der vorherigen Methode können Sie auch diesmal den Live-Editor verwenden.
Wenn Sie einen Feed wieder im Live-Feed-Editor öffnen möchten, öffnen Sie zunächst das Menü Twitter-Feed " Alle Feeds in Ihrem WordPress-Dashboard.
Klicken Sie anschließend auf den Twitter-Feed, den Sie einbetten möchten.
Wie Sie sehen können, ist es ganz einfach, einen Twitter-Feed im Live-Feed-Editor erneut zu öffnen.
Klicken Sie dann oben auf die Schaltfläche Einbetten, um loszulegen.
Sie können nun das Popup verwenden, um ein neues Twitter-Widget zu erstellen, das responsive Tweets anzeigt.
Klicken Sie dann im Popup-Fenster auf die Schaltfläche Zu einem Widget hinzufügen .
Das Plugin öffnet nun die Widgets-Seite Ihrer Website, wo Sie Ihr Twitter-Feed-Widget hinzufügen können.
Dort können Sie den Ort für Ihre Tweets auswählen.
Wenn Sie reaktionsfähige Twitter-Einbettungen in der Seitenleiste anzeigen möchten, klicken Sie auf das Bedienfeld Seitenleiste .
Sie können auch auf Fußzeile klicken, um die Tweets in der Fußzeile Ihrer Website anzuzeigen.
Für dieses Beispiel wird eine WordPress-Seitenleiste verwendet.
Um ein neues Widget hinzuzufügen, klicken Sie auf das Plus-Symbol (+) am unteren Rand.
Wählen Sie anschließend das Twitter-Feed-Widget aus den verfügbaren Optionen aus, um fortzufahren.
Sie können nun die Einbettung Ihres Twitter-Feeds abschließen, indem Sie auf die Schaltfläche Aktualisieren klicken.
Auf diese Weise können Sie einen Feed mit responsiven Twitter-Einbettungen in Ihrer Seitenleiste oder Fußzeile einrichten.
Und das war's!
Wie Sie sehen, kann das Hinzufügen von responsiven Twitter-Einbettungen zu Ihrer Website mit Hilfe von Twitter Feed Pro sehr einfach sein.
Sie können jetzt relevante Tweets anzeigen, um das Interesse der Besucher aufrechtzuerhalten, Ihre Twitter-Followerschaft zu vergrößern, Ihre Konversionen zu steigern und vieles mehr.
Möchten Sie ansprechende Twitter-Feeds einbetten? Klicken Sie hier, um Twitter Feed Pro für Ihre Website zu erhalten!
Wenn Sie schon einmal hier sind, vergessen Sie nicht, sich diese Liste der besten Möglichkeiten, auf Twitter Geld zu verdienen, anzusehen.
Wenn dies für Sie hilfreich war, folgen Sie uns doch auf Facebook und Twitter für weitere informative Tipps und Tricks zu sozialen Medien.
