主要なSNSのボタンをまとめて設置できるスクリプトを制作・公開しました。
スクリプトの名称は何でもいいのですが、とりあえず「ソーシャルボタン スクリプト」としておきます。
現在の最新バージョンは2020年12月11日公開のバージョン3.0.1です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
設置できるボタンは以下になります。
設置が超簡単!
HTMLページでも動作する!
そのうえ、圧倒的な表示の速さ!
もちろん私自身もこのサイトで使っています。元々は自分が使うために作ったのです。
かつてTwitterやFacebookの純正のボタンを設置したら、どんな機能が内蔵されているのかわかりませんがページ表示がかなり遅くなったので、最低限必要なリンク機能だけを実装したボタンを作ることにしたのです。
要は「シェア(ツイートやいいね)したい人が、1クリックでその画面に行ける」ことができれば、ボタンの役割としては充分でしょう。
それ以上の機能はページ表示を遅くしてまで必要なのか?と考えると微妙です。
また、各アイコンにはウェブフォントを使用していますので、スマホやタブレットで表示させた際にもボヤけたりすることがありません。
どれだけ拡大させたとしても鮮明に表示されます。
バージョン2.0からはjQueryの使用とシェア数の表示をやめたため、とても表示の軽いスクリプトとなりました。
最低限必要になるファイルは以下の3つだけです。
これらはサーバー側でgzip圧縮を有効にしていればさらに容量が軽くなります。(2020年現在ならたいていのサーバーでONになっているでしょう)
ソーシャルボタンスクリプトのサンプル
表示の速さや、拡大表示しても表示が荒くならない点などをご確認ください。
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。
1、ソーシャルボタンスクリプトをダウンロードし、展開する。
2、フォルダごとアップロードする。
3、ブラウザでindex.htmlにアクセスし、動作を確認する。
4、index.htmlを参考に、ソーシャルボタンを設置したいページからsocial-button.css、social-button.jsを読み込ませる。
(index.html内にインラインで記述されているCSSはサンプルページ専用ですので、既存サイトに組み込む際には必要ありません)
<link rel="stylesheet" href="css/social-button.css" />
<script src="js/social-button.js" async></script>
CSSとfontフォルダの位置関係が変わると、ウェブフォントの読み込みができなくなり、各アイコンが表示されなくなってしまいますのでご注意ください。
HTMLからの階層が深くなる場合は、以下のようにすればOKです。
<link rel="stylesheet" href="ここに階層/ここに階層/css/social-button.css" />
<script src="ここに階層/ここに階層/js/social-button.js" async></script>
5、index.htmlから以下のコードをコピーし、ソーシャルボタンを表示させたい部分に設置する。
<div class="social-button">
<ul>
<li class="twitter-tweet"><a href="" target="_blank" rel="nofollow">ツイートする</a></li>
<li class="facebook-share"><a href="" target="_blank" rel="nofollow">Facebookでシェアする</a></li>
<li class="instagram-follow"><a href="https://www.instagram.com/ユーザー名?ref=badge" target="_blank" rel="nofollow">Instagramをフォローする</a></li>
<li class="hatena-bookmark"><a href="" target="_blank" rel="nofollow">はてなブックマーク</a></li>
<li class="pocket-save"><a href="" target="_blank" rel="nofollow">Pocket</a></li>
<li class="line-send"><a href="" target="_blank" rel="nofollow">LINEで送る</a></li>
</ul>
</div>
設定は以上です。
ボタンのデザインはすべてCSSで設定されています。
CSSで自由にデザインを変更しても問題ありません。
このスクリプトはCSSをどのように編集しても動作エラーの原因にはなりません。
過去バージョンではシェア数がボタンの横に吹き出しで表示されておりましたが、バージョン2.0からはシェア数の表示を無くしました。
その理由としては、
といった感じになります。
初期状態では、インスタのフォローボタンのリンク先は以下のようになっています。
「ユーザー名」の部分にご自身のアカウントのURLを記入してご利用ください。
<a href="https://www.instagram.com/ユーザー名?ref=badge" target="_blank" rel="nofollow">Instagramをフォローする</a>
例えば、インスタのアカウントページのURLが以下のような場合なら、
https://www.instagram.com/tani
以下のようにすればOKです。
<a href="https://www.instagram.com/tani?ref=badge" target="_blank" rel="nofollow">Instagramをフォローする</a>
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。