こんにちは！iframeをイフレームだと思っていたMizutani(@sirycity)です。アイフレーム。

今日はFacebookの投稿をReactに埋め込む方法についてです。

結論

こう。

import React, { useRef } from 'react'
import { Helmet } from 'react-helmet'

export const FB = () => {
  const ref = useRef(null)

  return (
    <>
      <Helmet>
        <script
          async
          defer
          crossOrigin="anonymous"
          src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0"
          nonce="F5crYADj"
        />
      </Helmet>

      <div
        ref={ref}
        className="fb-page"
        data-href="https://www.facebook.com/profile.php?id=100009002733638"
        data-tabs="timeline"
        data-width={ref?.current?.clientWidth ?? ''}
        data-height=""
        data-small-header="false"
        data-adapt-container-width="true"
        data-hide-cover="false"
        data-show-facepile="false"
      />
    </>
  )
}

はじめに

Facebookの埋め込みは超簡単で、ページプラグインに書いてあるとおりにすれば終わりです。

ただ、実際にはReactだと属性の名前変えたり文字がちぎれたりとそこそこ面倒なのでその方法について書きます。なお、今回はとりあえず表示できる所までです。完璧なレスポンシブとかパフォーマンスとか設定とかを考慮するともっと色々いるけどそこはパス。

方法

react-helmetをimport

まずはじめにreact-helmetをimport。headを簡単に書けるやつです。

npm i react-helmet

コンポーネントを作る

reactとhelmetをimportしてコンポーネントを作ります。名前は適当。

import React from 'react'
import { Helmet } from 'react-helmet'

export const FB = () => <div>あああああ</div>

scriptを記入

helmetの中にFacebookのscriptを記入。コピペでOK。FBの開発者登録とかしてる場合はもうちょいsrcが長くなるけど、これだけでとりあえず動く。nonceってのはなんだろう…不明。

import React from 'react'
import { Helmet } from 'react-helmet'

export const FB = () => (
  <>
    <Helmet>
      <script
        async
        defer
        crossOrigin="anonymous"
        src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0"
        nonce="F5crYADj"
      />
    </Helmet>

    <div>あああああ</div>
  </>
)

埋め込みたいFacebookのページのURLをコピー

今回は例として河村たかし市長のFacebookを使ってみます。なんで？

ページのURLを控えておきましょう。ちなみにFBは自分のページを好きなURLにできるんですが、河村さんはデフォルトのまんまみたい。(名古屋一どうでもいい豆知識)

コンポーネントを追加

これも丸々コピペ。さっき控えたURLをdata-hrefの値に入れています。

import React from 'react'
import { Helmet } from 'react-helmet'

export const FB = () => (
  <>
    <Helmet>
      <script
        async
        defer
        crossOrigin="anonymous"
        src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0"
        nonce="F5crYADj"
      />
    </Helmet>

    <div
      className="fb-page"
      data-href="https://www.facebook.com/profile.php?id=100009002733638"
      data-tabs="timeline"
      data-width=""
      data-height=""
      data-small-header="false"
      data-adapt-container-width="true"
      data-hide-cover="false"
      data-show-facepile="false"
    />
  </>
)

この時点で動くには動きます。ただし文字がちぎれたりするので、それを直すためにちょっと足す。

useref追加

fbのコンポーネントの横幅はdata-widthってので決定します。この値をuserefを使って明示的に常に自分自身の横幅にします。こう。

import React, { useRef } from 'react'
import { Helmet } from 'react-helmet'

export const FB = () => {
  const ref = useRef(null)

  return (
    <>
      <Helmet>
        <script
          async
          defer
          crossOrigin="anonymous"
          src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0"
          nonce="F5crYADj"
        />
      </Helmet>

      <div
        ref={ref}
        className="fb-page"
        data-href="https://www.facebook.com/profile.php?id=100009002733638"
        data-tabs="timeline"
        data-width={ref?.current?.clientWidth ?? ''}
        data-height=""
        data-small-header="false"
        data-adapt-container-width="true"
        data-hide-cover="false"
        data-show-facepile="false"
      />
    </>
  )
}

ref?.current?.clientWidth ?? ''ってのは横幅か空文字列みたいな意味です。optional chainingとnullish coalescingの合わせ技。

さいごに

fbは日本ではそこまでユーザーいないけど使う場面はそこそこあるんじゃないかな？ぜひ使ってみて下さい。