まず head フレーバーに以下のおまじない。
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><body> タグの直後が理想と書いてあったので、素直にそこに設置。 レイアウト的には特に問題はありませんでした。
で、すでに設置してあるのを含めて、 先般、 さらした story フレーバーの一部を以下のように変更。 他のボタンの順番も入れ替えたので、全部さらしときますが、 Facebook のは一番下の三行。
<!-- はてなブックマークボタン --> <a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour" class="hatena-bookmark-button" data-hatena-bookmark-title="$blog_title - $title" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <!-- Tweet Button(Tweeter Official) --> <a href="http://twitter.com/share" class="twitter-share-button" data-url="$url$path/$fn.$default_flavour" data-counturl="$url$path/$fn.$default_flavour" data-text="$blog_title - $title" data-count="vertical" data-lang="en">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <!-- Google +1 --> <g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone> <!-- Facebook Like Button --> <div class="fb-like" data-href="$url$path/$fn.$default_flavour" data-send="false" data-layout="box_count" data-show-faces="true"></div>Facebook からコードをもらうと data-width と言う引数があるのですが、これはなくてもいいみたい。 取得したコードは 450 とか言う値が与えられてて 思いっきりレイアウトを崩してくれたので抹殺したけど、 特に問題なく表示されています。
これで一通りそろったかな>ソーシャルサービス系リンク対応
え!? mixi ?…そんなサービスあったなぁ (<面倒なので遠い目しておく… (^^;> )