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

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

公開日 : 2015年11月24日
最終更新日 : 2018年10月25日

主要な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)の容量です。

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

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

使い方の説明

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>