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 den offiziellen Twitter-Follow-Button in WordPress hinzu

Twitter erweitert seine Funktionalitäten auf die gesamte World Wide Web. Alles begann mit dem offiziellen Tweet-Button, dann der Twitter Anywhere Platform und kürzlich der neue offizielle Twitter-Follow-Button. Sie fragen sich wahrscheinlich, was zum Teufel dieser Twitter-Follow-Button ist? Was ist der Unterschied zwischen dem Twitter-Follow-Button und dem Smart-Follow-Button? Keine Sorge, in diesem Artikel werden wir behandeln, was der Twitter-Follow-Button ist und wie Sie ihn auf Ihrer WordPress-Seite hinzufügen können.

Was ist der Twitter-Follow-Button

Der Twitter-Follow-Button ist ein kleines Widget, mit dem Benutzer Ihrem Twitter-Account (oder jedem anderen Twitter-Account) von jeder Website aus einfach folgen können. Der Follow-Button verwendet dasselbe Implementierungsmodell wie der offizielle Tweet-Button und ist sehr einfach zu integrieren. Sie können die Demo des Follow-Buttons in der oberen linken Ecke des folgenden Bildes sehen. Wenn Sie auf den Follow-Button klicken, öffnet sich ein Fenster mit weiteren Informationen über den Benutzer.

Twitter Follow Button

Sie fragen sich wahrscheinlich, wie es sich vom Smart Follow-Button unten unterscheidet?

Nun, der Smart Follow-Button erfordert, dass Sie die gesamte Twitter Anywhere-Integration durchführen. Außerdem können Sie Ihre Follower-Anzahl nicht anzeigen oder Anpassungen vornehmen. Der Twitter-Follow-Button hingegen lässt Sie die Anzahl anzeigen und ist sehr einfach zu integrieren. Sehen Sie sich das Live-Beispiel unten an (vergessen Sie nicht, auf Folgen zu klicken, um zu sehen, was es tut):

So fügen Sie den offiziellen Twitter-Follow-Button in WordPress hinzu

Sie können zur Follow Button-Seite gehen und einen Code generieren. Oder Sie können einfach den folgenden Code kopieren:

<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>

PS. Stellen Sie sicher, dass Sie den Benutzernamen durch Ihren eigenen ersetzen.

Wenn Sie den offiziellen Tweet-Button verwenden, müssen Sie das Skript nicht zweimal einfügen. Ihr Code sieht dann so aus:

<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>

Jetzt können Sie den Code überall in Ihrem WordPress-Theme einfügen. Die meisten Leute werden solchen Code in ihre sidebar.php-Datei einfügen. Wenn Sie sich jedoch nicht wohl dabei fühlen, eine Theme-Datei zu bearbeiten, können Sie auch WordPress-Theme-Widgets verwenden. Alle guten Themes verfügen über widget-bereite Seitenleisten. Sie müssten also nur zum Tab "Erscheinungsbild" » "Widgets" gehen. Fügen Sie dann ein Text-Widget zu Ihrer entsprechenden Seitenleiste hinzu. Fügen Sie schließlich den obigen Code ein, und Sie sind fertig. Sehen Sie sich das folgende Screenshot-Beispiel an:

Twitter Follow Button Widget

Es gibt wirklich keinen Grund, ein Plugin hinzuzufügen, um etwas so Einfaches zu tun.

Erweiterte Anpassung

Dieser Abschnitt richtet sich an Designer und Entwickler, die diesen Button weiter anpassen möchten, um ihn an das Farbschema ihrer Website usw. anzupassen. Twitter ermöglicht es Ihnen, die Farbe des Buttons, die Textfarbe, die Linkfarbe, die Sprache, das Widget und die Ausrichtung des Plugins anzupassen.

Verfügbare Variablen in der JavaScript-Version, die wir verwenden:

  • data-show-count (true oder false)
  • data-button (blau oder grau)
  • data-text-color (Hex-Code)
  • data-link-color (Hex-Code)
  • data-lang (en, fr, de, es) – verwendet den zweibuchstabigen ISO-639-1 Sprachcode
  • data-width – (300px)
  • data-align – (right)

Wenn Sie es im Code angeben möchten, würde es ungefähr so aussehen:

<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>

Ressourcen:

Dokumentation zum Folgen-Button
Folgen-Button-Generator

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

