ウェブサイトに入れていたFacebookページプラグインから取得したタイムラインの埋め込み。気が付いたらヘッダーしか表示されておらず、タイムラインが表示されていませんでした。
調べたら海外のウェブ制作関連の掲示板で2026年10月頃から同じような質問がポツポツ出始めていました。またFacebookページの機能の廃止か？メタ社の気まぐれか？と思って、様子を見ていたのですが一向に治らず時間だけが過ぎていく始末。
Meta社から公式のアナウンスもなく、廃止とも継続とも、障害とも出ていません。
サイトに表示していたFacebookページのタイムラインが表示されない
そもそもどういった状態だったかというと、ウェブサイトに貼り付けていたFacebookページのタイムラインが表示されず、ヘッダーだけが表示される、という状態になりました。
以前は問題なく表示されていて、気が付いたのは2026年9月の下旬から10月くらいだったでしょうか。何か手を加えたということもなく、気が付いたら表示されなくなっていました。
Facebookページのタイムラインを表示させるには、Wordpressのプラグイン等を使うパターンもありますが、当方はMeta社が出している「ページプラグイン」のコードで生成したコードを貼り付けているだけです。
ひとまず、コードを生成できる「ページプラグイン」を見てみました。
https://developers.facebook.com/documentation/plugins/page-plugin
そこで気づいたこと。「あれ？FacebookのFacebookページもプレビューがヘッダーだけになっている？」
本来ここは上部にあるwidthやheigthの値などを入力すると下部にプレビューが出て、「コードを取得」ボタンを押すと、ウェブサイトに貼り付けられるコードが出るはずでした。
そして、「コードを取得」ボタンを押しても、少し考える姿勢を見せるも無反応。
コードは表示されませんでした。（ブラウザを変えても、別のURLにしても同じでした。）
xでも同じようなことをつぶやいている人がいて、自分だけではない様子。
これはMeta社のバグ？だろうー！と思っていたのですが、その間でも
- Facebookページの公開設定が国別や一部公開、など制限していないか確認
- 一度新しい投稿をしてみて更新されないか確認
してみたものの、特に変化はなく・・
チャッピーちゃんにも相談しましたが、「Metaのせいだから待ちましょう」という結論でした。
そこで、色々と調べましたら、正常に表示されているサイトを発見！そちらのコードを拝借・・
すると、表示されました！
そもそも、Facebookページの埋め込みコードって、
<div class="fb-page"
data-href="https://www.facebook.com/xxx"
data-tabs="timeline"
data-width="400"
data-height="600"
data-small-header="false"
data-adapt-container-width="false"
data-hide-cover="false" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/xxx" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/xxx">xxxxx</a></blockquote>
</div>みたいな状態だと思うのですが、ここのtabs属性、
data-tabs=”timeline” → data-show-posts=”true”
に変えるのです！
そもそも以前にdata-show-postsの属性が使われていましたが、tabsに移行した経緯があります。
Facebookページにも「使われなくなった属性」として、以下のような記載があります。
そこで、属性のコードを以前の値に戻したら表示されるようになった、というわけ。
（数年前にも一度同じことがあったようです）
したがって、2026年10月の段階で
<div class="fb-page"
data-href="https://www.facebook.com/xxx"
data-show-posts="true"
data-width="400"
data-height="600"
data-small-header="false"
data-adapt-container-width="false"
data-hide-cover="false" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/xxx" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/xxx">xxxxx</a></blockquote>
</div>だと表示される、ということ。
（属性はお好みで）
ちなみに現段階ですが、
- data-tabsとdata-show-postsが両方ある → 表示されない
例）data-tabs=”timeline” data-show-posts=”true” - 両方ない →表示されない
- data-tabsをtabsに変える →表示されない
例）tabs=”timeline”
しかし、公式にもしっかり「使われなくなったコード」と言っているにも関わらず、以前の状態に戻っているということは、Facebook内部も何かの動きをしているのかもしれませんね。
iframe型の場合
Facebookページプラグインが今コードを生成してくれないので、キャプチャが取れないのですが、使っていたコードがiframe型の場合（<iframe から始まる）
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fxxxxx&show_posts=true&width=400&height=700&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=false&appId=????" width="400" height="700" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>show_posts=true属性を追加することで表示されるようになりました！
上記はURLとapp ID を伏せていますので、お好みで変えてください。
ただし一時的なものかもしれない
ただし、注意点として、この方法は一時的なものかもしれません。
Facebookページのタイムラインの横幅が小さくなってしまう場合
例えば、横幅を400pxと設定したのに、サイトに挿入すると小さく縮小されてしまう場合があります。これは、
data-width="400"
data-adapt-container-width="true"としていた場合、Facebookの表示幅を親要素に合わせて自動で調整する設定になります。
そのため、Facebook側が親要素の幅を小さく認識してしまうと、400と指定していても縮小されてしまいます。この自動調整をOFFにしましょう。
data-width="400"
data-adapt-container-width="false"iframeコードでは以下のようになります。
&adapt_container_width=falseレスポンシブデザインの場合、横幅にピクセルで指定するのは本望ではないのですが、Facebookページプラグインには色々な制約があるので、width=100% とか使えないんですよね。
本来はdata-adapt-container-width=”true”にすることである程度対応できたのですが、この方法が合わない場合、メディアクエリで切り替える必要があります。
JavaScriptで対応することもできますが、あんまり増やしたくないということもあり、もしdata-adapt-container-width=”false”にした場合は、メディアクエリで対応するのが現実的かなーと思います。
コメント