2024.11.28/更新しました。
●SDKを新しく更新、app_IDも不要になりました。(ソースは最後に掲載しています)
ホームページなどに埋め込んだfacebookが表示されない件について書いています。
>出現の解決策は最下のタイトル「ん？」に記載しています(7月23日：追加記載)
エラー要因は『ログイン』
いやいや～それは無いでしょ？
と言われそうですが。
会社アカウントでも個人また他人の埋め込みも表示できません。そこでログアウトしました。
▼facebookのログアウトは『自分マーク』クリックします。（再ログインできる人だけお試しください）
▼難なく表示されました。ほらね。
この表示異常と同時に起こった現象
自分のサイトに埋め込んだ「いいね」ボタンが押せなくなりました。
facebookもしくはGooglechromeの構造変更によるものと推測します。
対処法①シークレットウインドウを使う
リンクを右クリックで表示される「シークレットウインドウ」で開きます。
これで閲覧確認はできます。
対処法②Edgeを使う
閲覧だけでは困ると言う方は『Edge』をご使用ください。
こちらは今のところ問題が無いようです。
上記の方法でも解決しなかった場合は原因は別にありますので、挿入コードの再発行などをお試しください、古いものである場合は互換性が無くなっている可能性があります。
ん？
WordPressのウィジェットPluginなら出現するのに、どうして？？
SDKのロードを確実に実行する順序の見直し
fb-rootやfb-pageなどの要素が正しく配置されているか、また、SDKが確実に読み込まれるよう、シンプルな構成で試してたところ表示されました。
※facebookページプラグインでも最新のSDKを得る事ができます。現在の最新は「version=v21.0」です(2024.11.28)
※app_IDを付与する場合は赤い文字のところへ挿入してください。基本不要になったようです。
<div class="fb-page" data-href="https://www.facebook.com/あなたのURL/" data-tabs="timeline" data-width="400" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/あなたのURL/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/あなたのURL/">あなたのアカウント名</a></blockquote></div>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v21.0&appId=あなたのID"></script>
▼解決です。
WEBサイトページにも使えました。