30 CommentsLeave a Reply

  1. Hallo,

    Ich habe versucht, die Breite mit der Option „data-width=300px“ zu erhöhen, aber es funktioniert nicht.

  2. SUPER! Ich wollte noch kein weiteres Plugin installieren und das hat wie eine Eins funktioniert! Ich weiß, es ist ein alter Beitrag, aber hey, Sie haben es getroffen!!!

    Vielen Dank!

  3. Hallo, danke für die Info. Ich habe das zu meiner HTML-Seite hinzugefügt, aber der Link wird nur mit Text (d. h. meinem Twitter-Namen) und nicht mit dem offiziellen Twitter-Button angezeigt. Irgendwelche Ratschläge? Vielen Dank im Voraus.

  4. Hallo
    was ist, wenn ich mehrere Autoren auf meinem Blog habe und ich möchte, dass der Twitter-Follow-Button für einzelne Autoren für die von ihnen eingereichten Beiträge angezeigt wird?

  5. Das ist großartig! Danke.

    Ich habe meinen Blog von Grund auf neu aufgebaut, ohne vorherige Kenntnisse, und Ressourcen wie Ihre waren auf dem Weg von unschätzbarem Wert.

    Ich habe jedoch eine Frage: Gibt es eine Möglichkeit, den Zähler auszublenden oder zu entfernen? Er wird teilweise von einem Bild verdeckt, daher dachte ich, ich entferne ihn einfach. Ich habe versucht, das offensichtliche Code-Stück zu löschen, aber es ist immer noch da.

  6. Ich habe den Button erfolgreich gepostet und er verlinkt und alles, aber ich weiß nicht, wie ich die Position ändern kann. Ich habe ihn in meinen Header eingefügt, möchte aber, dass der Button direkt neben meinem FB-Icon erscheint, und im Moment wird er von einem anderen Bild im Header halb verdeckt. Vorschläge??

      • Für alle anderen, die dieses Problem haben –

        Ich hatte den auf dieser Seite bereitgestellten Link in meinen Header-Bereich eingefügt. Um den Speicherort zu bearbeiten, müssen Sie zum Stilbereich gehen. Ich habe diesen Code verwendet:

        .twitter-follow-button { display: block; position: absolute; top: 60px; right: -170px; width: 32px; height: 32px; }

  7. Ich habe ihn in ein Text-Widget installiert, und es sieht auf meinem Blog gut aus, aber ich verstehe nicht, wie er funktioniert. Was passiert, wenn ein Benutzer darauf klickt? Woher wissen WordPress oder Twitter, wer der potenzielle Abonnent ist?

    Wenn ich versuche, darauf zu klicken, erscheint eine Pop-up-Nachricht, die etwa besagt: „Sie sind jetzt für @mein_twitter_handle abonniert.“ Die Nachricht ist dieselbe, unabhängig davon, ob ich auf der Website angemeldet bin oder nicht. Wie wird also meine Identität erkannt?

  8. Hallo,

    Ich habe die Anweisungen befolgt und es hat funktioniert – der Button erscheint und wenn ich ihn getestet habe, verlinkt er zu meinem Twitter. Das Widget zeigt jedoch auch den HTML-Code unter dem Follow-Button auf meinem Blog an. Gibt es eine Möglichkeit, den Code auszublenden und nur den Button anzuzeigen?

    Danke

  9. Okay, das hat leider nicht funktioniert. Gibt es noch andere Stellen, an denen ich Hilfe bekommen kann?

      • Die obigen Anweisungen haben überhaupt nicht geholfen – aber glücklicherweise habe ich einen anderen Weg über die Plugins gefunden (nach einigen *Stunden*, die ich nie zurückbekomme). Sie müssen bedenken, dass dies „WPBeginner“ heißt – Betonung auf „Beginner“, und jemandem zu sagen, er solle Code nach Belieben posten, ohne *alle* Schritte darzulegen: tu dies zuerst, klicke dann darauf, was dir dies zeigt usw. (einige von uns „Anfängern“ sind schließlich digitale Diplodocus, wissen Sie), ist nicht hilfreich.

        Auf jeden Fall habe ich es geschafft – aber *nicht*, indem ich die obigen Anweisungen befolgt habe.

        • Hallo David,

          Der Grund, warum wir sagen, fügen Sie es überall in Ihrem Theme ein, ist, dass wir nicht wissen, wo Sie es hinzufügen möchten. Es könnte im Header, in der Seitenleiste, im Footer, nach jedem Beitrag usw. sein. Das sind alles verschiedene Orte. Darüber hinaus haben wir erwähnt, dass Sie zu Darstellung » Widgets gehen und es im Text-Widget hinzufügen können. Sie können das Text-Widget in den entsprechenden Widget-Bereichen platzieren (unterstützt von Ihrem Theme). Einige haben Widget-Bereiche im Footer, aber die meisten haben sie in der Seitenleiste.

        • @ Redaktion sagte ~

          „Der Grund, warum wir sagen, fügen Sie es irgendwo in Ihr Theme ein, ist, weil wir nicht wissen, wo Sie es hinzufügen möchten. Es könnte im Header, in der Seitenleiste, im Footer, nach jedem Beitrag usw. sein. Das sind alles verschiedene Orte.“

          Mein Punkt war, dass die Anweisungen hätten lauten können: „Wenn Sie es in Ihre Seitenleiste einfügen möchten, gehen Sie *hierhin*, klicken Sie auf *hier*, was Ihnen *dies* zeigt, und dann fügen Sie den Text *dort* ein. Wenn Sie möchten, dass es am Ende Ihres Beitrags erscheint, gehen Sie *hierhin*, klicken Sie auf *hier*, was Ihnen *dies* zeigt usw.“ Ich habe immer noch den Code, der den Button nicht erscheinen ließ, *irgendwo* auf meiner Dashboard-Seite eingefügt – aber die Götter wissen, wo er im Moment ist.

          Nochmals – einige von uns *sind* Anfänger hier – und digitale Diplodocus – und Anfänger brauchen manchmal eine sanfte, freundliche, *führende* Hand, um dorthin zu gelangen, wo wir hinwollen, n’est–ce pas?

        • Hallo David,

          Obwohl wir genau verstehen, was Sie sagen, ist es schwieriger als es klingt. Jedes WordPress-Theme ist anders codiert (allgemeines Theme, Child-Themes basierend auf verschiedenen Frameworks usw.). Darüber hinaus können wir nicht jeden einzelnen Ort abdecken, den sich ein menschliches Gehirn zum Anzeigen des Buttons ausdenken kann. Deshalb haben wir den grundlegendsten Ort abgedeckt (Darstellung > Widgets). Je nach Theme haben Sie Widgets für Ihre Seitenleiste, Ihren Header, Ihren Footer usw.

          Wir haben hier einen detaillierten Überblick über Widgets in unseren kostenlosen Videos: http://videos.wpbeginner.com/

  10. Ich habe es ausprobiert und Links zu meinem Twitter, aber als normaler Text... liegt das daran, dass ich einen WordPress.com-Blog habe?

    • Ich habe dasselbe Problem. Es verlinkt zu meinem Twitter, aber der Button wird nicht angezeigt. Irgendwelche Ideen, wie man das beheben kann?

  11. @wpbeginner Tatsächlich keines von beiden. Es ist eine WordPress-Einrichtung, die von CIX unter blog.cix.co.uk gehostet wird.
    Ich habe es jetzt zum Laufen gebracht, aber indem ich die „altmodischen“ Twitter-Buttons unter http://twitter.com/about/resources/buttons verwendet habe – weder die „Skript“-Form noch die Shortcode-Form funktionierten. Irgendwelche Ideen, warum das so ist?

  12. Danke dafür. Bei mir funktioniert es jedoch nicht. Wenn ich das Text-Widget speichere, wird das Skript-Element entfernt und ich habe nur noch einen Textlink in meiner Seitenleiste. Irgendwelche Ideen?

  13. schöne Ergänzung. Ich habe das Gefühl, meine Seite lädt sowieso schon zu langsam. Ich mache mir Sorgen, dass dies nur eine weitere Sache ist, die sie verlangsamt. Ich muss wirklich herausfinden, was die Ladegeschwindigkeit beeinträchtigt.

  14. Danke für den Tipp. Ich habe den Code von Twitter genommen und er sah gut aus (schlecht von mir, dass ich ihn nicht getestet habe). Neulich sagt mir mein Freund, er habe versucht, mir zu folgen, und bekam die Meldung „Benutzer existiert nicht“. Aus irgendeinem Grund wurde mein alter Handle im Code belassen... nur zur Info.

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.