Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie Twitter-Share- und Retweet-Buttons in WordPress hinzu

Es gibt nichts Frustrierenderes, als einen großartigen Artikel zu veröffentlichen und dann festzustellen, dass er online kaum Beachtung findet.

Im Laufe der Jahre, in denen wir WPBeginner aufgebaut haben, haben wir gelernt: Je einfacher es den Leuten fällt, Ihre Inhalte zu teilen, desto mehr werden sie es tun.

Twitter (X) bleibt eine der effektivsten Plattformen, um Ihre Inhalte zu verbreiten und Sichtbarkeit aufzubauen.

Deshalb ist das WPBeginner-Team auf Twitter aktiv und wir stellen sicher, dass unsere Inhalte leicht zu teilen sind! In diesem Leitfaden zeige ich Ihnen zwei einfache, No-Code-Möglichkeiten, Twitter-Share- und Retweet-Buttons zu Ihrer WordPress-Website hinzuzufügen, um das soziale Teilen auf Ihren eigenen Beiträgen zu fördern. 🤳

So fügen Sie Twitter-Share- und Retweet-Buttons in WordPress hinzu

Warum Twitter-Share- und Retweet-Buttons in WordPress hinzufügen?

Laut aktuellen Marketingstatistiken hat Twitter (X) über 250 Millionen monatlich aktive Nutzer. Das macht es zu einem großartigen Ort, um Ihre Website zu bewerben.

Das Teilen Ihrer Inhalte in sozialen Medien erreicht jedoch nur Nutzer, die Ihrem Konto bereits folgen. Wenn Sie ein neues Publikum erreichen möchten, müssen Sie die Leute dazu bringen, Ihre Inhalte zu teilen und zu retweeten.

Ein Beispiel für einen Twitter-Share-Button, eingebettet in WordPress

Dies kann Ihren Blog-Traffic erhöhen, indem Ihre Marke Personen vorgestellt wird, die Ihre Website möglicherweise noch nicht kannten. Das erneute Posten Ihrer Inhalte ist auch eine starke Form des Social Proof. Wenn jemand einen Beitrag oder Tweet mit seinen Followern teilt, wird dies oft als Empfehlung angesehen.

Nun, schauen wir uns an, wie einfach es ist, X-Share- und Retweet-Buttons in WordPress hinzuzufügen. Verwenden Sie einfach die folgenden Schnelllinks, um direkt zu der Methode zu springen, die Sie verwenden möchten:

🧑‍💻 Profi-Tipp: Suchen Sie nach einer Möglichkeit, Ihre Beitragsinhalte in WordPress tweetbar zu machen? Schauen Sie sich unseren Leitfaden an, wie Sie 'Click to Tweet'-Boxen in WordPress hinzufügen.

Methode 1: So fügen Sie einen Twitter-Share-Button in WordPress mit Novashare hinzu

Nach meiner Erfahrung ist der einfachste Weg, einen Twitter (X) Share-Button zu WordPress hinzuzufügen, die Verwendung des Novashare Plugins. Es ist eines der besten Social-Media-Plugins für WordPress, mit dem Sie alle Arten von Sharing-Buttons zu Ihrer Website hinzufügen können. Dazu gehören LinkedIn, Facebook und X.

💡 Hinweis: Das WPBeginner-Team hat umfangreiche Recherchen zu diesem Plugin durchgeführt und Sie können alles darüber in unserem umfassenden Novashare-Testbericht erfahren.

Im Gegensatz zu anderen sperrigen Plugins ist Novashare auf Leistung ausgerichtet und funktioniert hervorragend mit vielen beliebten WordPress-Themes. Das macht es perfekt für Website-Besitzer, denen die Seitengeschwindigkeit, der Stil und die Einfachheit wichtig sind.

Schritt 1: Novashare installieren und aktivieren

Der erste Schritt ist die Installation und Aktivierung des Plugins.

Sie müssen das Novashare-Plugin von der offiziellen Novashare-Website erwerben.

Novashare-Homepage

Danach können Sie einfach den Checkout-Prozess durchlaufen, um zu Ihrem Novashare-Dashboard zu gelangen.

Dann sehen Sie Ihre Kaufbestätigung, wo Sie den Novashare-Lizenzschlüssel sowie die .zip-Datei finden.

Novashare's Lizenzschlüssel

Laden Sie einfach die Datei herunter, kopieren Sie Ihren Lizenzschlüssel und bewahren Sie ihn sicher auf.

Gehen Sie als Nächstes in Ihrem WordPress-Adminbereich zu Plugins » Neues hinzufügen, um das Plugin zu installieren.

Die Schaltfläche „Upload Plugin“

Sie können die Novashare .zip-Datei hochladen und auf „Jetzt installieren“ klicken, um den Vorgang zu starten, gefolgt von „Aktivieren“. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung unter wie man ein WordPress-Plugin installiert.

Nach der Aktivierung möchten Sie Ihren Lizenzschlüssel aktivieren. Sie können dies tun, indem Sie zu Einstellungen » Novashare gehen.

Navigieren zum Anpassungsbereich von Novashare

Auf dem nächsten Bildschirm können Sie auf 'Lizenz' klicken.

Geben Sie danach einfach Ihren Schlüssel in das Feld ein und klicken Sie auf „Lizenz speichern“.

Eingabe des Lizenzschlüssels von Novashare

Wenn das erledigt ist, können Sie Ihren Twitter-Share-Button mit Novashare erstellen.

Schritt 2: Erstellen Sie Ihren Twitter-Share-Button

Um Social-Media-Share-Buttons in Novashare zu erstellen, können Sie entweder im Untermenü „Inline Content“ oder „Floating Bar“ arbeiten.

