با توجه به اینکه اینستاگرام، اسنپ چت و دیگر پلتفرم‌های رسانه‌های اجتماعی «جوان» اینترنت را در اختیار گرفته‌اند، توییتر همچنان یکی از محبوب‌ترین کانال‌های بازاریابی است.

اطراف دارد 326 میلیون کاربر فعال در ماه به این معنی که مخاطبان هدف شما احتمالا از آن استفاده می کنند. به همین دلیل است که حداقل باید از آن به عنوان یک کانال بازاریابی برای تجارت خود استفاده کنید. داشتن توییتر به عنوان یکی از کانال های اصلی بازاریابی نه تنها به افزایش آگاهی از برند شما کمک می کند، بلکه می تواند ترافیک وب سایت شما را افزایش دهد و مقالات شما را ویروسی کند.

چگونه می توان به این امر دست یافت؟ خوب، این یک تاکتیک بسیار ساده است که برخی از وبلاگ نویسان برتر از آن استفاده می کنند. ایده این است که در پست وبلاگ خود، محتوای کوتاهی دارید که جذاب است و مردم آنها را دوست دارند. پس از آن می توان آن قطعات محتوا را به راحتی توییت کرد. (به عنوان مثال، این می تواند نقل قولی از شخصی باشد که در جایگاه شما معتبر است، یا آماری که احساس می کنید احتمالاً توسط بازدیدکنندگان شما به اشتراک گذاشته می شود.)

بنابراین، اجازه دهید به شما نشان دهم که چگونه می توانید دکمه های «کلیک برای توییت» را به طور خودکار به هر نقل قول در مقاله خود اضافه کنید.

قبل از شروع، اجازه دهید بگویم که این یک تکنیک متوسط ​​​​پیشرفته است. اگر از وردپرس استفاده می کنید می توانید از یک پلاگین آماده استفاده کنید که همان هدف را دنبال می کند.

ایجاد دکمه های “Click to Tweet” با جاوا اسکریپت

بیایید فرض کنیم که می‌خواهیم از این مقاله درباره کنفرانس‌هایی که می‌گوید «براساس webdesignerdepot.com …» به یک بلوک توییتی تبدیل شویم.

با توجه به اینکه ساختار html زیر را داریم:

<article id="article">
<blockquote> I only ever go to marketing conferences to meet new people and listen to their experiences. Those people never include the speakers, who are generally wrapped up in their own world and rarely give in the altruistic sense. </blockquote>
</article>

در اینجا روش ایجاد دکمه کلیک بر روی توییت است:

مرحله 1

ما باید همه را جمع آوری کنیم <نقل قول> و

عناصر مقاله ما هنگام بارگیری سند:

document.addEventListener("DOMContentLoaded", function() {
 // Step 1. Get all quote elements inside the article
 const articleBody = document.getElementById('article');
 const quotes = (...articleBody.querySelectorAll('quote, blockquote'));

گام 2

متغیرهای اضافی برای ذخیره جریان ایجاد کنید page آدرس اینترنتی، آدرس اینترنتی قابل توییت و دکمه «برای توییت کلیک کنید»:

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

مرحله 3

ما باید روی تمام عناصر نقل قولی که می‌خواهیم توییت شوند، تکرار کنیم و برای هر یک از آن‌ها یک «دکمه کلیک روی توییت» اضافه کنیم:

 quotes.forEach(function (quote) {
 // Create a tweetable url
 tweetableUrl = makeTweetableUrl(
 quote.innerText, currentPageUrl
 );

 // Create a 'click to tweet' button with appropriate attributes
 clickToTweetBtn = document.createElement("a");
 clickToTweetBtn.innerText = "Click to Tweet";

 clickToTweetBtn.setAttribute("href", tweetableUrl);
 clickToTweetBtn.onclick = onClickToTweet;

 // Add button to every blockquote
 quote.appendChild(clickToTweetBtn);

 }); 
});

مرحله 4

اضافه کردن 2 تابع از دست رفته: makeTweetableUrl، که یک URL قابل توییت ایجاد می کند و onClickToTweet که به عنوان شنونده رویداد ما عمل می کند و پنجره ای را برای توییت باز می کند (پس از کلیک روی دکمه):

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"
 );

}

اینجا کار می کند روی CodePen.

ایجاد دکمه های “Click to Tweet” با جی کوئری

اکنون، اجازه دهید یک روش کمی متفاوت برای به دست آوردن همان نتیجه را به شما نشان دهم که اگر از jQuery استفاده می کنید، می توانید آن را پیاده سازی کنید.

این هم کد:

$(document).ready(function() {

 // Get all quote elements inside the article
 const articleBody = $("#article");
 const quotes = articleBody.find("quote, blockquote");
 let tweetableUrl = "";
 let clickToTweetBtn = null;

 // Get a url of the current page 
 const currentPageUrl = window.location.href;

 quotes.each(function (index, quote) {
 const q = $(quote);
 // Create a tweetable url
 tweetableUrl = makeTweetableUrl(
 q.text(), currentPageUrl
 );

 // Create a 'click to tweet' button with appropriate attributes
 clickToTweetBtn = $("<a>");
 clickToTweetBtn.text("Click to Tweet");

 clickToTweetBtn.attr("href", tweetableUrl);
 clickToTweetBtn.روی("click", onClickToTweet);

 // Add button to every blockquote
 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, directories=0, scrollbars=0"
 );
}

همانطور که می بینید، کد یکسان است، با این تفاوت که از توابع jQuery برای ساده سازی کدی که باید بنویسیم استفاده می کند. در اینجا نسخه jQuery کار می کند روی CodePen.

نتیجه

همانطور که می بینید، ایجاد دکمه «کلیک برای توییت» به زمان زیادی نیاز ندارد، اما می تواند راهی عالی برای تشویق بازدیدکنندگان برای به اشتراک گذاشتن محتوای شما باشد. روی توییتر.

امیدوارم این آموزش مفید بوده باشد و چیز جدیدی یاد گرفته باشید. با خیال راحت از این قطعه کد استفاده کنید و آن را پیاده سازی کنید روی وبسایت شما.

تصویر شاخص از طریق DepositPhotos.