ソーシャルボタンをまとめて設置できるスクリプト
- 公開日 : 2013年1月22日
- カテゴリ : Web制作
このページの下のほうにTwitterのツイートボタンやFacebookのいいね!ボタン、Google+1のボタンが設置してある。(いつからか自作のボタンに変更しました)
このようなソーシャルボタンをブログやホームページなどにまとめて設置できるスクリプトを作った。
サンプルはこちら。
http://www.1-firststep.com/samplephp/social-script/
このスクリプトの特長
1つのJavaScriptファイルを設置するだけでこれら3つのソーシャルボタンがまとめて設置できる。
HTMLが理解できない、または編集できなくても、このスクリプトへのリンクさえ貼れれば指定位置にソーシャルボタンをねじ込むことができる。
クラス指定をしたリスト要素で出力しているので、見た目に関してはCSSでどのようにも変更可能です。
一応、出力後の状態を記しておくと、
<ul class="social-button">
<li>ここにツイートボタン</li>
<li>ここにFacebookいいね!ボタン</li>
<li>ここにGoogle+1ボタン</li>
</ul>
という状態で出力される。
つまり、ul要素のsocial-buttonクラスを指定すれば自由に見た目を変更できるのだ。
いくつかの設定はJavaScriptファイルの冒頭に、
1、自分のTwitterのアカウント(@マークは必要ありません)
var tweet_account = 'example';
2、Facebookいいね!ボタンの表示幅(いいね!ボタンは小さいですが、その横にコメントが表示されるのでそれも含めた横幅です)
var fb_like_width = '500';
3、FacebookアプリID(https://developers.facebook.com/appsで取得できます)
var fb_appid = '000000000000000';
4、ソーシャルボタンを設置する要素のID(この要素の最後に表示されます)
var content = 'content';
という設定欄があるので記入して使用してください。
この4番で指定したid名の要素の最後に前述のリスト要素が出力されることになります。
DOMを用いて出力場所を指定しているため、このスクリプトを呼び出すための、
<script type="text/javascript" src="social-script.js"></script>
はhead要素だけでなくbody要素のどの場所に記述してもOKという超簡単設置仕様であります。
なので、理想的にはbody要素の最下部に記述するのが良いのではないでしょうか。
無料ダウンロード
無料でダウンロードできますので、ご自由にお使いください。
毎回恒例なので今回も一応念のために書いておくと、「本プログラムで発生した如何なる損害も当方では負いかねます。了承いただけた方のみご利用ください。」と言っておきます。
損害が発生するようなスクリプトでもないけどね。
ダウンロードはこちら。
http://www.1-firststep.com/samplephp/social-script/social-script-v1.1.zip
2013年8月18日追記:FacebookやGoogle+、Twitterボタンに加え、はてなブックマークのボタンもまとめて横一列に、しかもさらに簡単に設置できるように改良したスクリプトを公開しました。使い方の解説とダウンロードはこちらのページをご覧ください。