Fragen Sie sich, was das bedeutet? Hier sind die Hauptunterschiede:

  • Inline-Inhalt: Standardmäßig verwenden diese die mittlere Größe und zeigen die Schaltfläche oben oder unten (oder beides) an – je nachdem, was Sie wählen. Sie können sie auch überall auf Ihrer Seite platzieren, indem Sie einen Block oder Shortcode verwenden.
  • Schwebende Leiste: Diese erscheinen auf dem Desktop auf der linken Seite des Bildschirms und bleiben auf Mobilgeräten am unteren Rand haften. Sie verwenden standardmäßig die kleine Schaltflächengröße, aber die Platzierung kann sich je nach Bildschirmgröße leicht ändern.

Für diesen Leitfaden werde ich den Stil „Inline-Inhalt“ verwenden, also schalte ich den Schalter um, um ihn zu aktivieren.

Inline-Inhalt aktivieren

Alternativ können Sie zum Tab „Floating Bar“ gehen und diese aktivieren.

Sobald Sie Ihren bevorzugten Share-Button aktiviert haben, suchen Sie darunter den Abschnitt „Social Networks“. Klicken Sie hier auf das X-Symbol, um ihn auszuwählen.

Das ist alles! Aber bevor Sie diese Einstellung speichern, möchten Sie Ihren Twitter-Share-Button anpassen.

Schritt 3: Aussehen des Share-Buttons anpassen

Wenn Sie im Tab „Inline-Inhalt“ nach unten scrollen, finden Sie mehrere Optionen, um anzupassen, wie Ihr Twitter (X) Share-Button aussieht und wo er auf Ihrer Website erscheint.

Im Bereich „Anzeige“ können Sie auswählen, welche Beitragstypen den Twitter-Teilen-Button anzeigen. Aktivieren Sie einfach die gewünschten Kontrollkästchen. Für dieses Tutorial aktiviere ich es beispielsweise für „Beiträge“.

Als Nächstes können Sie entscheiden, wo der Button erscheint – über dem Inhalt, unter dem Inhalt oder sowohl darüber als auch darunter.

Anpassen der Button-Position

Mit der Funktion 'In Feeds anzeigen' können Sie Buttons auch in RSS-Feeds anzeigen.

Dann legt „Mobile Breakpoint“ fest, wann der mobile Stil greift, z. B. 1200px. In der Zwischenzeit steuert die Einstellung „Above/Below Breakpoint ausblenden“ die Sichtbarkeit des Buttons basierend auf der Bildschirmgröße.

Weiter unten auf der Seite finden Sie den Unterabschnitt 'Design'. Hier können Sie Folgendes anpassen:

  • Schaltflächenstil: Durchgezogen, Invers, Beschriftung mit Rahmen, Schaltfläche mit Rahmen, Minimale Beschriftung, Minimal
  • Button-Layout: Automatische Breite, 1-6 Spalte(n)
  • Button-Ausrichtung: Links, Rechts, Mitte
  • Button-Größe: Klein, Mittel, Groß
  • Schaltflächenform: Quadratisch, Abgerundet, Kreisförmig
Anpassen des Button-Designs

Danach möchten Sie vielleicht die Farbe des Buttons ändern. Wenn ja, bewegen Sie einfach das Farbauswahlwerkzeug, um eine Farbe auszuwählen.

Für dieses Tutorial habe ich die Funktion „Inverse beim Überfahren“ aktiviert, damit der Button interaktiver wirkt. Dies fügt einen Hover-Effekt hinzu, bei dem sich die Farben des Buttons umkehren, wenn jemand mit der Maus darüber fährt – dies gibt den Benutzern einen visuellen Hinweis, dass er klickbar ist.

Um es noch interessanter zu gestalten, können Sie die Button-Hover-Farbe mit dem Farbauswahlwerkzeug auswählen. Es gibt auch Einstellungen, um den Button-Abstand und die Anzeige des Labels anzupassen.

Anpassen der Button-Farbe

Direkt unter der Unterrubrik „Design“ finden Sie „Share Counts“.

Hier können Sie die Gesamtzahl der Shares über alle Netzwerke anzeigen. Und dann möchten Sie vielleicht ändern, wo er erscheint, z. B. vor oder nach den Buttons. Sie können auch die Farbe anpassen, damit sie zu Ihrer WordPress-Website passt.

Möchten Sie auch Shares pro Plattform anzeigen? Aktivieren Sie gerne „Netzwerk-Share-Zählungen“.

Beachten Sie jedoch, dass einige Social-Media-Plattformen keine Daten zu geteilten Zählungen mehr unterstützen. Daher wird möglicherweise keine Zahl angezeigt.

Einstellungen für die Anzahl der Shares anpassen

Zuletzt finden Sie den Unterabschnitt 'Call to Action'.

Es ermöglicht Ihnen, eine kurze Textbeschriftung hinzuzufügen, um die Leser darüber zu informieren, was der Button tut – wie z. B. „Diesen Beitrag teilen“ oder „Jetzt twittern.“

Sie können auch die Schriftgröße und -farbe an den Stil Ihrer Website anpassen.

CTA hinzufügen

Nachdem Sie Ihre Anpassungen vorgenommen haben, können Sie auf die Schaltfläche „Änderungen speichern“ klicken.

Und das ist es! Novashare zeigt sofort den Twitter (X) Share-Button auf Ihren Beiträgen an. Hier ist ein Beispiel von meiner Test-Website:

X Share-Schaltfläche

Methode 2: So lassen Sie Benutzer Ihre Tweets in WordPress mit Smash Balloon retweeten

Wenn Sie einen einfachen Share-Button zu einer Seite oder einem Beitrag hinzufügen möchten, ist Novashare eine gute Option. Sie möchten Ihre Besucher jedoch vielleicht auch dazu ermutigen, Ihre neuesten Tweets zu retweeten. Dies kann Ihnen mehr Interaktion verschaffen und Ihre Inhalte noch weiter verbreiten.

