Reactでインスタグラム投稿の埋め込みを行った時にハマったこと

2 min read読了の目安(約2100字 2

概要

あけましておめでとうございます、みなさん新年いかがお過ごしでしょうか。
私は新年早々、インスタグラム投稿の埋め込みとたたかっていました。。新年一発目はそこでハマった内容を書いてみます。

やりたいこと

課題と原因

  • 埋め込んだコードの投稿が表示されず、下記のような結果になりました。
  • 原因は、埋め込んだコードに含まれているscriptタグ//www.instagram.com/embed.jsが実行されていないことです。これをどうにかして実行させる必要があります。

対応

実装サンプル

export default function InstagramReactSample() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    // 自作で用意したバックエンドからインスタグラムの埋め込みコードを取得しセット(詳細は割愛)
    getPosts(setPosts);
  }, []);

  useEffect(() => {
    // 投稿の描画が終わったらスクリプトを読みこませる。
    if (posts.length > 0) {
      const script = document.createElement("script");
      script.type = "text/javascript";

      var attr = document.createAttribute("src");
      attr.value = "//www.instagram.com/embed.js";
      script.setAttributeNode(attr);

      const head = document.getElementsByTagName("head")[0];
      head.appendChild(script);
    }
  }, [posts]);

  return (
    {/* インスタグラムの埋め込みコード */}
    <div>
      {posts.length > 0 && (
        <>
          {posts.map((p) => {
            return (
              <div dangerouslySetInnerHTML={{ __html: p.instagramCode }} />
            );
          })}
        </>
      )}
    </div>
  );
}