Facebook


Facebookでブログ記事を投稿するとき、Facebook側でサムネイルを自動的に設定してくれますが、これが結構適当で。手動で共有するときは直せるけど、アプリケーション経由で投稿すると直せないんですよね。良い画像を選んでくれない程度ならともかく、広告バナーが選択されてしまうこともあってこれはちょっと直したい、出来ればどの画像が表示されるかを自分で指定したいなと。

というわけで、設定。



1. MovableTypeで設定する

参考にしたのはこのあたり。

MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法 [C!]

要は、meta要素にサムネイルの情報を入れてやればよいと。
このブログでのテンプレートでの設定はこんな感じ。


<meta property="og:title" content="<$mt:EntryTitle remove_html="1"$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:site_name" content="NOBODY:PLACE" />
<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock>
<mt:If name="og_image" like="^(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)$">
<meta property="og:image" content="<$MTGetVar name="og_image"$>" />
<mt:Else>
<meta property="og:image" content="http://static.nplll.com/images/author.jpg" />
</mt:If>
<meta property="og:description" content="<$MTEntryExcerpt convert_breaks="0" words="120" $>" />
<meta property="fb:admins" content="710856701" />


やっていることは、ブログ本文の中から画像ファイルを探してきて、もしあればその画像を、無ければプロフィール画像をFacebookのサムネイルに設定(og:image)。それだけです。

サムネイルとしてきちんと設定出来ているかどうかはFacebookのデバッガーでチェック。

Debugger

こんな感じで表示されていればOK。


14_01.jpg



2. サムネイル画像のサイズを調整する

次にサムネイルの画像サイズ。Facebookのサムネイルには横長と正方形と2種類があります。どちらになるかは、サムネイル画像のサイズで自動的に決まります。なので、これが上手く行かないと、こんな感じに表示されてしまいます。


14_01_01.jpg


このサムネイル、本当はこういう画像なんですけど、正方形に切り取られちゃってます。


Ingress


この仕様は結構頻繁に変更になりますが、2015年5月現在はこんな感じの仕様になっています。


Facebookで投稿する時の適切な画像サイズとは?

画像サイズの横幅が398px以上かつ高さが209px以上の場合、大きいサムネイルで表示
小さいサムネイルのサイズは、158×158pxになる



先ほどの画像は、幅は500pxあったんですが縦が180pxしかないので小さいサムネイル(正方形)になってしまっています。もう少し縦を長くすれば大きな画像で表示されたのに。サムネイルを作るときには、次のいずれかで作ると、綺麗に意図したとおりに表示出来るようです。


  • 158px以上の正方形で作る
  • 幅398px以上かつ高さ209px以上で作る


なるほど。これで作れば良いのね。



以上、簡単なまとめでした。