Der beste Weg, um mehr Retweets zu erhalten, ist die Verwendung von Smash Balloon Twitter Feed Pro. Dieses Twitter-Feed-Plugin ermöglicht es Ihnen, Ihren gesamten Twitter (X)-Feed zu jeder Seite, jedem Beitrag oder jedem widget-fähigen Bereich hinzuzufügen.

💡 Hinweis: Weitere Informationen zum Plugin finden Sie in der vollständigen Smash Balloon-Bewertung des WPBeginner-Teams.

Ein Beispiel für einen eingebetteten Twitter-Feed, erstellt mit Smash Balloon

Jeder Tweet hat sein eigenes Menü für Twitter-Aktionen.

Das bedeutet, dass Besucher einen Tweet einfach erneut posten können, indem sie auf dessen 'Retweet'-Schaltfläche klicken.

Ein Beispiel für Retweet-Buttons, die mit Smash Balloon zu WordPress hinzugefügt wurden

Noch besser: Der Feed wird automatisch aktualisiert, sodass es immer neue Tweets gibt, mit denen Besucher interagieren können. Dies kann dazu beitragen, Ihre Website frisch und interessant zu halten, selbst für häufige Besucher.

📌 Hinweis: Es gibt ein kostenloses Smash Balloon Twitter Feed-Plugin. Ich werde jedoch die Pro-Version verwenden, da sie mehr Funktionen bietet, wie zusätzliche Vorlagen und die Möglichkeit, Hashtag-Feeds anzuzeigen.

Schritt 1: Twitter Feed Pro einrichten

Zuerst müssen Sie ein SmashBalloon-Konto auf deren Website erstellen. Klicken Sie einfach auf die Schaltfläche „Get Started“, wählen Sie einen Plan aus und folgen Sie den Anweisungen auf dem Bildschirm, um den Vorgang abzuschließen.

Smash Balloon Twitter Feed Pro

Nach Abschluss der Registrierung erhalten Sie Ihr eigenes Smash Balloon Dashboard und einen Lizenzschlüssel. Von hier aus können Sie den Tab einfach geöffnet lassen oder Ihren Lizenzschlüssel sicher kopieren. Sie werden ihn bald benötigen.

Damit ist es an der Zeit, Smash Balloons Twitter Feed Pro zu installieren und zu aktivieren.

Von Ihrem WordPress-Admin-Dashboard aus gehen wir zu Plugins » Neues Plugin hinzufügen.

Das Untermenü „Neues Plugin hinzufügen“ unter Plugins im WordPress-Adminbereich

Auf dem nächsten Bildschirm verwenden wir die Suchleiste, um das Smash Balloon Twitter Feed-Plugin schnell zu finden.

Im Suchergebnis klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“.

Installation von Smash Balloons Twitter Feeds

Wenn Sie Hilfe benötigen, lesen Sie bitte den WPBeginner-Leitfaden zur Installation eines WordPress-Plugins.

Nachdem Sie das Plugin installiert haben, gehen Sie zu Twitter Feed » Einstellungen. Sie können nun Ihren Smash Balloon Lizenzschlüssel in das Feld 'Lizenzschlüssel' eingeben.

Hinzufügen einer Lizenz zum Smash Balloon Twitter Feed Pro WordPress-Plugin

Diese Informationen finden Sie in der Bestätigungs-E-Mail, die Sie beim Kauf von Smash Balloon erhalten haben, sowie in Ihrem Smash Balloon-Konto.

Nachdem Sie Ihren Lizenzschlüssel hinzugefügt haben, klicken Sie auf die Schaltfläche 'Aktivieren'.

Schritt 2: Einen Live-Twitter-Feed für WordPress erstellen

Sobald Sie das getan haben, sind Sie bereit, einen benutzerdefinierten Twitter-Feed zu erstellen. Gehen Sie dazu zu Twitter Feed » All Feeds und klicken Sie dann auf die Schaltfläche 'Add New'.

Einen Twitter-Feed zu einer WordPress-Website oder einem Blog hinzufügen

Wenn Sie zum ersten Mal einen Twitter-Feed mit Smash Balloon hinzufügen, werden Sie aufgefordert, Ihre E-Mail-Adresse zu bestätigen.

Klicken Sie einfach auf die Schaltfläche „Verbinden“, um dies zu tun und die Anweisungen auf dem Bildschirm zu befolgen.

Verknüpfen der E-Mail-Adresse des Benutzers mit Smash Balloon

Sobald Sie fertig sind, kehren Sie zur Plugin-Seite zurück. Smash Balloon zeigt nun alle verschiedenen Arten von Twitter-Feeds an, die Sie erstellen können.

Da Sie mehr Retweets wünschen, wählen Sie einfach 'User Timeline' und klicken Sie auf 'Weiter'.

Hinzufügen einer Twitter-Benutzer-Timeline zu WordPress

Auf dem nächsten Bildschirm müssen Sie das @-Symbol gefolgt vom Namen Ihres Twitter (X)-Kontos eingeben.

Wenn Sie bereit sind, klicken Sie auf „Weiter“, um den Haupteditor von Smash Balloon zu öffnen.

Hinzufügen eines Twitter-Retweet-Buttons zu WordPress

Als Nächstes können Sie die Vorlage auswählen, die in Ihrem Twitter-Feed verwendet werden soll.

Sie können beispielsweise Ihre Tweets in einem responsiven Slider anzeigen, indem Sie 'Simple Carousel' auswählen. Wenn Sie nur Ihren aktuellsten Tweet bewerben möchten, können Sie stattdessen die Vorlage 'Latest Tweet' auswählen.

