Facebookの投稿の埋め込みを動的に追加する方法を試してみます。
サンプルコード
Facebookの埋め込み投稿のページからコードを取得します。
ステップ1のコードをコピーして、開始のbodyタグ直後に追加します。
1 2 | <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のコードをコピーして、埋め込み先に追加します。(下記は見やすいように改行を追加しています。)
1 2 3 4 5 6 7 8 9 10 | <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! <iframe title="HERO / 初音ミク" width="500" height="281" src="https://www.youtube.com/embed/o4AxMk3SGUY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe> #HatsuneMiku #MagicalMirai2023</p> </blockquote></div> |
これでページの表示を行うと、.fb-postの中身が置き換えられ、iframeでの埋め込みができました。
Facebook投稿の埋め込みのデモページ
埋め込み部分のタグを必要な内容のみに抜粋すると、以下のようになります。
1 | <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投稿の埋め込みが追加される想定です。
1 2 | <button id="add">追加</button><div id="wrapper"></div> |
埋め込みタグを動的に#wrapper内に追加してみます。
1 2 3 4 | 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() を実行します。
1 2 3 4 5 6 7 | 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
コメントが承認されるまで時間がかかります。