So codieren Sie einen „Click to Tweet“-Button

Wenn Benutzer Ihre Inhalte online teilen, ist dies eine großartige Möglichkeit, Ihre Marke auszubauen. In diesem Tutorial behandeln wir alles, was Sie wissen müssen, um Ihrer Seite einen einfachen Link hinzuzufügen, damit Benutzer ihn direkt twittern können.

Während Instagram, Snapchat und andere „junge“ Social-Media-Plattformen das Internet erobern, bleibt Twitter immer noch einer der beliebtesten Marketingkanäle.

Es hat rund 326 Millionen aktive Benutzer pro Monat Das bedeutet, dass Ihre Zielgruppe es wahrscheinlich nutzt. Aus diesem Grund sollten Sie zumindest darüber nachdenken, es als Marketingkanal für Ihr Unternehmen zu nutzen. Wenn Sie Twitter als einen der wichtigsten Marketingkanäle nutzen, steigern Sie nicht nur die Bekanntheit Ihrer Marke, sondern können auch den Traffic auf Ihre Website steigern und dafür sorgen, dass Ihre Artikel viral gehen.

Wie kann dies erreicht werden? Nun, es ist eine ziemlich einfache Taktik, die einige der Top-Blogger anwenden. Die Idee dahinter ist, dass Sie in Ihrem Blog-Beitrag kurze Inhalte haben, die einprägsam sind und den Leuten gefallen. Diese Inhalte können dann problemlos getwittert werden. (Beispielsweise könnte es sich um ein Zitat von jemandem handeln, der in Ihrer Nische eine Autorität ist, oder um eine Statistik, die Ihrer Meinung nach wahrscheinlich von Ihren Besuchern geteilt wird.)

Lassen Sie mich Ihnen zeigen, wie Sie jedem Zitat in Ihrem Artikel automatisch Schaltflächen zum „Zum Twittern klicken“ hinzufügen können.

Bevor wir beginnen, möchte ich sagen, dass es sich um eine mittelschwere Technik handelt. Wenn Sie WordPress verwenden Sie können ein fertiges Plugin verwenden, das denselben Zweck erfüllt.

Erstellen von „Click to Tweet“-Buttons mit JavaScript

Gehen wir davon aus, dass wir diesen Artikel über Konferenzen mit der Aufschrift „Laut webdesignerdepot.com …“ in einen twitterbaren Block umwandeln wollen.

Lesen:  Die besten Semi-Smartphones des Jahres 2023

Vorausgesetzt, wir haben die folgende HTML-Struktur:

Ich gehe immer nur zu Marketingkonferenzen, um neue Leute kennenzulernen und mir ihre Erfahrungen anzuhören. Zu diesen Menschen zählen niemals die Redner, die im Allgemeinen in ihre eigene Welt vertieft sind und selten im altruistischen Sinne geben.

So würden wir einen Click-to-Tweet-Button erstellen:

Schritt 1

Wir müssen alles sammeln Und Elemente aus unserem Artikel, wenn das Dokument geladen wird:

document.addEventListener(“DOMContentLoaded”, function() { // Schritt 1. Alle Anführungszeichenelemente im Artikel abrufen const ArticleBody = document.getElementById(‘article’); const quotes = […articleBody.querySelectorAll(‘quote, blockquote’)];

Schritt 2

Erstellen Sie zusätzliche Variablen, um die aktuelle Seiten-URL, die tweetbare URL und eine Schaltfläche „Zum Tweeten klicken“ zu speichern:

let tweetableUrl = “”; let clickToTweetBtn = null; const currentPageUrl = window.location.href;

Schritt 3

Wir müssen alle Zitatelemente durchlaufen, die wir tweetbar machen möchten, und für jedes von ihnen eine „Click-to-Tweet-Schaltfläche“ anhängen:

quotes.forEach(function (quote) { // Eine tweetbare URL erstellen tweetableUrl = makeTweetableUrl( quote.innerText, currentPageUrl ); // Eine „Zum Tweeten klicken“-Schaltfläche mit entsprechenden Attributen erstellen clickToTweetBtn = document.createElement(“a”); clickToTweetBtn.innerText = “Click to Tweet”; clickToTweetBtn.setAttribute(“href”, tweetableUrl); clickToTweetBtn.onclick = onClickToTweet; // Schaltfläche zu jedem Blockquote hinzufügen quote.appendChild(clickToTweetBtn); }); });

Schritt 4

2 fehlende Funktionen hinzufügen: makeTweetableUrl, Dadurch wird eine tweetbare URL erstellt, und onClickToTweet Das fungiert als unser Ereignis-Listener und öffnet ein Fenster für den Tweet (sobald auf die Schaltfläche geklickt wird):

function makeTweetableUrl(text, pageUrl) { const tweetableText = “https://twitter.com/intent/tweet?url=” + pageUrl + “&text=” + encodeURIComponent(text); return tweetableText; } function onClickToTweet(e) { e.preventDefault(); window.open( e.target.getAttribute(“href”), “twitterwindow”, “height=450, width=550, toolbar=0, location=0, menubar=0, Directories=0,scrollbars=0” ); }

Hier funktioniert es auf CodePen.

Erstellen von „Click to Tweet“-Buttons mit jQuery

Lassen Sie mich Ihnen nun einen etwas anderen Weg zeigen, wie Sie dasselbe Ergebnis erzielen können, das Sie implementieren können, wenn Sie jQuery verwenden.

Hier ist der Code:

$(document).ready(function() { // Alle Zitatelemente im Artikel abrufen const ArticleBody = $(“#article”); const quotes = ArticleBody.find(“quote, blockquote”); let tweetableUrl = “” ; let clickToTweetBtn = null; // Eine URL der aktuellen Seite abrufen const currentPageUrl = window.location.href; quotes.each(function (index, quote) { const q = $(quote); // Eine tweetbare URL erstellen tweetableUrl = makeTweetableUrl( q.text(), currentPageUrl ); // Erstellen Sie eine „Click to Tweet“-Schaltfläche mit den entsprechenden Attributen clickToTweetBtn = $(““); clickToTweetBtn.text(“Click to Tweet”); clickToTweetBtn.attr (“href”, tweetableUrl); clickToTweetBtn.on(“click”, onClickToTweet); // Schaltfläche zu jedem Blockzitat hinzufügen q.append(clickToTweetBtn); }); }); function makeTweetableUrl(text, pageUrl) { const tweetableText = “https://twitter.com/intent/tweet?url=” + pageUrl + “&text=” + encodeURIComponent(text); return tweetableText; } function onClickToTweet(e) { e.preventDefault(); window.open( e.target.getAttribute(“href”), “twitterwindow”, “height=450, width=550, toolbar=0, location=0, menubar=0, Verzeichnisse=0, scrollbars=0” ); }

Wie Sie sehen, ist der Code derselbe, außer dass er die Funktionen von jQuery nutzt, um den Code, den wir schreiben müssen, zu vereinfachen. Hier funktioniert die jQuery-Version auf CodePen.

Abschluss

Wie Sie sehen, erfordert die Erstellung eines „Click-to-Tweet“-Buttons nicht viel Zeit, kann aber eine großartige Möglichkeit sein, Ihre Besucher zum Teilen Ihrer Inhalte auf Twitter zu ermutigen.

Ich hoffe, dieses Tutorial war hilfreich und Sie haben etwas Neues gelernt. Fühlen Sie sich frei, diesen Code zu verwenden und ihn auf Ihrer Website zu implementieren.

Ausgewähltes Bild über DepositPhotos.

Aktuelle Artikel:

Empfohlen