Ich werde die Vorlage „Standard“ für dieses Tutorial verwenden, aber Sie können jede beliebige Vorlage wählen.

Auswahl einer Vorlage für einen eingebetteten Twitter-Feed

Nachdem Sie Ihre Entscheidung getroffen haben, klicken Sie auf „Weiter“.

Smash Balloon zeigt nun eine Vorschau des Social-Media-Feeds an, bereit zur Anpassung.

Der Smash Balloon Twitter-Feed-Editor
Schritt 3: Passen Sie Ihren WordPress Twitter Feed an

Sind Sie mit dem Aussehen der Vorlage nicht zufrieden? Um sie zu ändern, wählen Sie einfach im linken Menü „Vorlage“ aus.

Sie können dann auf die Schaltfläche „Ändern“ klicken.

Auswahl einer neuen Vorlage für einen Social-Media-Feed

Dies öffnet ein Popup, in dem Sie ein neues Layout auswählen können.

Wählen Sie einfach eine neue Vorlage aus und klicken Sie dann auf „Aktualisieren“.

Professionell gestaltete Twitter-Vorlagen von Smash Balloon

Wenn das erledigt ist, müssen Sie auf den Link „Anpassen“ klicken.

Dies bringt Sie zurück zu den Haupt-Smash Balloon-Einstellungen.

Zurück zum Hauptbildschirm der Smash Balloon-Einstellungen

Die nächste Option im Menü auf der linken Seite ist 'Feed Layout', klicken Sie also darauf.

Hier können Sie die Höhe des Twitter-Feeds und die Anzahl der Tweets ändern, die der Besucher zunächst sieht. Sie können auch zwischen einem Raster-, Masonry- oder Karussell-Layout wechseln.

Anpassen des Layouts des Twitter-Feeds

Während Sie Änderungen vornehmen, wird die Vorschau automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Abhängig vom verwendeten Layout können Sie möglicherweise ändern, wie viele Spalten Smash Balloon auf Desktop-, Tablet- und Mobilgeräten anzeigt.

Smartphones und Tablets haben typischerweise kleinere Bildschirme und weniger Rechenleistung, daher möchten Sie möglicherweise weniger Spalten auf Mobilgeräten anzeigen. Dies kann Ihnen helfen, Ihre Website mobilfreundlich zu halten.

Um dies geräteabhängig anzupassen, verwenden Sie einfach die Dropdown-Menüs im Abschnitt „Spalten“.

Ändern der Anzahl der Spalten in einem eingebetteten Social-Media-Layout

Wenn Sie mit dem Layout des Feeds zufrieden sind, klicken Sie erneut auf den Link „Anpassen“, um zum Hauptbildschirm der Einstellungen zurückzukehren.

Hier können Sie auf 'Farbschema' klicken.

Ändern des Farbschemas passend zu Ihrem WordPress-Theme

Standardmäßig verwendet Smash Balloon die Farben, die von Ihrem WordPress-Theme übernommen werden, aber Sie können stattdessen zu einem „Light“- oder „Dark“-Farbschema wechseln.

Eine weitere Option ist, Ihr eigenes Farbschema zu erstellen, indem Sie „Benutzerdefiniert“ auswählen und dann die Steuerelemente verwenden, um die Hintergrundfarbe, die Textfarbe und mehr zu ändern.

Hinzufügen benutzerdefinierter Farben zu einem eingebetteten Social-Media-Feed

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie erneut auf den Link „Anpassen“. Zurück auf dem Hauptbildschirm der Einstellungen müssen Sie auf „Kopfzeile“ klicken.

Standardmäßig fügt Smash Balloon einen „Standard“-Header zum Feed hinzu, der einen „Folgen“-Button und Ihre Twitter-Bio anzeigt, falls verfügbar.

Wenn Sie die Twitter-Bio ausblenden möchten, klicken Sie auf den Schalter 'Bio anzeigen', um ihn zu deaktivieren.

Ausblenden der Twitter-Bio in Ihrem eingebetteten Social-Media-Feed

Eine andere Option ist die Auswahl von 'Text', wodurch dem Feed eine Kopfzeile 'Wir sind auf Twitter' hinzugefügt wird.

Sie können dies durch Ihre eigene Nachricht ersetzen, indem Sie sie in das Feld 'Text' eingeben.

Hinzufügen einer Kopfzeile zu einer WordPress-Website mit Smash Balloon

Wenn Sie mit der Nachricht zufrieden sind, können Sie die Größe und Farbe des Headers ändern.

Kehren Sie danach zum Hauptbildschirm der Smash Balloon-Einstellungen zurück und wählen Sie „Tweets“. Hier können Sie zwischen „Tweet-Stil“ und „Einzelne Elemente bearbeiten“ wählen.

Anpassen, wie einzelne Tweets in WordPress aussehen

Wenn Sie „Tweet-Stil“ auswählen, können Sie zwischen umrandeten und normalen Layouts wählen.

Wenn Sie 'Boxed' wählen, können Sie für jeden Tweet eine farbige Hintergrundfarbe erstellen. Sie können auch den Radius des Rahmens vergrößern, um abgerundete Ecken zu erstellen oder einen Schatten hinzufügen.

Hinzufügen von Schatten zu Tweets

Wenn Sie „Regulär“ wählen, können Sie die Dicke und Farbe der Linie ändern, die Ihre verschiedenen Social-Media-Beiträge trennt.

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie einfach auf 'Tweets'.

Hinzufügen verschiedener Stile zu Twitter-Retweet-Buttons

Dies bringt Sie zurück zum vorherigen Bildschirm.

Diesmal können Sie auf 'Individuelle Elemente bearbeiten' klicken.

Anpassen der Retweet-Buttons in einem eingebetteten Twitter-Feed

