ソーシャルボタンを表示する JavaScript

Web

Facebook「いいね!」ボタンが設置できるようになりました - はてなダイアリー日記 のように，はてなを始め様々なメディアがソーシャルボタンを設置するようになってきました．そんな訳で，そのうち自分の Web サイトの方も整備しようと思い立ち，取りあえずソーシャルボタンを表示する JavaScript を記述する事から始めてみました．

使い方は，ソーシャルボタンを挿入したい箇所で smb.show() 関数を呼ぶだけです．第 1 引数には表示したいソーシャルボタンの種類を第 2引数には表示オプションをそれぞれ "|" （OR 演算子）で結合しながら指定します．ダウンロードおよび詳細は，上記リンク先を参照して下さい．

<script type="text/javascript"><!--
    smb.show(smb.delicious | smb.livedoor | smb.yahoo | smb.buzzurl | smb.newsing | smb.evernote);
    smb.show(smb.hatena | smb.twitter | smb.facebook | smb.gree, smb.detail);
//-></script>

カウントを表示させるかどうかは一括設定です．また，ソーシャルボタンの順番も固定なので，上記のように複数回に分けてコールして調整するか，smb.js ファイル自体を書き換えるかして対応して下さい．現在，対応しているソーシャルボタンは以下の通りです．mixi クリップは API key が必要なので保留中．

JavaScript のコードを記述するのは初めてなのでいろいろ変な所もありそうですが，おいおい直していきます．尚，md5.js (mitsunari@cybozu labs) で公開されている MD5 のライブラリを使用していますが，関係のある部分は Delicious でのリンク部分のみなので，ここをもうちょい適当にすると smb.js ファイル単体でも動作します．

レイアウトについて

ソーシャルボタンの表示スクリプトを書いていて，一番の問題はレイアウトの問題でした．具体的には，以下の 3 点辺りが問題となりました．

  1. Twitter の呟き数を表示させた際に右側の余白の調整が難しい．
  2. Facebook の「いいね！」がゼロの場合に右側にかなり余白が空いてしまう．
  3. 旧ボタン群 (16px) と 新ボタン群 (20px) を混在させた場合の垂直方向の調整．

1. に関しては，例えば上で示した画像では割とうまく配置されているのですが，下図のように呟き数が減ってくると変な余白が空き始めます．Firefox では呟き数が 3 桁の時が見栄えが良いのですが，ブラウザが変わってフォントも変わってくると異なる表示になるので難しいところです．

現状は，他との兼ね合いでボタン間の余白を 7px に設定し，かつ呟き数が表示されている場合は Twitter とその次のソーシャルボタンの余白はゼロにする事で，まずまず見られるようになりました．この値は，horizontal と言う変数で定義しています．

2. はどうしようもないので，Facebook のソーシャルボタンは 1 番右側に持ってくることで回避しています．Facebook の「いいね！」ボタンは，ゼロのときも 0 と表示して欲しいなぁと言うのが正直なところです．

3. は，現状は上下中央になるように小さい画像の上下の余白を調整しています．この値は，vertical と言う変数で定義しています．

Related Pages