Facebookページ埋め込み時のレスポンシブ設定（JS）

「Facebookページの埋め込み、デバイス幅に合わせてリサイズしたいな〜〜」となった時に、こういう記述をしました。

「Facebook for Developers」で自動生成されたカスタムデータ属性の値を、JSで操作します。
※「こうしたほうが楽だよ〜〜」「ここちがうよ〜〜」など、ご教示いただけますと幸いです。やさしめにお願いします。

手順

1. 自動出力された.fb-pageをJSで定義
2. .fb-page内のdata-width・data-heightに、JSから値を指定
   (JSではdataset.widthとdataset.height)
3. デバイス幅で条件分岐しつつ、JSで数値を調整（幅は最大500）

html

▼Facebook for Developersから出力したHTML

<div class="fb-page" data-href="<!--自動出力されたURL-->" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
  <blockquote cite="<!--自動出力されたURL-->" class="fb-xfbml-parse-ignore">
    <a href="<!--自動出力されたURL-->">
    代替テキスト
    </a>
  </blockquote>
</div>

JavaScript

{ // Facebook埋め込みレスポンシブ対応
  const fb_page = document.querySelector('.fb-page');

  if (matchMedia('(max-width: 320px)').matches) { // ~iPhone5
    fb_page.dataset.width = '260';
    fb_page.dataset.height = '400';
  } else if (matchMedia('(max-width: 768px)').matches) { // ~iPhone6/7/8
    fb_page.dataset.width = '300';
    fb_page.dataset.height = '480';
  } else { // largeDevice
    fb_page.dataset.width = '500';
    fb_page.dataset.height = '500';
  }

  // 出力チェック用
  // console.log(fb_page.dataset.width);
  // console.log(fb_page.dataset.height);
}