Sie sehen nun alle Inhalte, die Twitter Feed Pro in jedem Tweet enthält, wie z. B. den Autor, den Tweet-Text, das Twitter-Logo und mehr.

Um so viele Retweets wie möglich zu erhalten, ist es eine gute Idee, das Retweet-Symbol hervorzuheben. Klicken Sie dazu auf den Pfeil neben „Tweet-Aktionen“.

Anpassen des Retweet-Buttons in einem Twitter-Feed

Hier können Sie die Tweet-Aktionen mit dem Dropdown-Menü „Größe“ vergrößern und die Farbe ändern.

Beachten Sie einfach, dass Smash Balloon diese Änderungen auf alle Tweet-Aktionen anwendet und nicht nur auf das „Retweet“-Symbol.

Einen benutzerdefinierten Retweet-Button mit Smash Balloon zu WordPress hinzufügen

Wenn Sie mit dem Aussehen der Tweet-Aktionen zufrieden sind, klicken Sie einfach auf den Text „Elemente“.

Dies bringt Sie zurück zum vorherigen Bildschirm.

Bearbeiten einzelner Elemente innerhalb eines Tweets

Wiederholen Sie einfach diesen Vorgang, um andere einzelne Elemente anzupassen.

Sie können ein Element auch ausblenden, indem Sie das Kontrollkästchen deaktivieren.

Inhalte aus einzelnen Tweets in WordPress entfernen

Das Ausblenden unnötiger Inhalte ist ein weiterer Trick, der die Retweet-Aktion hervorheben kann.

Wenn Sie mit dem Aussehen der Tweets zufrieden sind, können Sie zum Hauptbildschirm der Smash Balloon-Einstellungen zurückkehren und „Mehr laden“-Schaltfläche auswählen.

Erstellen eines „Mehr laden“-Buttons mit Smash Balloon

Da es sich um einen so wichtigen Button handelt, möchten Sie ihn vielleicht anpassen, indem Sie seine Hintergrundfarbe, den Hover-Zustand, die Beschriftung und mehr ändern, um zum Design Ihrer Website zu passen.

Sie können den Standardtext „Mehr laden“ auch durch Ihre eigene Nachricht ersetzen, indem Sie ihn in das Feld „Text“ eingeben.

Gestalten der Schaltfläche „Mehr laden“ in einem Tweet-Stream

Eine weitere Option ist die Aktivierung eines unendlichen Scrollens, sodass neue Tweets automatisch erscheinen, wenn Besucher das Ende des Feeds erreichen. Dies ermutigt Besucher, mehr Ihrer Tweets zu erkunden und kann Ihnen einige zusätzliche Retweets einbringen.

Um diese Funktion zu aktivieren, klicken Sie einfach auf den Schieberegler 'Unendliches Scrollen', sodass er von Grau (deaktiviert) auf Blau (aktiviert) wechselt.

Unendliches Scrollen zu Ihrem WordPress-Blog oder Ihrer Website hinzufügen

Sie können auch den 'Trigger Distance' ändern, der Smash Balloon mitteilt, wann neue Tweets geladen werden sollen. Die Standardeinstellungen sollten jedoch für die meisten WordPress-Websites gut funktionieren.

Danach ist die letzte Option auf dem Hauptbildschirm der Smash Balloon-Einstellungen „Lightbox“.

Anpassen der Lightbox-Funktion auf Ihrer WordPress-Website

Standardmäßig ermöglicht Twitter Feed Pro Besuchern, die Bilder und Videos des Feeds in einem Lightbox-Popup zu durchsuchen.

Dies kann Ihnen einige zusätzliche Retweets einbringen, da Besucher die Bilder des Feeds genauer betrachten und Ihre Videos ansehen können, ohne die Website zu verlassen.

Ein Beispiel für ein Lightbox-Popup

In diesem Sinne empfehle ich, die Lightbox aktiviert zu lassen.

Wenn Sie diese Funktion jedoch deaktivieren möchten, klicken Sie einfach auf den blauen Umschalter „Enable“, sodass er grau wird.

Deaktivieren der Lightbox-Funktion auf Ihrer WordPress-Website

Wenn Sie mit dem Aussehen des Twitter-Feeds zufrieden sind, vergessen Sie nicht, auf 'Speichern' zu klicken. Danach können Sie den Twitter-Feed und die Retweet-Buttons auf Ihrer WordPress-Website einbetten.

Schritt 4: Fügen Sie Ihren Twitter-Feed zu WordPress hinzu

Sie können den Twitter-Feed mit einem Shortcode oder dem Twitter-Feed-Block zu Ihrer Website hinzufügen. Da dies die einfachste Methode ist, sehen wir uns zuerst an, wie Sie den Feed mit dem Smash Balloon-Block zu jeder Seite oder jedem Beitrag hinzufügen können.

Wenn Sie mehr als einen Feed erstellt haben, müssen Sie den Code für den Feed finden, den Sie einbetten möchten.

Um diese Informationen zu erhalten, gehen Sie zu Twitter Feeds » Alle Feeds und kopieren Sie den Code in der Spalte „Shortcode“. Sie müssen diesen Code zu Ihrer Website hinzufügen, also notieren Sie ihn sich.

Im folgenden Bild müssen Sie [custom-twitter-feeds feed=2] verwenden

Hinzufügen eines Twitter-Retweet-Buttons zu Ihrer Website mit Shortcode

Öffnen Sie danach einfach die Seite oder den Beitrag, auf dem Sie den Twitter-Feed einbetten möchten. Klicken Sie dann auf das „+“-Symbol, um einen neuen Block hinzuzufügen, und beginnen Sie mit der Eingabe von „Twitter Feed“.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zum Blogbeitrag hinzuzufügen.

Hinzufügen eines Twitter-Feeds mit dem Twitter-Feed-WordPress-Block

