TwitterシェアボタンをJavaScriptで実装しよう【Vanilla JS】

現代のWebサイトには欠かせない「SNSシェア」。SNSの中でもTwitterは拡散力が大きく、WebサイトをTwitterにシェアしたい人はたくさんいます。

そこで、ページごとのURLやタイトルをTwitterにシェアするボタンの実装方法を紹介いたします。

TwitterのシェアURLの仕組み

基本的に、Twitterのシェアボタンはリクエストパラメータでツイートの内容を設定できます。

https://twitter.com/intent/tweet?text={ページタイトル}&url={ページのURL}&via={ツイート内に含むユーザ名}&related={ツイート後に表示されるユーザー}&hashtags={ハッシュタグ}

パラメータを全て付与する必要はないので、今回はページタイトルとページURLのみの実装とします。

https://twitter.com/intent/tweet?text={ページタイトル}&url={ページのURL}

aタグを用意

任意の場所にaタグを作ります。今回はindex.htmlに記述することとします。

<a href="http://twitter.com/" target="_blank" rel="noopener noreferrer">シェアする</a>

JavaScriptでaタグのhrefを変更する

JavaScriptではタイトルタグとURLを取得してそれをaタグのURLとします。

let pageTitle = document.querySelector('title').text;
let pageUrl = location.href;
let shareBtn = document.querySelector('a');
let shareURI = `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageUrl}`;
shareURI = encodeURI(shareURI);
console.log(pageTitle);
shareBtn.href = shareURI;

JavaScriptの処理として、

1. titleタグのテキストを取得
2. 現在のページURLを取得
3. aタグのhref属性に取得したページタイトルとURLを追加

という形になります。

URLやタイトルをそのまま取得してhref属性に追加すると、リンク先がエラーになることが多々あるので、「encodeURI」関数を使用して日本語をデコードしてエラーの回避をしております。

ぜひ使ってみてください！