【 公開 】共有ボタン設置プラグイン

【 追記 】

2014.8.17　小さいサイズのボタンも選べるようになりました。






ども、楽しいアメブロカスタマイズのみけねこ（ニャ～♪）です。


記事下部に共有ボタンを設置するプラグインがカスタマイズできるようになったので設置方法を公開します。



新ブログデザインで初めてjQueryのプラグインを利用される場合は、フリープラグインにjQueryのライブラリーを読み込む記述を入れる必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

↑こちらのスクリプトをフリープラグインに書き込み、動作確認をしています。


jQueryの準備ができたら共有ボタン設置のスクリプトをフリープラグインにコピペします。



【 共有ボタン（デフォルト） 】

『アメブロでシェア』ボタンを押すと、ページのサムネイル画像つき紹介記事が書けます。


【 共有ボタン設置プラグインのスクリプト 】

<script src="http://183.181.8.122/amebloplugin/shbtn.jsp?al=l"></script>

赤文字の部分を変更することで共有ボタンの位置をカスタマイズできます。

l　・・・　左寄せ
c　・・・　中央寄せ
r　・・・　右寄せ

【 ボタンの表示・非表示のカスタマイズ 】

<script src="http://183.181.8.122/amebloplugin/shbtn.jsp?al=l"></script>

赤文字の後ろにパラメーターを追加することでボタンをカスタマイズすることができます。

&fb=0　・・・　フェイスブックのボタンを非表示
&tw=0　・・・　ツイッターのボタンを非表示
&hb=0　・・・　はてなブックマークのボタンを非表示
&gp=0　・・・　Google+のボタンを非表示
&mx=0　・・・　mixiのボタンを非表示
&ln=0　・・・　LINEのボタンを非表示
&am=0　・・・　アメブロのボタンを非表示
&nw=0　・・・　なうのボタンを非表示

&sz=s を追加すると、ボタンのサイズが小さくなります。


LINEとなうのボタンを非表示にする場合

<script src="http://183.181.8.122/amebloplugin/shbtn.jsp?al=l&ln=0&nw=0"></script>

Mac OS X のDockメニュー風にカスタマイズすることもできます。



画像ではわかりにくいかもしれませんが、カーソルを載せるとヌメヌメとアイコンが大きくなりますｗ


【 Mac OS X のDockメニュー風共有ボタン設置プラグインのスクリプト 】

<script src="http://183.181.8.122/amebloplugin/shbtn.jsp?dc=1"></script>

アイコン位置は中央寄せになります

赤文字の後ろにパラメーターを追加することでボタンをカスタマイズすることができます。

&fb=0　・・・　フェイスブックのボタンを非表示
&tw=0　・・・　ツイッターのボタンを非表示
&hb=0　・・・　はてなブックマークのボタンを非表示
&gp=0　・・・　Google+のボタンを非表示
&mx=0　・・・　mixiのボタンを非表示
&ln=0　・・・　LINEのボタンを非表示
&am=0　・・・　アメブロのボタンを非表示
&nw=0　・・・　なうのボタンを非表示

&sz=s　・・・　ボタンのサイズが小さくなります。


LINEとなうのボタンを非表示にする場合

<script src="http://183.181.8.122/amebloplugin/shbtn.jsp?dc=1&ln=0&nw=0"></script>

当ブログにはDockメニュー風の共有ボタンを設置していますので、どぞお試し下さい。

みけねこ（ニャ～♪）でした。



【 参考 】

『なう』以外のボタンはこちらのサイトのものを利用させて頂きました。

ミニ・ソーシャル・アイコン -Blog //ヴォルフロッシュ

Mac OS X 風ドックメニューが簡単に作成できる jQuery プラグイン
MITとGPLのダブルライセンス

iconDock 'dock effect' jQuery plugin