Der Block zeigt standardmäßig einen Ihrer Twitter-Feeds an. Wenn Sie einen anderen Feed verwenden möchten, suchen Sie im rechten Menü nach „Shortcode-Einstellungen“.

Fügen Sie hier einfach den Shortcode hinzu und klicken Sie dann auf „Änderungen anwenden“.

Anzeigen eines anderen Twitter-Feeds mit Shortcode

Der Block zeigt nun Ihren Twitter-Feed an, und Sie können den Beitrag einfach veröffentlichen oder aktualisieren, um ihn auf Ihrer Website live zu schalten.

Eine weitere Option ist, den Feed zu jedem Widget-fähigen Bereich oder einem website-weiten Designelement wie der Seitenleiste hinzuzufügen. Dies ermöglicht es Besuchern, Ihre neuesten Beiträge von jeder Seite Ihrer Website aus zu retweeten.

Wenn Sie ein Block-Theme verwenden, können Sie den Twitter-Feed-Block direkt zu einer Ihrer Vorlagen oder Vorlagenteile im Full Site Editor hinzufügen, indem Sie den gleichen Ansatz verwenden, den ich für eine Seite oder einen Beitrag gezeigt habe.

Auswahl der Seitenvorlage mit Seitenleiste im Full-Site-Editor

Detaillierte Anweisungen dazu finden Sie in unserem Leitfaden für Anfänger zur vollständigen Website-Bearbeitung in WordPress.

Wenn Sie kein Block-Theme verwenden, müssen Sie im WordPress-Dashboard zu Darstellung » Widgets gehen und dann auf die blaue Schaltfläche „+“ klicken.

Hinzufügen eines Twitter-Feeds zu einem widget-fähigen Bereich

Sobald Sie das getan haben, müssen Sie 'Twitter Feed' eingeben, um das richtige Widget zu finden.

Ziehen Sie es dann einfach in den Bereich, in dem Sie den Feed und die Retweet-Schaltflächen anzeigen möchten.

Retweet-Buttons zu jedem Widget-fähigen Bereich hinzufügen

Das Widget zeigt einen der Feeds an, die Sie mit Smash Balloon erstellt haben.

Um stattdessen einen anderen Twitter-Feed anzuzeigen, geben Sie den Code des Feeds in das Feld „Shortcode-Einstellungen“ ein und klicken Sie dann auf „Änderungen übernehmen“.

Hinzufügen eines Twitter-Feeds und von Retweet-Buttons mit Shortcode

Sie können nun auf die Schaltfläche „Aktualisieren“ klicken, um das Widget live zu schalten. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Hinzufügen und Verwenden von Widgets in WordPress.

Schließlich können Sie den Feed und die Retweet-Buttons mit einem Shortcode auf jeder Seite, jedem Beitrag oder in jedem Widget-fähigen Bereich einbetten.

Gehen Sie einfach zu Twitter Feed » Alle Feeds und kopieren Sie den Code in der Spalte „Shortcode“. Sie können den Shortcode jetzt zu jedem widget-fähigen Bereich Ihrer Website hinzufügen.

Weitere Informationen finden Sie in unserem detaillierten Leitfaden zum Einfügen eines Shortcodes in WordPress.

Erfahren Sie mehr Wege, Twitter in WordPress zu nutzen

Ich hoffe, dieser Artikel hat Ihnen geholfen, Twitter-Share- und Retweet-Buttons in WordPress hinzuzufügen.

Möchten Sie das Beste aus Ihrem Twitter (X)-Profil machen, um Ihre WordPress-Website zu bewerben? Oder möchten Sie mehr Twitter-Inhalte zu Ihrer Website hinzufügen?

Schauen Sie sich diese Anleitungen unten an:

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

