ソーシャルウォール 
フィード分析 
Facebookのフィードが空白になっています。先週までは正常に表示されていたのに、ショートコードやブロックはページ上に残っているにもかかわらず、WordPressからは原因が特定できません。
たいていの場合、原因はサイト最適化プラグインにあります。このプラグインは、フィードのスクリプトが何かを描画する前に、そのスクリプトを削除したり、実行を遅らせたり、遅延読み込みを行ったりします。解決策は、プラグインを無効にするのではなく、除外することです。PageSpeedのスコアとフィードのどちらかを犠牲にする必要はありません。
私はSmash Balloonで働いており、正しい修正が失敗したように見えてしまうキャッシュのスケジュールを含め、以下のすべての手順を、カスタムFacebookフィードの実際の導入作業を通じて確認しました。
30秒ほどのチェックを行えば、4つの問題のうちどれが該当しているかがわかり、速度向上プラグインを有効にしたまま、Pageフィードの表示を復旧させることができます。
この記事の中で
【簡単解説】Facebookのフィードが空白になるのはなぜ？
Facebookのフィードが空白になるケースの多くは、Smash Balloonのスクリプトを遅延読み込み、縮小、または遅延読み込みを行うサイト最適化プラグインが原因であり、そのためフィードがレンダリングされる機会が全くないのです。
これには4つの原因があります。発生確率の高い順に大まかに挙げると：
- 最適化プラグインの競合。WP Rocket、Autoptimize、またはPerfmattersのいずれかが、フィードのJavaScriptファイルの実行を妨げています。
- ソースが無効か、トークンの有効期限が切れています。サイトとFacebookページ間の接続が切断されました。
- フィードのキャッシュが古くなっています。すでに修正済みですが、プラグインは依然として以前の保存されたデータを表示しています。
- ページビルダーまたはテンプレートの配置。フィードは、読み込み方法が異なるElementorまたはテーマの領域内に配置されています。
これらを見分ける最も手っ取り早い方法は次のとおりです。給紙エリアが本当に空っぽの場合は、原因1、3、または4です。給紙されるべき場所にエラーメッセージが表示されている場合は、原因2です。
その一点の違いがあるだけで、当て推量をせずに済みます。
まず、4つの問題のうち、自分がどの問題を抱えているかを把握しましょう
空のフィード領域は実際にはどのような状態になっていますか？その答えによって、どの修正を実行すべきかがわかります。
何かを変更する前に、30秒ほど考えてみる価値があります。
以下の表で、左の列からご自身の症状を探してください。その後、そのセクションに直接進んでください。
| 目に見えるもの | 通常、それはどういう意味か | 次はどこへ行こうか |
|---|---|---|
| 空白、メッセージなし | 最適化プラグインによってスクリプトがブロックされました | 除外リストのセクション |
| フィード領域のエラーメッセージ | ソースが切断されました、またはトークンの有効期限が切れました | 「再接続」セクション |
| 何かを修正した後も、まだ空白のままです | キャッシュの古さ | キャッシュのクリアに関するセクション |
| あるページは印刷されているが、別のページは空白になっている | 設置上の問題か、それとも施工業者側の問題か | ページ固有のセクション |
特筆すべきバリエーションが1つあります。ログイン中はフィードが完璧に表示されますが、訪問者からは空白が表示されるとの報告があります。
それはフィードの不具合ではありません。あなたにはキャッシュされていないバージョンのページが表示されていますが、訪問者には最適化されたバージョンが表示されています。
ですから、設定を一切変更する前に、プライベートウィンドウまたはシークレットウィンドウでページを開いてみてください。これが最初に確認すべき点です。そうすれば、どのバージョンの動作に問題があるのかがわかります。
「Smash Balloon」を3つの除外リストすべてに追加する
多くの人は、ある一か所に除外条件を追加しても変化が見られないため、諦めてしまいます。
簡単に言えば、次の通りです。3つの別々の除外リストがあり、そのいずれか1つでも漏れると、フィードが空白になってしまいます。
まずはプラグインのディレクトリパスから始めましょう。お使いのバージョンに合ったものをコピーしてください：
- 長所：
/wp-content/plugins/custom-facebook-feed-pro/ - 無料：
/wp-content/plugins/custom-facebook-feed/
そのパスは、これら3つのリストすべてに含める必要があります：
- JavaScript および ミニファイの除外対象
- JavaScriptの実行遅延の除外対象
- 遅延読み込みの除外対象
以下は、よく使われている最適化プラグインにおいて、これらのフィールドがどこにあるかを示したものです：
- WP Rocket：リスト1および2はファイルの最適化、リスト3はメディアの最適化。
- Autoptimize：JavaScript 最適化の除外フィールド。
- Perfmatters：スクリプトの除外設定用のアセットに加え、JSの遅延読み込みおよびレイジーロードの除外チェックボックス。
除外設定を行っても、ソーシャルフィードは引き続き表示され、サイトのその他の部分は最適化された状態が維持されます。
変更を保存してから、キャッシュプラグインのデータを消去し、プライベートウィンドウでページを再読み込みしてください。
プラグイン内の2つの設定を切り替える
除外リストの設定だけではまだ半分に過ぎません。残りの部分は、「カスタムFacebookフィード」内の2つの切り替えスイッチで処理されます。
ダッシュボードから「Facebookフィード」»「設定」を開き、「詳細設定」タブを選択すると、該当するオプションが表示されます。
- AJAXテーマの読み込みに関する修正： この設定を有効にして 、保存し、ページを再読み込みしてください。フィードが表示されれば、これで解決です。変化がない場合は、設定を元に戻してください。
- JavaScriptによる画像の読み込み。これがすでにオンになっている場合は、オフにしてください。これは、フィードのフレームは表示されるものの、その中の画像が表示されない場合に確認すべき設定です。
どのプラグインが問題の原因なのかわからない？テーマ変更後にフィードが機能しなくなった場合の対処法に関するガイドでは、プラグインを1つずつ確認しながら、競合の原因を特定する手順を詳しく解説しています。
Facebookのソースがまだ接続されているか確認してください
投稿が表示されるはずの場所にメッセージが表示されていますか？ それなら、問題はWordPressではありません。サイトとFacebookの連携が切れてしまっています。
再接続する方法は以下の通りです：
- WordPressのダッシュボードで「Facebookフィード」»「設定」に移動し、「ソース」タブを開きます。
- 「無効」とマークされたソースを見つけてください。
- 「再接続」ボタンが表示されている場合は、それをクリックしてください。
- 「再接続」ボタンが表示されていない場合は、赤いゴミ箱アイコンをクリックしてから、「ソースを追加」をクリックしてください。
- 「Facebookに接続」をクリックし、情報源を確認してください。
- Metaの画面で権限を確認し、「保存」をクリックしてください。
通常、Facebook側の何らかの要因がこれを引き起こしますが、見落としがちです。Facebookページの役割変更、事業資産の譲渡、あるいはパスワードのリセットなどにより、有効だったトークンが一夜にして無効になってしまうことがあります。
ウェブサイト自体には何の変化もありません。サイトがFacebookページを読み取るために使用していたトークンが、単に無効になっただけです。
再接続の手順が分かりにくい場合は、WordPressサイトにFacebookフィードを追加する方法について詳しく解説した完全ガイドで、ソースの接続手順を段階的に説明しています。
フィードのキャッシュを、以下の順序で消去してください
フィードには、その内容のバックアップが保存されています。そのため、FacebookのAPIがダウンしても、投稿はページ上に残ります。
何かを修正した直後にも、同じ現象が起こります。表示されているのは、まだ保存されたコピーです。修正は成功していますが、ページがまだ更新されていないだけです。
以下の順序でキャッシュをクリアし、最初の操作の後にページを確認してください。通常、この手順だけで解決します。
- Facebookのフィード » 設定 » フィード の順に選択し、「すべてのキャッシュを消去」をクリックします
- お使いのキャッシュプラグイン
- ホストのキャッシュ
- お客様のCDN
- お使いのブラウザ
ここでは順序が重要です。外側から始めてまずCDNをクリアすると、その下のレイヤーから古いコピーが読み込まれ、再び保存されてしまいます。
ソースから外側に向かって作業を進めます。まずフィード、最後にブラウザです。
なお、フィードのキャッシュをクリアしても、デザインには影響しません。投稿のみが更新されます。レイアウト、色、設定などは、変更前のまま維持されます。
一部のページのみフィードが空白になる場合
ホームページでは正常に表示されるのに、Elementorのページでは空白になっていませんか？フィードに不具合があるわけではありません。配置に問題があるのです。
| そのページには何が載っているのか | なぜ故障するのか | 修正 |
|---|---|---|
| ビルダーのテキストウィジェット内のショートコード | ビルダーは独自の基準でレンダリングを行うため、描画対象が何も存在しない段階でもスクリプトを実行することができます | FacebookフィードブロックやElementorウィジェットと入れ替えてください |
| タブ、アコーディオン、またはモーダル内のフィード | スクリプトが実行された時点で、コンテナはまだレンダリングされていません | 「設定」»「詳細設定」で、AJAXによるテーマ読み込みの修正機能を有効にしてください |
| Ajaxで読み込まれるテンプレート領域 | 同じタイミングの問題だが、引き金は異なる | 同じ修正、AJAXテーマの読み込みに関する修正 |
| ページレベルの最適化ルール | WP Rocket や Perfmatters では、ページごとにグローバル設定を上書きできますが、設定が適用されていることをうっかり忘れてしまうことがあります | そのページのルールを確認し、そこにプラグインのパスも追加してください |
どのような変更を加えた場合でも、判断を下す前にプライベートウィンドウでページを再読み込みしてください。キャッシュされたページでは古いバージョンが表示されるため、すでに修正済みの問題を探し回ることになってしまいます。
一度修正しておけば、あとはプラグインに任せておけばいい
「Smash Balloon Facebook Feed Pro」は、投稿のローカルコピーを保存するため、FacebookのAPIがダウンしてもフィードがページ上に表示されたままになります。また、不具合が発生した際にはすぐにメールで通知されます。14日間の返金保証付きです。
Facebookフィードプロを入手設定しただけで終わらず、常に表示され続けるFacebookのフィード
原因を特定し、対処法を適用し、正しい順序でキャッシュをクリアしました。フィードが復旧しました。
では、次にそうではない場合、どうやって見分ければいいのでしょうか？
「カスタムFacebookフィード」には、これを自動的に処理してくれる設定が2つあり、どちらもデフォルトで有効になっています。別途設定を切り替える必要はありません。
先ほど追加した除外条件のおかげで、この特定の競合が再発するのを防いでいます。これら2つは、除外条件ではカバーしきれない部分を補っています。
- フィードの問題に関するメール通知。プラグインの説明によると、重大な問題によりフィードが利用できなくなった場合、キャッシュされたフィードに切り替わり、その旨が通知されるそうです。つまり、Facebook APIがダウンしても、訪問者には空白のボックスが表示されるのではなく、最後に正常に表示されていた投稿が表示され、あなたにはメールでその旨が通知されることになります。
- 管理者向けエラー通知。エラーはサイトの右下隅に表示され、ログイン済みの管理者だけが確認できます。この通知は問題の発生を報告するものです。フィードの表示可否を決定するものではないため、この通知を表示したままにしても、訪問者に不都合が生じることはありません。
両方ともオンにしておくといいでしょう。プラグインから通知を受けるか、顧客から直接知らされるかの違いになりますから。
こうしたセーフティネットについて、ひとつ言えることがあります。それらが存在するのは、誰かが意図的に作り上げたからに他なりません。
「Facebook Feed Pro」は、175万人以上のユーザーに利用されているソーシャルフィードプラグインを開発したSmash Balloon社によって制作されました。これほど多くのウェブサイトが満足しているのです。
「Facebook Feed Pro」を導入して、訪問者が問題に気づく前に、このプラグインで問題を未然に防ぎましょう。
