2024.11.28/更新しました。
●SDKを新しく更新、app_IDも不要になりました。(ソースは最後に掲載しています)
ホームページなどに埋め込んだfacebookが表示されない件について書いています。
エラー要因はFBの構造変更、問題は『ログイン』
グルグル問題を発症しているのはGoogleChromeでご覧になっている場合と思います。一度、ログアウトしてfacebookページを確認してください。またEdgeやGoogleのシークレットモードでも確認することができます。上記の操作で表示されたらなら、原因は埋め込みコードが古いのかもしれません。
▼facebookのログアウトは『自分マーク』をクリックします。
※再ログインのパスワードを事前に確認してくださいね
シークレットウインドウを使って確認
リンクを右クリックで表示される「シークレットウインドウ」で開きます。
これで閲覧確認はできます。
Edgeで確認
閲覧だけでは困ると言う方は『Edge』をご使用ください。
こちらは今のところ問題が無いようです。
上記の方法でも解決しなかった場合は原因は別にありますので、挿入コードの再発行などをお試しください、古いものである場合は互換性が無くなっている可能性があります。
解決：WordpressのウィジェットPluginを最新の状態にする。
更新したプラグインの場合は問題なく表示されます。画像の右は表示されませんが、カスタムHTMLにコードを記載したものです。
解消：最新のfacebookページプラグインを取得する
最新のプラグインを取得する事。
facebookページプラグイン
SDKのロード順序の見直すと表示できる場合もある。fb-rootやfb-pageなどの要素が正しく配置されているか、また、SDKが確実に読み込まれるよう、構成変更したところ表示されました。
下記は2024年時点のコードです。
※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ページに埋め込んでも問題なく使えました。