Facebookページプラグインをレスポンシブ対応で埋め込む方法と注意点

ホームページやブログにFacebookの投稿を埋め込むFacebookページプラグインは便利ですが、デフォルトの設定ではサイズが固定されています。

そこでこの記事では、ディスプレイサイズに合わせて自動でサイズ調整を行ってくれるレスポンシブ対応の設定方法を解説します。

Facebookプラグインをレスポンシブ対応で埋め込む方法

より見やすくページプラグインを挿入するためには、レスポンシブ対応にも気を配りながら埋め込む事が重要になります。

ページプラグインのコードとサイトのCSSを軽く加工するだけで実装可能なので、ぜひ参考にしてみてください。

ページプラグインを作成する

初めに、表示させるFacebookページのURLを取得して、「FacebookページのURL」という項目に入力します。

右側の「タブ」にはタイムラインとイベント、そしてメッセージという3種類を表示対象として選べるので、必要な物を入力しておきましょう。

「幅」と「高さ」はその名前の通り表示する際のサイズを設定する項目で、幅は180～500ピクセルの間で、高さは70ピクセル以上で設定を行えます。

スモールヘッダーの使用やカバー写真の非表示など、その他の細かい設定は「表示オプション」から実行して、好みのページプラグインを完成させましょう。

サイトへの貼り付け用コードを取得する

コードを取得する前に「plugin containerの幅に合わせる」に必ずチェックを入れる事を忘れないで下さい。

その後、「JavaScript SDK」を選択すると、Step2とStep3のコードがそれぞれ表示されます。

Step2は、サイトのHTMLソース内のタグ直後にそのまま貼り付ける物であり、加工の必要はありません。

一方のStep3に表示されたコードは、サイト内の表示させたい箇所に貼り付ける物なので、このコードを加工してレスポンシブ対応を実行します。

Step3のHTMLコードを加工する

Step3で取得したコードは、任意のクラス名を使って囲んで加工し、レスポンシブ対応を行います。

<div class="任意のクラス名">
<div class="fb-page" data-href="https://www.facebook.com/○○○/" data-
tabs="timeline" data-width="○○○" data-height="○○○" data-small-
header="false" data-adapt-container-width="true" data-hide-cover="false"
data-show-facepile="false"><blockquote
cite="https://www.facebook.com/○○○/" class="fb-xfbml-parse-ignore"><a
href="https://www.facebook.com/○○○/">sincar
design</a></blockquote></div>
</div>

こちらはStep3のコードを、1行目の<div class="任意のクラス名">と、最後の行の</div>で囲っただけです。

囲われている部分は生成されたものそのままで、いじる必要はありません。

"任意のクラス名"は自由に決めてOKですので、「fb-plugin-responsive」など分かりやすいものを設定しておきましょう。

CSSを調整する

続いて、サイトのCSSに下記のコードを追記してください。

/* スマホ用（767px以下） /
@media screen and (max-width: 767px) {
.任意のクラス名 {
width: 100%;
max-width: ○○○px;
}
/ PC用(768px以上) */
@media screen and (min-width: 768px) {
.任意のクラス名 {
width: ○○○px;
}

ここに記載した「任意のクラス名」は、Step3においてコードで囲んだものを指定してください。

○○○の部分はレスポンシブ表示する際の最大サイズとなり、180～500の値を指定できます。

例えば450pxに指定すると、パソコンから閲覧した場合には、画面サイズに合わせてサイズが調整され、最大表示の際のサイズが450pxとなります。

ページプラグインをレスポンシブ対応させる際の注意点

続いて、レスポンシブ対応を実行する際に注意すべき事をまとめて紹介していきます。

サイズ調整されるのは読み込み時のみ

レスポンシブ対応は、ページを読み込みする時に限定して行われるため、閲覧中にディスプレイやウインドウのサイズを変更した場合に、リアルタイムにサイズ変更は行われません。

例えば閲覧中のユーザーがスマホの画面を回転させて横幅が変わった場合、リロードしない限りFacebookプラグインの表示サイズは変わらずそのままになります。

リアルタイムでブラウザサイズを調整させる方法もありますが、これにはHTMLやCSSだけでの実現は難しく、自前でJavaScriptを用意する必要があるため、かなりハードルは高くなってしまいます。

高さは調整されず一定

この方法でレスポンシブ対応を行った場合、調整されるのは幅に限定されてしまい、高さを変更する事は出来ません。

高さはコード取得時に指定したサイズに固定されるため、調整の対象外となる点を覚えておきましょう。

既にお伝えした通り、高さは70ピクセル以上で設定できますから、プレビューを繰り返しながら適切な高さを見つけて設定するようにして下さい。

まとめ

プラグインをレスポンシブ対応させる方法は、ページプラグインを作成した上で貼り付け用コードとサイトのCSSを調整する事で実行できます。

今回紹介した注意点についても深く知っておき、より見やすく表示できるように微調整を繰り返しながらプラグインを完成させましょう。