Twitter、Facebook、はてなブックマーク、Google+1のボタンを簡単設置できるスクリプト
- 公開日 : 2013年7月30日
- カテゴリ : Web制作
半年ほど前に「ソーシャルボタンをまとめて設置できるスクリプト」というものを作って公開したことがあるが、これを今回もっと簡単に誰でも設置できるように修正した。
これで設置できないとは言わせない。
また、前回は各ボタンが縦並びだったが、今回はどんなサイトにも使いやすいように横並びで設置できる。
サンプルはこちら。
https://www.1-firststep.com/archives/1226
設置の方法
設置方法はこのソーシャルボタンを設置したい箇所に、
<div id="social-button"></div>
を記述し、social-button2.0.jsとsocial-button.cssへのリンクを記述するだけでOKである。
細かな設定などは一切いらない。
social-button2.0.jsへのリンクの記述はhead要素に限らずbody要素内のどこに書いてもOKだ。
また、前掲の<div id="social-button"></div>のような空の要素をHTML内に記述したくないというこだわり派の方はsocial-button2.0.jsの16行目、
var div_left = document.getElementById('social-button');
のsocial-buttonの部分をこのソーシャルボタンを設置したい要素、例えばpタグやdivタグのid名に書き換えれば、その要素の終了タグ直前にソーシャルボタンが挿入される。
自分のブログやホームページなどへのソーシャルボタンの設置でつまづいた方はぜひお使いください。
詳細情報やダウンロード
- バージョン
- 2.0
- 価格
- 無償
- サポート
- なし
- 注意事項
- 本プログラムで発生した如何なる損害も当方では負いかねます。了承いただけた方のみご利用ください。
ダウンロードはこちらからどうぞ。
https://www.1-firststep.com/archives/1226
追記：言い忘れていましたが、当然ながらそれぞれのボタンは設置した各ページのURLを自動で取得するようにしてあります。