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

公開日
2015年11月24日
最終更新日
2019年10月11日

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

現在の最新バージョンは2019年7月23日公開のバージョン3.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

設置できるボタンは以下になります。

  • Twitterのツイートボタン
  • Facebookのシェアボタン
  • はてなブックマークボタン
  • LINEに送るボタン
  • Instagramのフォローボタン(バージョン3.0以降)
  • Pocketボタン(バージョン3.0以降)
  1. 特長
  2. ソーシャルボタンスクリプトのサンプルとダウンロード
  3. 使い方の説明
  4. 既存サイトへの組み込み方法
  5. デザインの調整について
  6. シェア数の表示について
  7. インスタのフォローボタンのURLについて
  8. 注意点
  9. サポートに関して
  10. カスタマイズに関して
  11. アップデート履歴

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

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

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

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

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

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

ソーシャルボタンスクリプトのサンプル
表示の速さや、拡大表示しても表示が荒くならない点などをご確認ください。

ソーシャルボタンスクリプトのダウンロード

説明
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、ソーシャルボタンスクリプトをダウンロードし、展開する。

2、フォルダごとアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

4、index.htmlを参考に、ソーシャルボタンを設置したいページからsocial-button.css、social-button.jsを読み込ませる。
(同梱のsample.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を記入してご利用ください。

<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にて無償対応いたしております。

初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

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

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を最近の仕様に修正。

このページと関連しているページ一覧