2022年5月15日(日) 11時34分30秒 [Web関連]

SNSシェアボタン等を自前スクリプトで作る方法

各SNS公式のボタンだと読み込みが重たい問題がある

うちのサイト内では所々に下図のようなSNSシェア用ボタンを配置しています。SNSではないサービスも含まれていますけども。フリーソフトやフリーCGI等の配布ページなら上部に、Tips記事やブログなら本文の下に掲載しています。

長年、これらのボタンは各サービスの公式サイトで提供されている「ボタン表示用HTMLソース」をそのまま書いて表示していたのですけども、それらを使うのをすべてやめて自前のスクリプト(HTML＋CSS＋JavaScript)で作る方法に変えてみました。

各サービス公式サイトが提供している公式ボタンだと（将来的に内部仕様が変わっても自動で追随されるだろうという安心感はあるものの）各々で用意されたスクリプトが読み込まれるので、ボタン1つ1つに対して専用スクリプトなど複数ファイルの読み込みが発生してしまって、無駄な通信が増える問題があるのですよね。サイズ(通信量)自体はそんなに大きくはないのですけども、ボタンが多ければそれだけ多数のリクエストを方々のサーバへ送ることになりますから（ウェブページの表示の）遅延要因にもなるでしょうし。

そこで、一念発起して全部のボタンを自前のスクリプトで作る方法に変えてみました。どのサービスも「指定のURLに（URLエンコードされた）URLを送れば良いだけ」なので、わざわざ公式スクリプトを読み込んで使う必要はあまりありません。
無駄に公式スクリプトを読みにいかなくなったので、通信量も減り、ページ全体の読み込み待ち時間も削減されて、なかなか望ましい形になった気がします。（もっと早くそうしておけば良かった……。orz）

この手の独自SNSシェアボタンを作る方法はネット上に多々ありますから、今更ここで紹介する意味があるかどうかよく分かりませんけども、まあ、せっかくなので、うちのサイトで採用した作成方法(HTML＋CSS＋JavaScriptソース)をご紹介しておきます。

具体的には、以下のボタンの作り方です。

• 「Twitterでツイートする」ボタン
• 「Facebookでシェアする」ボタン
• 「LINEで送る」ボタン
• 「はてなブックマークに登録する」ボタン
• 「Pocketに保存する」ボタン
• 「URLとタイトルをクリップボードにコピーする」ボタン

ついでに、「現在見ているページ」のタイトルとURLをクリップボードにコピーするだけのボタンも用意しました。機能的には一番シンプルですが、もしかしたらこれが一番便利かも知れませんけども。^^;

