ChromeやEdgeでFacebookのページプラグインが表示されない対処方法

Web
Web

2022年に入って少し経ったくらいのあたりから、Google ChromeやEdgeでFacebook、iOSのSafariでのページプラグインが正常に表示されない不具合が発生しています。公式の不具合報告にもちらほら話題が出ているし、SNSとかでも同様の報告があるので対処方法を調べてみました。

SPONSOR LINK

不具合の内容

この画像のように「エラーが発生しました」と表示される場合と、丸い円がぐるぐる回り続けてタイムラインが表示されないパターン。どちらも発生する条件は同じのようです。

発生するのはGoogle ChromeもしくはMicrosoft Edgeを使用していて、且つFacebookにログイン状態の場合。非ログイン状態であれば正常に表示されるのを確認しました。また、iOSのSafariでも発生しています。

対処方法

見ている側では対応はできません。
ページプラグインを埋め込んでいるサイト側で対応する必要があります。

<div class="fb-page" data-href="https://www.facebook.com/facebookapp" 
data-tabs="timeline" data-width="500" data-height="" 
data-small-header="false" data-adapt-container-width="true" 
data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/facebookapp" 
class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/facebookapp">Facebook App</a>
</blockquote></div>

変更するのは表示する場所に埋め込むコードの中の「data-tabs=”timeline”」の部分。
これを「data-show-posts=”true”」に書き換えます。

<div class="fb-page" data-href="https://www.facebook.com/facebookapp" 
data-show-posts="true" data-width="500" data-height="" 
data-small-header="false" data-adapt-container-width="true" 
data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/facebookapp" 
class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/facebookapp">Facebook App</a>
</blockquote></div>

これで正常に表示されます。

後述のdata-show-postsという属性はFacebookの説明では「使われなくなった属性」として記載されていました。
しかしその属性じゃないと正常に表示されないっていう不具合でした。
本来はdata-tabsを使わないといけないのでいずれ修正されるかもしれませんが、現状の対応策として紹介しました。

実際の表示

実際にコードを埋め込んだ状態です。

data-tabs=”timeline”での表示

data-show-posts=”true”での表示

SPONSOR LINK
SPONSOR LINK
mayhemrabbitをフォローする
Digitalyze

コメント

タイトルとURLをコピーしました