主要SNS(ソーシャル)のボタンをまとめて設置できるスクリプトの無料ダウンロード

公開日

2015年11月24日

最終更新日

2021年10月25日

著者

Motohiro Tani

主要なSNSのボタンをまとめて設置できるスクリプトを制作・公開しました。
スクリプトの名称は何でもいいのですが、とりあえず「ソーシャルボタン スクリプト」としておきます。

現在の最新バージョンは2020年12月11日公開のバージョン3.0.1です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

このプログラムによって設置できるボタンは以下になります。

• Twitterのツイートボタン
• Facebookのシェアボタン
• はてなブックマークボタン
• LINEに送るボタン
• Instagramのフォローボタン(バージョン3.0以降)
• Pocketボタン(バージョン3.0以降)

特長

設置が超簡単！
HTMLページでも動作する！
そのうえ、圧倒的な表示の速さ！
もちろん私自身もこのサイトで使っています。元々は自分が使うために作ったのです。

かつてTwitterやFacebookの純正のボタンを設置したら、どんな機能が内蔵されているのかわかりませんがページ表示がかなり遅くなったので、最低限必要なリンク機能だけを実装したボタンを作ることにしたのです。

要は「シェア(ツイートやいいね)したい人が、1クリックでその画面に行ける」ことができれば、ボタンの役割としては充分でしょう。
それ以上の機能はページ表示を遅くしてまで必要なのか？と考えると微妙です。

また、各アイコンにはウェブフォントを使用していますので、スマホやタブレットで表示させた際にもボヤけたりすることがありません。
どれだけ拡大させたとしても鮮明に表示されます。

バージョン2.0からはjQueryの使用とシェア数の表示をやめたため、とても表示の軽いスクリプトとなりました。
最低限必要になるファイルは以下の3つだけです。

• social-button.css (3.13KB)
• social-button.js (1.71KB)
• ウェブアイコン (2.91KB・WOFFファイルの場合)

これらはサーバー側で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からはシェア数の表示を無くしました。
その理由としては、

1. 各シェア数を取得するのは、ページの表示が非常に重くなるから。
2. ツイッターやLINEボタンだけシェア数がないのは、全体として見た目のバランスが悪いから。

といった感じになります。

インスタのフォローボタンのURLについて

初期状態では、インスタのフォローボタンのリンク先は以下のようになっています。
「ユーザー名」の部分にご自身のアカウントの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>

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2015/11/24　バージョン1.0

公開

2017/07/11　バージョン2.0

• シェア数の表示を無くしたことで、表示が早くなりました。
• アイコン表示はFontAwesomeを使用していましたが、FontAwesomeにはLINEやはてなブックマークのWebアイコンがないため、変更しました。

2017/07/13　バージョン2.0.1

• サンプルページをレスポンシブに対応させるため、sample.cssを追加しました。

2019/05/03　バージョン2.1

• Google+がサービス終了したので削除。
• ページ表示のタイミングを早めました。(window.loadからDOMContentLoadedに変更)

2019/07/23　バージョン3.0

• インスタとPocketのボタンを追加。
• ボタンの文字列なしや円形ボタンのサンプルを追加。
• ボタンの文字列を自由に変更できるように修正。
• 1つのページ内に複数設置できるように修正。
• async属性を付けても問題なく動作するように修正。
• LINEボタンのURLを最近の仕様に修正。

2020/12/11　バージョン3.0.1

• リンクのrel属性にnoopener noreferrerを追加。
• 既存サイトに組み込む際には不要になるsample.cssを削除し、HTML内にインラインで記述。