以前から気になっていたソーシャルボタンを修正して満足していたのもつかの間。
また別の問題に気がつきました。

facebookのいいねボタンを押すと・・・
あれ？
コメント欄が切れる？

いいねボタンを押した時に表示されるサムネイル、タイトル、サマリーが表示されるコメント欄。
自分のコメントを入れたりしてフェイスブックのタイムラインに表示させる機能の筈なのですが、上手く表示されません。

色々調べてみるとこのコメント欄はiframeを使用しているらしく、
CSSのリセットなどで、このiframeに対して何か指定していると問題が出る場合が多いらしい。
例えば「（親要素に対して）幅は１００％ね！」的な。
そこで、CSSを調べてみたが私はiframeに対して設定をしていません。

念のため、以下のコードを追加して様子を見るも・・・・
.fb_like iframe { max-width:none !important;}
変化無し。

じゃあ、どの要素に幅の影響を受けているかを見てみた。

どうやら、２カラム構成の右側のdivの外枠に影響を受けてるっぽい。
ふむ

でもfloatは枠の外へ飛び出しちゃう筈だから・・・divのサイズに影響を受け・・・あれ？
float解除しちゃえばその限りじゃないか。

じゃあclearfix？
まさか（笑）

って事で、クリアフィックス関係の記述を見ていたら、
overflow:hidden
の記述が。

これって・・・要るんだっけ？
はみ出し要素を非常時にしてしまうこのタグ、なんか今回の事件に深く関係があるような。

クリアフィックスについての記述もあれこれ調べたのですが、特にoverflowを推奨している記事も無く、自分でもなんで設定したか憶えてないし。じゃ、いっちゃいますか！
って事で、消してみた。

じゃじゃーん！コメント復活！
orz

で、調べていく過程のなかで、OGPというデータをメタとして持たせると、このサムネイルとかをきちんと調整できるという事が記事に載ってました。
OGPなんて聞いたことありませんでしたが、ソーシャルボタンなどに情報を受け渡すためのデータだと思っておけば大きく間違えはしないと思います。

勉強してない訳じゃ無いけど、積極的に調べている訳でもないからなぁ。
こういう新しい事への対応が遅くなって、なんとなく自分の怠慢かなと落ち込むことしりき。

で、気を取り直してINST-webもOGP対応しました(^^ゞ
特にフェイスブックのいいねボタンでこれまでよりマシな共有になるかな？