44 CommentsLeave a Reply

  1. Ich kann nur Buttons für Twitter und Facebook empfehlen. Sie erhöhen Ihre Reichweite und möglicherweise Backlinks. Zusätzlich ist die Erstellung von Profilen für Ihre Website, auf denen Sie gefunden werden und weitere Informationen bereitstellen können, eine großartige Möglichkeit, sich bekannt zu machen. Ich habe es auch auf meiner Website implementiert; ich würde mir nur etwas Statistik wünschen. Wie oft hat jemand auf den Button geklickt und einen Tweet abgesetzt, und für welchen Artikel, damit ich einen besseren Überblick habe.

      • Ich verstehe also gut, dass etwas Ähnliches nicht mit Google Analytics gemacht werden kann, und ein externes Plugin wie Monster Sight dafür benötigt wird? Ich frage, weil ich versuche, so wenige Plugins wie möglich zu verwenden und sie für so viele Dinge wie möglich zu nutzen. Deshalb dachte ich, ob ich etwas Ähnliches zum Beispiel mit Google Analytics lösen könnte.

        • It is possible but you would need to manually set up the markup in Google Analytics to add to your button which is why we recommend the plugin :)

  2. Das Hinzufügen von Twitter-Share- und Retweet-Buttons kann Ihre Präsenz in den sozialen Medien tatsächlich steigern. Eine Sache, die Sie berücksichtigen sollten, ist die Platzierung dieser Schaltflächen für maximale Interaktion. Es ist vorteilhaft, A/B-Tests durchzuführen, um die effektivsten Positionen auf Ihrer Website zu ermitteln. Stellen Sie außerdem sicher, dass die Schaltflächen gut sichtbar, aber nicht aufdringlich für die Benutzererfahrung sind.

  3. Dieser Beitrag hat mir die Augen geöffnet.
    Ich war zögerlich, ein Twitter-Konto zu erstellen, weil ich glaube, dass ich im Vergleich zu anderen sozialen Seiten, die ich gerne nutze, keine Zeit zum Engagement haben werde.
    Aber jetzt denke ich, dass ich es nach dem Lesen dieses Artikels versuchen werde.

  4. Danke für die schnelle Antwort. Ich bin kein Programmierer, wissen Sie, wo ich ein Stück Code bekommen und einfügen kann? Bezüglich des Zählers denke ich, dass Twitter es beim Testen nicht als legitim ansieht, wenn ich den Tweet-Button verwende, um auf meine eigene Seite zu posten? Ich habe jedoch einen anderen Twitter-Account, zu dem ich getwittert habe, und es hat sich nicht erhöht. Gibt es eine Möglichkeit, es zu testen, um zu sehen, ob es funktioniert? Woher weiß ich, ob es ein legitimer Tweet ist oder nicht? Ich bin überrascht, dass Twitter im Vergleich zu FB schwierig zu sein scheint @wpbeginner

  5. @RandyDueck Twitter verwendet den neuen t.co Shortener, der Links nur für seinen Algorithmus kürzt, um sicherzustellen, dass es kein SPAM ist... dann fügt er die ungekürzte Version ein... Sie müssen eine andere API verwenden und ein wenig benutzerdefinierten Code schreiben, um benutzerdefinierte Kurz-URLs dort zum Laufen zu bringen... Was die Anzahl betrifft, so zeigt der Twitter-Button nur die Anzahl an, die er für legitim hält.

  6. Danke für diesen großartigen kleinen Code-Schnipsel. Ich möchte, dass der Twitter-Button im Beitrags-Excerpt und unter dem Titel der Single-Post-Seite ist. Der Code funktioniert gut. Gibt den richtigen Titel usw. an. Er kürzt jedoch den Link nicht, und nach dem Tweeten erhöht sich die Tweet-Anzahl nicht. Die Website ist thinkactloveloseweight.com. Vielen Dank für Ihre Antwort.

  7. Gretchen – alle Links sollten auf Ihre Permalink zurückverweisen – Ihr Permalink sollte also die Quell-URL sein, nicht Ihr Kurzlink … ergibt das Sinn? Sie können den URL-Shortener noch nicht ändern, wenn Sie den offiziellen Tweet-Button verwenden (ich habe es untersucht, weil ich einen Kurzlink haben wollte).

    Füge dies so lange nach der ursprünglichen Veröffentlichung hinzu, weil andere vielleicht diese Frage haben!

  8. Ich dachte, ich würde darauf hinweisen, dass einige Themes den Wert für den Titel und die Post-URL ändern – das bedeutet, dass der Code mit Ihrem Code in Anführungszeichen getwittert wird. Ich habe dazu ein paar Fragen auf Twitter bekommen. Ich habe einfach die verschiedenen Variablen gefunden, die für meine Website funktionierten, und sie ersetzt. Also ...

    Zeile drei: data-url=””

    wurde in %permalink% geändert – was der Ersatz meines Themes war

    Zeile fünf: data-text=““

    wurde in %post-title% geändert – wieder die Ersetzung meines Themes

    Ohne dein Tutorial hätte ich das nicht geschafft! Vielen Dank! Du bist jetzt meine Anlaufstelle!

  9. @wpbeginner @idowebmarketing Okay, es gibt zwei Stellen für diesen Code, und ich hatte nur eine aktualisiert!

  10. @idowebmarketing @wpbeginner data-via ist das Einzige, was geändert werden muss, um die Änderung vorzunehmen.

  11. @wpbeginner @idowebmarketing Danke – ich habe gestern neue Blogbeiträge zu zwei meiner Blogs hinzugefügt, nachdem ich den aktualisierten Code implementiert hatte, aber trotzdem wurde wpbeginner auf beiden empfohlen. Muss noch ein Code-Abschnitt aktualisiert werden?

  12. @idowebmarketing Bei alten Beiträgen dauert es eine Weile, bis Twitter das herausgefunden hat. Bei neuen Beiträgen sollte es in Ordnung sein.

  13. Mein Blog empfiehlt immer noch wpbeginner und ich habe den Code aktualisiert. Hier ist der bearbeitete Code:

    <script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script> <a href=”http://twitter.com/share” data-url=”<?php the_permalink(); ?>” data-via=”idowebmarketing” data-text=”<?php the_title(); ?>” data-related=”imnewsdaily:Daily updates from the internet marketing industry” data-count=”vertical”>Tweet</a>Haben Sie eine Idee, was ich falsch mache?

  14. Vielen Dank für diesen Beitrag!! Ich versuche jetzt seit etwa drei Tagen, dieses Problem zu lösen...

    Haben Sie den gleichen Code für den Facebook-Like-Button?

  15. Ich verwende die von WordPress generierten Kurzlinks, wenn ich über meine Beiträge twittere, und hatte Probleme damit, dass diese immer in meiner Tweet-Anzahl angezeigt werden. Der letzte Teil des Codes auf dieser Seite scheint zu funktionieren, obwohl, wenn Sie auf die Suchergebnisse in Twitter klicken, nur die Links zum eigentlichen Permalink angezeigt werden, nicht auch die Links zum Kurzlink: http://bavotasan.com/tutorials/adding-tweet-button-wordpress/ Es ist schade, dass WordPress und Twitter diese nicht irgendwie als denselben Link zählen...

  16. Ich kann JavaScript im Header hinzufügen, aber das wird die YSlow-Bewertung verschlechtern, derzeit ist es eine B-Bewertung. Ich habe hart gearbeitet, um von D auf B zu kommen. Ich habe ein Ticket beim Twitter-Technikteam eröffnet, sie haben mir nur eine E-Mail mit einigen Links geschickt, die mir helfen könnten, meine Antwort zu finden, oder ein neues Ticket eröffnet, wenn nicht. Das ist so dumm. Die Twitter-Leute denken, wir hätten andere Antworten nicht gesehen! Das ist so frustrierend. LinkedIn macht sich ziemlich gut, ihre Share-Schaltfläche aktualisiert sich innerhalb einer Minute.

  17. Auf meiner oben genannten Website habe ich Ihren Code verwendet, index.php, single.php und andere PHP-Dateien innerhalb der Schleife.
    Ich kann auf den Twitter-Tweet-Button klicken und er zeigt die Anzahl an, aber wenn ich die Seite neu lade, verschwindet dieser Wert. Jetzt, nach vielleicht 1 Stunde, wenn ich die Artikelseite überprüfe, sehe ich den neuen Zählwert. Z.B. bevor ich auf den Button geklickt habe, war es 0, nach fast 1 Stunde zeigt es 1 an. Meine Frage ist, warum es 1 Stunde gedauert hat, bis es aktualisiert wurde. Es sollte doch sofort aktualisiert werden?

    Jetzt auf der Titelseite, wo index.php ist, habe ich den Code verwendet und ihn erneut in single.php verwendet. Der Benutzer klickt auf einen Artikel von index.php und kommt zur Artikelseite, die in single.php ist. Das Problem: Der Zählwert synchronisiert sich nicht vom index.php zum single.php. Ich überprüfe es später, es ist aber erst nach fast 1 Stunde. Es synchronisiert sich also erst nach fast 1 Stunde.

    Warum? Irgendeine Idee.

    Kürzlich habe ich die .htaccess-Datei geändert, um Expire-Header hinzuzufügen, um etwas Geschwindigkeit zu erzielen. Das bekomme ich auch, aber heute habe ich diese Zeile entfernt und bin zur Standard-.htaccess-Datei zurückgekehrt. Glauben Sie, dass es etwas mit .htaccess zu tun hat, wo das Caching nach Stunden, Minuten, Sekunden, Monaten oder sogar Jahren gesteuert wird. Selbst wenn ich das Caching aktiviere, kann das Twitter-JavaScript, das vom Twitter-Server stammt, das Caching nicht erzwingen.

    Jetzt bin ich mir nicht sicher, wo ich nach dem sofortigen Zählwert suchen soll. Der Kunde möchte die sofortige Zählung sehen und mit der Artikelseite synchronisieren.

    Bitte besuchen Sie http://www.bizgene.com, um sich ein Bild zu machen.

    Jeder Hinweis oder jede Idee wäre eine große Hilfe.

    Ich habe folgenden Code für den Tweet-Zähl-Button verwendet:

    <a href="http://twitter.com/share&quot; class="twitter-share-button" data-url="” data-via=”bizgene” data-text=”” data-count=”horizontal”>Twittern

    Zakir

    • Zakir, wir denken, das ist ein häufiger Fehler mit der Twitter-API. Wir bemerken ähnliches mit unserem Tweetmeme-Button bezüglich der Zählung. Die Synchronisierung der Zählung erfolgt fast nach 20 – 30 Minuten. Vielleicht hilft es, den Skriptteil in Ihre Kopfzeilen einzufügen und dann den a href-Teil dort anzuzeigen, wo Sie den Button anzeigen möchten.

      Admin

  18. Ich verstehe es nicht. Die Verwendung des Daten-URL-Links/Buttons oben ergibt nur einen t.co-Link und nichts anderes. Hat sich dort etwas geändert oder warum werden die Werte nicht ausgegeben?

    • Beachten Sie, dass Sie, um the_title(); oder the_permalink(); zu erhalten, diesen Code innerhalb der Schleife platzieren müssen. Wenn Sie ihn außerhalb einer Schleife platzieren, wird er keinen gewünschten Wert liefern.

      Admin

  19. ARGH. Das habe ich versucht, aber ich ersetze die Größer-als/Kleiner-als-Symbole durch Klammern, damit es hoffentlich angezeigt wird:

    [?php the_title(); ?] #[?php the_category(‘,’); ?]

  20. Ähm… der letzte Kommentar zeigt das PHP nicht an… Entschuldigung. Das habe ich versucht: (hoffentlich funktioniert das)
    #

  21. Für DataText möchte ich den Titel und die Kategorie des Beitrags als Hashtag hinzufügen. Ich kann nicht herausfinden, wie das geht, da ich mit PHP nicht sehr vertraut bin.

    Ich habe versucht: >>> data-text=” #”

    aber das hat nicht funktioniert. Irgendeine Idee, wie man das machen kann?

  22. Nette Anleitung. Endlich habe ich diesen Button auf meinem Blog implementiert. Es wäre schön, wenn Sie eine Anleitung zur Anpassung machen könnten. Ich hasse die Standardfarbe. : |

  23. Es hat wenig Sinn, jede Einstellung auszufüllen, die meisten funktionieren auch ohne Einstellung einwandfrei und wählen Dinge wie die aktuelle URL und den Seitentitel standardmäßig aus.

    Nicht standardmäßige Tag-Attribute werden nicht validiert (zumindest nicht als XHTML Transitional nach meiner bisherigen Erfahrung). Query-Argumente sehen vielleicht nicht so ordentlich aus, sind aber etablierter und zuverlässiger.

  24. Is there any chance I don’t have “The Loop” because I keep looking for this (or even a part of it) in my index file and it’s not there. Gah, I was hoping this would be easy! :-(

    • Das hängt wirklich davon ab, welches Theme Sie verwenden. Jedes Theme muss die Schleife haben, um die neuesten Beiträge anzuzeigen. Sie können Ottos Plugin ausprobieren.

      Admin

  25. Ich hatte früher Topsy-Buttons... wollte auf den offiziellen Button umsteigen, aber... Es scheint, dass diese Version ein Problem hat, die tatsächliche Anzahl von Tweets zu erkennen. Ich hatte einen Beitrag mit 52 Tweets und jetzt zeigt er 8 an.

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.