読み込んだFacebook ページプラグインの幅を動的に切り替える

皆さんこんにちはfujiharaです。
ナツいですね。庭の手入れのためにチェーンソーを買って作業をしたところ、 早くも夏バテをくらいました。

本日は読み込んだFacebookページプラグインの横幅を動的に切り替える方法を 紹介します。

Facebookページプラグイン

Facebookページプラグインをページに読み込む場合には ページプラグイン ページに行き表示したい
FacebookページのURLを入力しコードを取得するボタンを押すと取得できます。

仕様

コードを取得するボタンを押すとJavascript SDKとIFrame版のコードが取得できます。

2016年6月現在の仕様ですと表示できる横幅は最小で180、最大で500となっています。(デフォルト340)
この横幅については初期表示時に値が決まるとその後は変更されることはありません。

なので、動的に切り替えたい場合は再度読み込むという処理をする必要があります。

IFrameの場合にはsrcで横幅を指定できるので、IFrameのsrcを変更したものを再度読み込んであげます。

Javascript SDKの場合は以下のようなHTMLをまず埋め込みます。

<div class="fb-page" 
  data-tabs="events"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380"></div>

上記のコードを表示しておくと自動でページプラグインを表示してくれます。横幅を切り替えたい場合には javascriptでdata-width のattributeを変更してあげます。

例
JavaScript 
document.getElementsByTagName("div")[0].setAttribute("data-width", "指定する横幅");

jQuery
$("div.fb-page").attr("data-width", "指定する横幅"); や
$("div.fb-page").data("width", "指定する横幅");

最後に再表示する以下のコマンドを実行します。

FB.XFBML.parse(document, function(){});

上記のコマンドで再描画処理が走ります。またfunction(){}部分がコールバックとなっておりますので、 描画完了後の処理をここに記述することができます。

まとめ

ページプラグインがレスポンシブに未対応なこともあり、レスポンシブページに読み込む場合には レイアウトが変更されるブレイクポイントにこの処理を入れて対応することが可能になると思います。
皆さんも是非お試しください。