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

• 公開日 : 2015年11月24日
• 最終更新日 : 2017年9月11日

主要なSNSのボタンをまとめて設置できるスクリプトを制作・公開しました。
スクリプトの名称は何でもいいのですが、とりあえず「ソーシャルボタンスクリプト」としておきます。
現在の最新バージョンは2017年7月13日公開のバージョン2.0.1です。

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

• Twitterのツイートボタン
• Facebookのシェアボタン
• Google+のシェアボタン
• はてなブックマークボタン
• LINEに送るボタン

特長

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

かつてTwitterやFacebookの純正のボタンを設置したら、どんな機能が内蔵されているのかわかりませんがページ表示がかなり遅くなったので、最低限必要なリンク機能だけを実装したボタンを作ることにしたのです。
要は「シェア(ツイートやいいね)したい人が、1クリックでその画面に行ける」ことができれば、ボタンの役割としては充分なのです。これがユーザー視点！

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

また、バージョン2.0からはjQueryの使用とシェア数の表示をやめたため、とても表示の軽いスクリプトとなりました。
最低限必要になるファイルはsocial-button.css(2.28KB)、social-button.js(2.23KB)、+ウェブフォント(26.2KB)の容量です。

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

ソーシャルボタンスクリプトのサンプル

https://www.1-firststep.com/samplephp/social-button-v2.0.1/index.html

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

https://www.1-firststep.com/samplephp/download/php/download.php?file=social-button-v2.0.1.zip

使い方の説明

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

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

3、index.htmlを参考に、ソーシャルボタンを設置したいページからsocial-button.css、social-button.jsを読み込ませる。
(同梱のsample.cssはレスポンシブで表示させるためのサンプルですので、既存サイトに組み込む際には必要ありません)

<link rel="stylesheet" type="text/css" href="css/social-button.css" />

<script type="text/javascript" src="js/social-button.js"></script>

CSSとfontフォルダの位置関係が変わると、ウェブフォントの読み込みができなくなり、各アイコンが表示されなくなります。
その場合は、social-button.cssの最初にあるsrcの部分のパスを適宜変更してください。

4、ソーシャルボタンを表示させたい部分にid名がsocialのdiv要素を記述する。

<div id="social"></div>

設定は以上です。

デザインの調整について

ボタンのデザインはすべてCSSで設定されています。

HTML上にはdiv id=”social”だけが存在し、その中にJavaScriptによって各ボタンのHTMLが挿入される仕組みになっています。
挿入されるHTMLは以下のようになりますので、これを参考にCSSでデザインの調整をしてください。

<div id="social">
  <ul class="social-button">
    <li class="twitter"><a href="ここにTwitterのURL" target="_blank" rel="nofollow">ツイートする</a></li>
    <li class="facebook"><a href="ここにFacebookのURL" target="_blank" rel="nofollow">Facebookでシェアする</a></li>
    <li class="google"><a href="ここにGoogleプラスのURL" target="_blank" rel="nofollow">Google+でシェアする</a></li>
    <li class="hatena"><a href="ここにはてなブックマークのURL" target="_blank" rel="nofollow">はてなブックマーク</a></li>
    <li class="line"><a href="ここにラインのURL" target="_blank" rel="nofollow">LINEで送る</a></li>
  </ul>
</div>

シェア数の表示について

過去バージョンではシェア数がボタンの横に吹き出しで表示されておりましたが、バージョン2.0からはシェア数の表示を無くしました。
その理由としては、

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

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

注意点

本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。

不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。

アップデート履歴

2015/11/24　バージョン1.0

公開

2017/07/11　バージョン2.0

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

2017/07/13　バージョン2.0.1

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