Facebookの埋め込みを動的に追加する

Facebookの投稿の埋め込みを動的に追加する方法を試してみます。

サンプルコード

Facebookの埋め込み投稿のページからコードを取得します。

ステップ1のコードをコピーして、開始のbodyタグ直後に追加します。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v17.0" nonce="r80bZILX"></script>

ステップ2のコードをコピーして、埋め込み先に追加します。(下記は見やすいように改行を追加しています。)

<div class="fb-post" data-href="https://www.facebook.com/HatsuneMikuOfficialPage/posts/pfbid02Ce6ncCNXbYYd27UbUafLYyz4wZBrNA4R1R6evqaPm9KbQoWwwnMfEKxERvNWwip7l" data-width="500" data-show-text="true">
  <blockquote cite="https://www.facebook.com/HatsuneMikuOfficialPage/posts/825162938974375" class="fb-xfbml-parse-ignore">
    <p>Hatsune Miku “Magical Mirai 2023” theme song 『HERO』will be premiere at 19:00 JST today!
    

    #HatsuneMiku #MagicalMirai2023</p>
    <a href="https://www.facebook.com/HatsuneMikuOfficialPage">Hatsune Miku</a>さんの投稿&nbsp;
    <a href="https://www.facebook.com/HatsuneMikuOfficialPage/posts/825162938974375">2023年6月29日木曜日</a>
  </blockquote>
</div>

これでページの表示を行うと、.fb-postの中身が置き換えられ、iframeでの埋め込みができました。
Facebook投稿の埋め込みのデモページ

埋め込み部分のタグを必要な内容のみに抜粋すると、以下のようになります。

<div class="fb-post" data-href="https://www.facebook.com/HatsuneMikuOfficialPage/posts/pfbid02Ce6ncCNXbYYd27UbUafLYyz4wZBrNA4R1R6evqaPm9KbQoWwwnMfEKxERvNWwip7l" data-width="500" data-show-text="true"></div>

data-href内にFacebookアカウントと投稿IDを変更すれば、他の投稿の埋め込みもできます。
埋め込みコード変更のデモページ

次に動的な埋め込みを試してみます。
ボタンクリックで#wrapper内にFacebook投稿の埋め込みが追加される想定です。

<button id="add">追加</button>
<div id="wrapper"></div>

埋め込みタグを動的に#wrapper内に追加してみます。

document.querySelector("#add").addEventListener('click', function() {
	// 要素の追加
	document.querySelector("#wrapper").innerHTML = `<div class="fb-post" data-href="https://www.facebook.com/HatsuneMikuOfficialPage/posts/pfbid02Ce6ncCNXbYYd27UbUafLYyz4wZBrNA4R1R6evqaPm9KbQoWwwnMfEKxERvNWwip7l" data-width="500" data-show-text="true"></div>`;
});

この場合は.fb-postの中身は置き換わりません。
動的な追加のデモページ1

埋め込みタグの追加後に、FB.XFBML.parse() を実行します。

document.querySelector("#add").addEventListener('click', function() {
	// 要素の追加
	document.querySelector("#wrapper").innerHTML = `<div class="fb-post" data-href="https://www.facebook.com/HatsuneMikuOfficialPage/posts/pfbid02Ce6ncCNXbYYd27UbUafLYyz4wZBrNA4R1R6evqaPm9KbQoWwwnMfEKxERvNWwip7l" data-width="500" data-show-text="true"></div>`;

	// Facebookの埋め込みコードの更新
	FB.XFBML.parse();
});

これでボタンクリック後に埋め込みを追加することができました。
動的な追加のデモページ2