FacebookのPage Pluginのレスポンシブの動作:メモ

FacebookのPage Pluginがレスポンシブだと書いていたり対応していないと書いていたりでよく分からなかったため、実際に試したことをメモとして。

なお、2015年4月1日現在の内容です。

[2015.6.9 横幅の最小値を追記]

FacebookのPage Plugin

Likeboxのコード取得用のページに行くと以下の文言があります。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

上記の「Page Plugin」という部分がリンクになっており、下記のページに移動できます。

Page Plugin

ここでコードを取得できます。

横幅

上記ページの下部にSettingの項目があり、widthには以下のような説明があります。
※以下は2015.6.9現在の情報です。

The pixel width of the plugin. Min. is 180 & Max. is 500

つまり、横幅の最大は500px。ちなみに最小は180pxで、デフォルトは340pxです。
なお、この記事を作成した際には280pxが最小でした。

Page Pluginのレスポンシブ対応

本題ですが、早速結論に。

500px以下のブラウザやデバイスのサイズでは、該当ページにアクセスした時点の幅にフィットした形で表示されます。

表示後にブラウザの幅を変化させても幅はかわりませんでした。cssのメディアクエリの様な変化はしません。

結び

ブラウザの幅変化には対応していませんが、スマホなどの小さなディスプレイへの対応としては特に問題もないと思います。