Facebook ページプラグインのタイムラインが表示されない不具合の対処法

Facebook ページプラグインのタイムラインが表示されない現象が起こっています。
その現象と原因、対処法をご紹介します。

現象

当サイトのページプラグインも。

ぐるぐるが止まりません。

原因

原因は、ページプラグインのページで生成されるコードに問題があるようです。
自動生成されるコードは下記。

<div class="fb-page" data-href="https://www.facebook.com/ozstyle.web/" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/ozstyle.web/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ozstyle.web/">Ozstyle by 大西商店</a></blockquote></div>

このコードの「data-tabs=”timeline”」という部分に問題があるようです。

ページプラグインのページの「設定」の一覧を見ると、
設定項目と属性の一覧表があります。
一覧表の下には、「使われなくなった属性」として注意書きがあります。

使われなくなった属性
属性data-show-postsは使用されなくなりました。属性tabs/data-tabsを使用してください。Facebookページのタイムラインから投稿を表示するには、値timelineを使用します。

https://developers.facebook.com/docs/plugins/page-plugin

属性「data-show-posts」が、属性「data-tabs」に変更されたようですが、
この「data-tabs」属性が不具合を起こしているようです。

対処法

原因と思われる、属性「data-tabs」の記述を削除し、属性「data-show-posts」を記述します。
data-tabs=”timeline” を data-show-posts=”true” に書き換えます。

<div class="fb-page" data-href="https://www.facebook.com/ozstyle.web/" data-show-posts="true" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/ozstyle.web/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ozstyle.web/">Ozstyle by 大西商店</a></blockquote></div>

上記のコードで表示してみます。

正常に表示されていますね。
「Facebook ページプラグインのタイムラインが表示されない不具合」の対処法は以上です。

この不具合については、プラットフォームの不具合報告でも報告が上がっており、いずれ解消されると思います。
その場合には、再度修正が必要になると思います。
それでも。
とりあえず表示したい!急ぎ対応が必要!な場合は、お試しください。

関連記事

©Oz-style