記事中の引用部分に「クリックしてツイート」ボタンを実装する方法

あなたのコンテンツをユーザーにSNS上でシェアしてもらうことは、ブランド力をあげるのに最高の方法です。

このチュートリアルでは、ユーザーにあなたのコンテンツを引用してTwitterでつぶやいてもらうための、「クリックしてツイート」ボタンの作り方をお教えします。

「クリックしてツイート」ボタンを作る意義

Instagram、Snapchat、TikTokなど、インターネット上で人気の「若い」SNSと同様に、Twitterは未だにもっとも人気のあるマーケティングチャンネルのひとつです。

Twitterの月間アクティブユーザーは、世界で約3億2600万人、日本で約4500万人いると推計されています。とりわけ日本においては、LINEに次いで第2位の勢力を誇ります（Instagramは3300万人）。

またTwitterは拡散性が高く、コンテンツが「バズる」ことでブランドの認知やウェブサイトへの流入を一気に高められる可能性も秘めています。

では、記事を拡散してもらうにはどうすれば良いでしょうか。その答えは、あなたの記事の中に、キャッチーで短いフレーズを組み込むことです。そしてその部分に「クリックしてツイート」ボタンを仕込むのです。するとその記事はツイートされやすくなります。

JavaScriptで「クリックしてツイート」ボタンをつくる

それでは早速、記事のテキスト要素に「クリックしてツイート」ボタンを付加する方法をご紹介します。今回は記事の「引用箇所」を、引用してツイートしてもらうボタンを作ります。

まず前提として、これからお話しすることは中上級レベルのテクニックであることを断っておきます。もしあなたがWordPressを使っているなら、すでに用意されているプラグインを使うこともできます。

このカンファレンスに関する記事の引用部分に、「According to webdesigndepot.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>

では、さっそく「クリックしてツイート」ボタンの作り方をみていきましょう。

STEP1

ドキュメントをロードする際に、<blockquate>と<quate>の要素をすべて集めます。

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

STEP2

現在のページのURLと、ツイート可能なURL、「クリックしてツイート」ボタンの変数を追加します。

let tweetableUrl = "";

let clickToTweetBtn = null;

const currentPageUrl = window.location.href;

STEP3

ツイート可能にする引用部分すべてに「クリックしてツイート」ボタンをつけていきます。

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

});
});

STEP4

以下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での確認はこちら。

jQueryで「クリックしてツイート」ボタンをつくる

ここからは、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 = $("");
clickToTweetBtn.text("Click to Tweet");

clickToTweetBtn.attr("href", tweetableUrl);
clickToTweetBtn.on("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の利点を活かしてコードを簡素にしている以外は、JavaScriptと同じです。

jQueryのCodePenはこちら。

まとめ

「クリックしてツイート」ボタンはあまり時間をかけずに簡単に作成できます。たったこれだけで、あなたのコンテンツはTwitter上でシェアしてもらいやすくなるのです。

また今回は「引用部分」を引用してツイートという形にしましたが、タグの設定次第でカスタマイズが可能です。

このチュートリアルがあなたの役に立てれば幸いです。このコードを使って、自由にあなたのWebサイトを開発してください。

（原文：ANDRIY HAYDASH   翻訳：Shimizu Yui）

こちらもおすすめ！▼