Facebook「Page Plugin」のレスポンシブ対応は「縮むけど、伸びない」と心得る!

Page Pluginのレスポンシブ対応は縮むけど伸びない

2015年6月23日で提供終了となるFacebookの「Like Box」

その後継として新たに提供が始まった「Page Plugin」

これがなかなかのクセモノでレスポンシブWEBデザインに対応する為に覚えておいたほうがいいなと思うことがありましたので共有致します。

Facebookの「Page Plugin」は縮むけど伸びない

CSSでのレスポンシブ対応が困難に

いままでの「Like Box」であれば、CSSに横幅を100%になるよう指定すればなんとかなる部分があったんですけど、新しい「Page Plugin」ではCSSでのレスポンシブ対応が難しくなってます。

やって出来ないことはないでしょうが…「そこまでしてやる必要あるか?」ということを考えたらCSSで調整することを諦めることにしました。

一応、「Page Plugin」側で表示エリアの横幅から最適なサイズを計算して自動調整するような仕様になっているので、今回はFacebookの仕様を素直に受け入れようと思います。

「Page Plugin」は横幅500pxで指定しておく

結論から言うと、「Page Plugin」のコードを作成(後述)するときは、横幅を500pxで指定するのが最善策です。

例えば、当ブログでは表示幅304pxのサイドバーに横幅(data-width)を500pxで指定したPage Pluginを設置しています。

Page Pluginに指定した横幅の値のほうが大きいですが、ちゃんとサイドバーの表示エリアの中に収まってくれます。これはPage Pluginが横幅を自動調整してくれるからです。

「Page Plugin」は縮むけど伸びないの正体

いろいろ考える中で、「Page Pluginの横幅を指定しなければ100%になるんじゃないの?」といったことも考えましたが、デフォルトが340pxになっているので、表示幅が340px以上のエリアでも、横幅340pxで表示されます。

例えば、表示幅400pxのところに、横幅500pxを指定したPage Pluginと、横幅指定なしのPage Pluginを設置してみます。

PagePluginの横幅を指定しなければ340pxで表示される

上の画像の通り、横幅を指定しなければデフォルトの340pxで表示されます。

これが「Page Plugin」は縮むけど伸びないの正体です。

なので、少々乱暴ではありますが、「とりあえず横幅は500px指定しておくべし」ということですね…

これを「レスポンシブ」とあまり言いたくないですけどね。

コード作成設定例

ではでは、Page Pluginの作成例を紹介します。

PagePluginに必要な情報を入力

Page Plugin」の設定ページで上の画像のように必要事項を入力します。

「Facebook Page URL」にFacebookページのURLを入力、「Width」に「500」を入力します。「Height」はご自身のブログ・HPのデザインに合わせて調整します。

続いて、チェックボックスをON・OFFして各種設定していきます。

Adapt to plugin container widthチェックを外すと自動調整をしてくれない

「Adapt to plugin container width」は必ずチェックを入れるようにして下さい。これを外すと上の画像のように横幅の自動調整をしてくれなくなります。(ちなみに、僕がPage Pluginを導入したタイミングではこんなオプションなかったです。)

それ以外のチェックボックスは見た目が変わるので、チェックをつけたり消したりしてお気に入りの表示を探してみてください。

入力が終わったら「Get Code」でコードを取得します。

PagePluginのコードを取得

表示されたコードの「1. Include the〜」のボックス内のコードは<body>の直下、「2. Place the code〜」のボックス内のコードはPage Pluginを表示したいところにそれぞれ設置します。

あとは、表示幅を変えつつリロードしながら表示の確認をして問題なければ完了です!

レスポンシブの表示確認は「Emmet Re:View」を使うのがなかなか便利ですよ。なかなかじゃないか。超絶か。

よっしーのひとこと

よっひー

と、いうことで、たらハコのFacebookページも宜しくお願いいたします。

ヒントを下さったNobuo(@Nobuo_Create)さんに感謝です!

そうそう、僕のブログもちょこっと紹介されている人気WordPressテーマ「マテリアル」もよろしくです!

まぁ。僕はStinger5をいそいそと自分で改造してテーマ作っているので、使ったこと無いんですけど…スミマセン。

ではまた。