Facebookページプラグインが表示されない時の対処法

Facebookページプラグインが表示されない時の対処法

ここ数日ずっとわからなくて悩んでいたことがありました。

このWordpressブログのサイドバーのウィジェットに
Facebookのページプラグインを設置しようとしてもテキストリンクだけで表示されてませんでした。

色々調べて対処した方法を書きます。

 

Facebookページは公開になっているか??

まずはページプラグインとして設置するFacebookページの設定を確認しました。

ページ自体が「公開」になっていないと表示されないそうです。

また国別制限や年齢制限の設定もせずに誰でも見れる状態になっていないと表示されません。

 

私のFacebookページは全て公開の状態だったので、これが原因ではなかったようです。

 

scriptタグが重複していないか??

 

ページプラグインのコード作成画面で表示されるコードは2種類あります。

一つ目はbodyタグ直後に配置するコードと
二つ目は表示したい場所(ウィジェットなど)に配置するコードです。

この一つ目のbodyタグ直後に配置するコードはページ内で一箇所のみ配置していればいいので、
Wordpressのテーマやプラグインですでに配置している場合はscriptタグ部分は省略してしまっていいそうです。

私もこの方法を試してみたけど、表示されない。。

確かにソースを表示して見てみても重複されている様子もない。。

さてどうしたものかとネットを色々調べてみるも解決できず。。

そのまま数日が経ちました。

 

テストhtmlファイルを作り検証してみる

ページプラグインのみ配置したhtmlファイルを新しく作り検証してみることにしました。

サーバーへアップして見てみるとちゃんと表示されています。

ということはページプラグインの問題ではなく、
私のブログの問題ということがわかりました。

もう一度ソースをよく見比べて、このテストhtmlファイルとブログの違いを探します。

その時に発見しました!

 

WebフォントTypeSquareのコードが増えている

ブログ内のソースをよくよく見てみると、モリサワのWebフォント「TypeSquare」のclass名が追加されていました。

早速テストhtmlファイルで「TypeSquare」のコードを配置して検証してみると
なんとさっきまで表示されていたページプラグインが表示されなくなったではないですか!

ということで、原因は「TypeSquare」ということがわかりました。

「TypeSquare」には自動で文字がふわっと表示されるフェードイン機能があります。

今回私はその機能を使っていました。

このフェードイン機能を使うと様々なタグに自動でクラス名が追加されるのです。

この自動で入るクラス名が今回ページプラグインを表示していない原因でした。

 

TypeSquareのフェードイン機能を使う時は要注意

自動でクラス名が入るので、今回のページプラグインのように相性が悪いものもありそうです。

フェードイン機能は使わずに、標準機能ですと自動でクラス名が入ることがないのでページプラグインも無事に表示することができました。

ふわっと表示されるフェードインは別の方法で実装しようかなと思います。

 

数日悩んだ問題が無事に解決できてスッキリ!

同じように悩んでいる方の参考になったら嬉しいです^^

お役立ちカテゴリの最新記事