2018.03.22 

[その2]FacebookのPagePluginをレスポンシブのリサイズに対応させる方法

Web制作


以前「FacebookのPagePluginをレスポンシブのリサイズに対応させる方法」という記事でタイトル通りの内容を紹介しましたが、今回は幅と高さをしっかり指定させる場合の方法をご紹介します。

要は隣のコンテンツと高さを合わせたいんだよ

まさにその通り。例えばこのような場合(↓)。

文章部分とFacebookタイムラインの高さが揃っています。
だけど、レスポンシブ で文章や画像を可変にした場合(↓)。

こうなりませんか?
文章部分のフォントサイズや、ボックスの高さなどを調整すれば良いのですが、文章を気持ちよく読ませたい時、なかなか面倒な作業になるかと思います。

ならば、Facebookタイムラインに合わせてもらった方が楽だよね。というお話です。

 

JavaScriptで指定しちゃおう

まず、埋め込みコード自体は ページプラグインから取得して下さい。
幅と高さは適当でOKです。


bodyタグの直下に追加するコードはそのまま入れて結構です。

 

CSSで幅を可変させる準備をします。
※今回、Bootstrapを使用したせいかこの記述がなくても動作に問題ありませんでした。
※500px以上には広がらないようです。

 

① 埋め込みコードの 5行目 data-width=”500″ data-height=”300″  部分を 17行目 data-width=”‘ + w + ‘” data-height=”‘ + h + ‘” に変更。
② 「’」でコード自体を囲います。
※見やすいよう改行していますが、実際は改行は不要です。

 

そして、タイムライン自体を貼り付ける前に、HMTL部分を見てみます。
上の図のような物を、Bootstrapで再現してみました。
埋め込み部分は、9行目 <div class=”facebook-wrapper”></div> になります。
直接HTMLには埋め込まず、Javascriptからこの部分に埋め込みコードを返します。

 

先ほど書き換えた埋め込みコードを使って以下のようにJavascriptに記載。
6行目のif文を使って如何様にも操作可能です。

 

 

 


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。