いいねボタンの設定、色々まとめ

レイアウトはさておいて、個別ページにMixiとFacebookのいいねボタンを追加。

MixiはデベロッパーセンターでID登録したら、ダッシュボードに戻って、メニューのMixi plugin>新規サービス追加をクリック。
Facebookは開発者のページからLike Buttonを開いて、設定したらGetcodeで出てきたソースをコピペ。
個別ページにいいねボタンを置きたい場合は、リンク先をこんなカンジで。
<div data-href="<$mt:EntryPermalink$>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>

Facebookでいいねボタンを押した時に表示されるイメージが反映しない場合、画像が小さいとエラーになることがあるらしい。少なくとも200x200px必要。
【OGP対応】 og:image で画像を指定しても表示されない... →画像サイズを確認しよう!

以前、og:imageの表示に一工夫してあって感心したページ。
MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法
でもRainierではOGPに対応してあるし、記事中の画像のあるなしで分岐するようになったので、今回は使わないかな。

最後にデバッガーに通してみた。
あ、「og:image:url」に指定された値「/img/xxx.gif」はタイプ「url」としてパースできない・・・と言われた。
フルパスで書かないとダメなのかな?
あと、meta property="fb:admins"が入ってません 。
これはどこで取るんだっけ?
こちらを参考にしてみた。
Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは

あと、以前のバージョンではいいねボタンを押した時に表示されるコメント欄が切れたりしましたが、Rainierではそういう現象は出ませんでした。
以前のバージョンの不具合は、blog.cssの.assetをoverflow: visible;で解決することを確認済み。
つまり、いいねボタンを含む要素自体にoverflow: hidden;があるとコメント欄が切れるということでした。

Tag:mt