装飾はCSSで作っていますから、見た目のカスタマイズはCSSソースを適当に編集して下さい。
なお、各SNSのアイコンを用意するのは面倒でしたので、テキストラベルだけで作っています。アイコンも欲しい方は別途何らかの方法でご準備下さい。(^_^;;;

実働するボタンを触ってみたい場合は、このブログ記事（＝今お読みのページ）にも、本文の最後あたりに掲載されているはずですので本文の末尾あたりをご覧下さい。

SNSシェアボタン等を作る自前のHTML＋CSS＋JavaScriptソース

まず、HTML、CSS、JavaScriptの各ソースをそれぞれ順に全部掲載します。
とにかく動けば良いという場合は、そのまますべてのソースをコピーしてお使い頂ければ良いでしょう。修正の必要があるのは、Twitter IDを記述しているHTMLソース1箇所だけです。そのほかは、すべてコピー＆ペーストで問題ありません。

▼HTMLソース

ボタンを表示するためのHTMLソースです。必要な行だけコピーしてお使い下さい。同一ページ内に同じボタンをいくつでも掲載できます（その場合でも、後述のJavaScriptソースの記述は1回だけで大丈夫です）。

<!-- Twitter  --><a href="https://twitter.com/intent/tweet?url={{URL}}&text={{TITLE}}&via=★★★" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-twitter">ツイート</a>
<!-- Facebook --><a href="https://www.facebook.com/sharer.php?u={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-facebook">facebookシェア</a>
<!-- LINE     --><a href="https://social-plugins.line.me/lineit/share?url={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-line">LINEで送る</a>
<!-- はてブ   --><a href="https://b.hatena.ne.jp/entry/{{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-hatenabookmark">はてなブックマーク</a>
<!-- Pocket   --><a href="https://getpocket.com/edit?url={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-pocket">Pocket</a>
<!-- コピー   --><a href="#" class="snssharebtn snsbtn-copy" onclick="copyPageInfoToClipboard(); return false;">URLとタイトルをコピー</a>

ソース中に見える {{URL}} や {{TITLE}} の部分は、JavaScriptで置き換えられる部分ですので、HTMLソース中ではそのまま記述しておけば良いです。書き換える必要はありません。

▼Twitter IDの書き換え

Twitter用ソース（1行目）にある via=★★★ の「★★★」部分は、あなたのTwitter IDに置き換えて下さい。例えば、Twitter IDが「nishishi」なら via=nishishi にします。「@」記号は要りません。Twitter IDを持っていない場合や、持っていてもツイートに含めたくない場合は、&via=★★★ の部分は削除して下さい。
それ以外の行はすべて、そのままコピーすれば問題ありません。

※上記の各ボタンはa要素を使って作っているので、何も装飾しなかったら、ただのテキストリンクに見えます。(その状態でも動作に問題はありません。)
※各ボタンにはclass名が2つずつ付加してあります。これらは、CSSでの装飾に使うだけでなく、JavaScriptでの制御対象を認識する役割もあります。そのため、もしclass名を変更する場合は、後述のCSSやJavaScriptソース内も同じように書き換える必要があります。

▼CSSソース

ボタンを装飾するためのCSSソースです。ボタンの装飾を1から自分で作る場合は特に以下のソースは要りませんけども、まあ、参考までに掲載しておきます。

<style>
/* ▼各ボタン共通の装飾 */
.snssharebtn {
   display: inline-block;   /* インラインブロック化 */
   background-color: #ccc;  /* 背景色 */
   color: white;            /* 文字色 */
   border-radius: 3px;      /* 角丸 */
   line-height: 20px;       /* 行高 */
   font-size: 12px;         /* 文字サイズ */
   font-weight: bold;       /* 太字 */
   padding: 0 0.75em;       /* 内側余白(上下→左右) */
   text-decoration: none;   /* リンクの下線を消す */
   vertical-align: bottom;  /* 下端を揃える */
}
/* ▼各ボタンの配色 */
.snsbtn-twitter { background-color: #1d9bf0; }
.snsbtn-facebook { background-color: #1877f2; }
.snsbtn-line { background-color: #00c300; }
.snsbtn-hatenabookmark { background-color: #00a4de; }
.snsbtn-pocket { background-color: #ef4256; }
.snsbtn-copy { background-color: green; }
</style>

背景色以外のすべての装飾は共通なので、16行目以降で背景色だけを個別に指定(上書き)しています。
共通装飾部分（3～14行目）の意味は、横にコメントで書いたとおりです。個別の配色を指定せずに使われる場合に備えて、デフォルトの背景色を書いてあります（5行目）。

▼JavaScriptソース

最後にJavaScriptソースです。
先のHTMLソース中に記述されている {{URL}} や {{TITLE}} の部分は、それぞれ「そのとき表示されているページのURL・タイトル」に置き換えないと意味がありません。その処理を以下のJavaScriptで実行します。下記のソースは、全部コピー＆ペーストするだけで動きます。（カスタマイズの余地はありますので、その点については後述します。）

<script>
// ページの情報を得る
let pageurl = window.location.href;
let pagetitle = document.title;
// ページ内のSNSシェアボタン用a要素を対象に処理
let snsShareBtns = document.querySelectorAll(".snssharebtn");
snsShareBtns.forEach(function(ssb) {
	// href属性内のキーワードをURLエンコードした文字列に置換
	let target = ssb.getAttribute('href');
	target = target.replace('{{URL}}', encodeURIComponent(pageurl));
	target = target.replace('{{TITLE}}', encodeURIComponent(pagetitle));
	ssb.setAttribute('href', target);
});
function copyPageInfoToClipboard() {
	navigator.clipboard.writeText(pagetitle + " " + pageurl);
	alert('コピーしました！');
}
</script>

※掲載ボタンがいくつある場合でも、上記のJavaScriptソースの記述は1回だけで充分です。
※もし「URLとタイトルをクリップボードにコピーする」ボタンが要らない場合は、14行目～17行目は不要です。

▽ページの情報を得る部分（3～4行目）

3行目は、「いま表示しているページのURL」を取得しています。window.location.hrefは、ブラウザのアドレス欄にあるURLそのものです。私は、自分のサイトではこの記述ではなく let pageurl = 'https://www.nishishi.com' + window.location.pathname; のように書きました。window.location.href だと、URLに「?」を使ったパラメータや「#」を使った検索文字列が含まれている場合にそれらの文字列もそのまま含まれてしまいますので、それを除外しようかな、と思いまして。現在URLを構成部分別に得る方法については、ページを移動させたり、現在URLを構成部分別に得る方法に書いていますのでご参照下さい。「wwwあり/なし」とか「http/https」とかの揺れを吸収するには、プロトコル名やホスト名部分は https://www.nishishi.com/ のように固定的に記述してしまって、それ以外の部分をJavaScriptで組み立てて「共有用URL」を作る方法の方が無難そうな気はします。

4行目は、「いま表示しているページのタイトル」を取得しています。ページタイトル（＝HTMLのtitle要素の中身）にサイト名も含まれている場合、それらを除外するような仕組みも用意しようかな……と思わなくもなかったのですが、タイトルの送信が必要なのがTwitterしかなかったので、まあいいか……と思って、title要素の中身をそのまま全部使っています。^^; ページタイトルについて何か事前に処理したい場合は、この行を書き換えれば良いと思います。

※3行目も4行目も、上記ソースのままなら、あえて変数に格納する必要はありませんけども、URLやタイトルの中身をカスタマイズする際にはこう書いてある方が便利かな、と思ってそうしてあります。

▽{{URL}} とか {{TITLE}} の部分を置き換える処理（5～13行目）

6行目では、処理対象の要素(＝各ボタンを作っている要素)を一括して取得しています。ここでは、document.querySelectorAll(".snssharebtn") と書いていますから、HTMLで class="snssharebtn" の属性が付加された要素すべてを対象にして処理します。対象の判定方法を別の条件にしたい場合は、このquerySelectorAllの引数の中身を書き換えれば良いでしょう。HTMLソースでclass名を変更した場合は、ここも同様に書き換える必要があります。

7～13行目は、処理対象の要素の数だけforEachでループして、以下の処理を実行しています。

• 9行目でhref属性値を取得して、変数に格納し、
• 10行目で、3行目で取得したURLをURLエンコードしてから、（href属性値に含まれる）{{URL}} の記述部分に差し替えています。
• 11行目で、4行目で取得したタイトルをURLエンコードしてから、（href属性値に含まれる）{{TITLE}} の記述部分に差し替えています。
• その差し替えた結果を、12行目でhref属性に上書きしています。

▽タイトルとURLをクリップボードに入れる処理（14～17行目）

14～17行目で作っているcopyPageInfoToClipboard関数は、「URLとタイトルをコピー」ボタンが押されたときに実行されます。このボタンを掲載しないなら、14～17行目は不要です。
15行目のように、navigator.clipboard.writeText(クリップボードに入れたい文字列)のように書くと、引数の文字列をクリップボードに入れられます。IEでは対応していませんが、IEはもういいでしょう……。^^; 一部のブラウザでは、ユーザのアクションに応じて呼び出されるイベントでしか動作しない（セキュリティ面での）制約があるようです。ここでは、onclick（ユーザがクリックしたときのイベント）内で実行しているので問題ないと思います。

ここでは、writeTextの引数に pagetitle + " " + pageurl と指定しているので、「ページタイトル」→「半角空白記号」→「ページURL」の順番でクリップボードに入ります。クリップボードに入れる文字列を変更したい場合は、このカッコ内を編集して下さい。

クリップボードに格納した後、何らかの表示がないと「本当にコピーできたのかどうか」が不安になりますので、16行目でシンプルに「コピーしました！」とアラートボックスで表示させています。アラートボックスはウザいと思われる可能性もあるかな……と思わなくもなかったのですが、使用頻度が高いボタンではないので、まあ別にアラートボックスで良いよな、と思ってそうしました。^^; 何もリアクションが不要ならこの16行目は削除すれば良いです。他の動作にしたい場合は16行目を書き換えて下さい。

SNSシェアボタン等で使っている、情報の送り先URLとか

各ボタンを作るHTMLソースは先に示したとおりです。
すべてほぼコピー＆ペーストして使って頂ければ良いのですが、一応その中身の解説をしておきます。
ここでご紹介したのは2022年5月時点で使用可能なソースですが、今後にサービス側の都合で変化する可能性がありますから。

▼Twitter

Twitterにツイートする文字列を送信するには、https://twitter.com/intent/tweet? に続いて、

• ① url=(ページのURL)
• ② text=(ページのタイトルなど)
• ③ via=(ツイッターのID)

の3パラメータを & 記号で連結して指定すれば良いようです。

①や②で指定する文字列は、URLエンコードしておく必要があります。
②には、ページのタイトルだけでなく何でも自由な文字列を含められます。
③に自分のTwitter IDを指定しておけば、ツイート本文の最後に「○○さんから」のような感じで表示されます。それが不要なら、&via=(ツイッターのID) の部分は省略しても問題ありません。

※問答無用でいきなりツイートされるわけではなく、ツイート本文の編集画面が出ます。

▼Facebook・LINE・Pocket

Facebookにシェアする文字列を送信するには、https://www.facebook.com/sharer.php? に続いて、u=(ページのURL) のようにパラメータを指定すれば良いようです。
LINEに送る文字列を送信するには、https://social-plugins.line.me/lineit/share? に続いて、url=(ページのURL)< のようにパラメータを指定すれば良いようです。
PocketにURLを送るには、https://getpocket.com/edit? に続いて、url=(ページのURL) のようにパラメータを指定すれば良いようです。

どれもシンプルですね。URLはどれもURLエンコードしておく必要があります。
タイトル文字列を送る仕様はありません。

▼はてなブックマーク

はてなブックマークに登録する(ブックマークする)には、https://b.hatena.ne.jp/entry/ の後に直接続けて、URLエンコードされたURLを指定するだけで良いようです。パラメータを区切る「?」記号は要りません。

それ以外にも、例えば https://www.example.com/hogehoge/ を登録したいときに、
https://b.hatena.ne.jp/entry/s/www.example.com/hogehoge/ へアクセスさせる方法もあるようですが。

まあ、「URLエンコードされたURL」を直接連結すれば済むならその方が（スクリプトは）楽なので、その方法を使えば良いと思います。

▼他のSNSなど

ここでご紹介した以外のSNS等サービス用のボタンを用意したい場合、公式で配布されているHTMLソース等から「送り先URL」とパラメータ名などが分かれば、上記のHTMLソースと同様の方法で {{URL}} や {{TITLE}} の記述を使えば作れると思います。JavaScriptソースの編集は必要ありません。

SNSシェアボタン等は自前で作る方が読み込みが速くてデザインを自由にできる

というわけで、SNSシェアボタン等を自前スクリプトで作る方法でした。

公式サイト側で提供されているHTMLソースなら、サービス側の仕様変更があった際にも自動で追随される可能性が高そうな気がするのでその面では安心ですが、デザインの自由度が低くて、スクリプトの読み込みが1つ1つのボタンに対してあるので無駄な通信量が増えるデメリットがあります。各ボタンを自前で用意する方法は、上記でご紹介した通り大した分量ではないので、自前で作る方が「読み込みが速い」＆「ボタンのデザインを自由にできる」という2点でメリットが高そうな気がします。
ぜひ、独自のボタンを用意してみて下さい。

この記事を「記事単独ページ」で見ているなら、実働ボタンは下記に表示されています（もし広告が見える場合は広告の下にあります）。Pocket以外は、ボタンを押しても(各サービスサイト側の)確認画面が表示されるだけなので、気軽に試してみて下さい。Pocketは押すと（ログインされていれば）すぐに登録されますが、登録したと報告される画面でキャンセル(削除)操作が可能です。