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

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

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

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

特長

上記SNSボタンのうち、Twitterのボタン以外はシェア数が表示されます。
2015年11月20日からTwitterボタンのツイート数は非表示に仕様変更された影響で表示できません。

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

jQueryを使用していますが、すでにjQueryを導入済みのサイトでは非常に軽い容量で実装することができます。
jQuery以外で最低限必要になるファイルはsocial-button.css(3.56KB)social-button.js(3.70KB)、+ウェブフォント(Font Awesome)の容量です。

Font Awesome公式ページ
https://fortawesome.github.io/Font-Awesome/

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

サイトのSSL化に伴い、現在不具合が発生しています。
SSL化していないサイトではおそらく正常に動作すると思います。

ソーシャルボタンスクリプトのサンプル
https://www.1-firststep.com/samplephp/social-button/
ソーシャルボタンスクリプトのダウンロード
https://www.1-firststep.com/samplephp/social-button/social-button.zip

使い方の説明

1、ソーシャルボタンスクリプトをダウンロードし、解凍する。
2、social-buttonフォルダごとアップロードする。
3、index.htmlを参考に、ソーシャルボタンを設置したいページからreset.css、social-button.css、jquery-1.11.3.min.js、social-button.jsを読み込ませる。
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/social-button.css" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/social-button.js"></script>
4、ソーシャルボタンを表示させたい部分にid名がsocial-buttonのdiv要素を記述する。
<div id="social-button"></div>
5、補足説明
各アイコンにはウェブフォント(Font Awesome)を使用しており、Font Awesomeのファイル一式を公式サイトからダウンロードしたままの状態で同梱してあります。
しかし、その中で実際に使用するファイルはfontsフォルダの中のフォントデータだけなので、それ以外のファイルをサーバーにアップロードする必要はありません。

注意点

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

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

アップデート履歴

2015/11/24 バージョン1.0
公開

添付ファイル機能付きメールフォーム

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+