2013年7月23日火曜日

javascriptでソーシャルプラグインを追加

javascriptでカンタンにいいね!ボタンなどのソーシャルプラグインを追加できないか調べてみた。

jquery_socialbuttonというのがヒットする。

【本家こちら】
http://itra.jp/jquery_socialbutton_plugin/

【解説ページ】
http://quartet-communications.com/info/technology/9334
http://www.koikikukan.com/archives/2012/06/29-003333.php


とても便利です。だけどjQueryが必要というのが、
現在自分が作っているwebアプリケーションとの相性がよくなかった。

そこで、jQueryに依存しないように少し手を加えてみた。jQuery不要なコードにちょっと改造
本家ではdivタグに任意のclassを設定し、jQueryのセレクタで複数のボタンを一気に表示できるように作られていたが、
今回はその機能を消した。
あとLINEを追加した。

jsファイル


【使い方】
1.適当な場所でjsファイルを読み込む
<script src="http://www.knowhave.com/js.socialbutton-1.9.0.js" type="text/javascript"></script>

2.ソーシャルプラグインを設置したい場所にdiv要素を作る。任意のidをふっておく。
<div id="facebook_like"></div>

3.socialbutton関数でソーシャルプラグインを読み込む
<script>
    socialbutton(document.getElementById("facebook_like"),'facebook_like');
</script>

socialbutton関数の第一引数はソーシャルボタンを設置したい要素。
第二引数は設置したいソーシャルボタンのサービス名を下の一覧から選んで入れる。
"line_send"
"facebook_like"
"twitter"
"gree_sf"
"evernote"
"hatena"
"google_plusone"

実際にソーシャルプラグインを設置してみたページ

0 件のコメント:

コメントを投稿