Facebook Page Pluginは旧Facebook Like Boxの新バージョンです。

Facebook Like Box

旧Facebook Like Boxは、https://developers.facebook.com/docs/plugins/like-box-for-pagesを見ていただくとわかりますが、2015年6月23日頃に終了されています。

地球全土で新しく Facebook Page Plugin に変更する様にFacebookから発令されてます。

上記は 旧:Facebook Like Box の貴重な遺産画像です。

このホームページのフッターウィジェットには Facebook Page Plugin が既に入替設置されています。

ヘッダー部分の背景に画像を設定できる様に変更され、以前よりファッショナブルで中身の配置バランスが良くなったと思います。

SSLサイトに設置する場合の注意点も記事の後半で掲載しています。

設置方法

facebook for developersのpage plugin 設定ページでスクリプトタグを発行して、ワードプレスであればダッシュボードで「外観」⇒「ウィジェット」⇒「テキストウィジェット」に全て張り付ければOKです。

レアケースかもしれませんが、固定ページや投稿ページで使いたい場合、エディタを(html)テキストモードに変えてから張り付けてください。

設置の前提条件

フェイスブックのタイムラインはiframeタグでWEBサイトに穴を開けて表示する事になります。自社サイトなどのフェイスブックページを既に作ってある事が前提条件です。WEB制作会社は、Facebookページやツイッターアカウントなどの取得/制作は別料金です。各種SNSのスタートアップ環境の整備にお金を追加で払うか、自分で作っておくか、しっかり決めておきましょう。

facebook for developersでアプリIDなどの登録も必要です。

プログラミング作業はほとんど必要なく簡単な作業ですが、小さなググり事が散在しているので不慣れな作業でめんどくさいと感じる人はいるかもしれません。

横幅制限と中央寄せ(センタリング)

Facebook Page Pluginの横幅制限は180ピクセル以上500ピクセル以下です。

スクリプトの発行画面で幅(width)に500ピクセルの数字を入れて、『plugin containerの幅に合わせる』にチェックを入れてください。

スマホの際は自動でwidthが細くなってくれます。

何も数字を入れないと、タブレットでもデフォルトwidth340ピクセルより横幅が広くならないので左右の余白バランスが微妙になります。

ツイッターの埋め込みタイムラインと一緒に並べると幅が不揃いになりやすい。

パソコンで閲覧しているときにブラウザ横幅を縮小していくと、タブレットくらいの横幅の時『細く左寄せ』になり微妙な配置になります。

左寄り状態が気持ち悪い方は、cssでtext-align:center;を使って親<div>タグで囲んで中央寄せします。

下記のソースコードを使う場合、コメントアウトまでソースコードを消す事を忘れない様に気を付けてください。

※ブラウザのレンダリング速度的には非推奨ですが、インラインcssが気持ち悪い人は子テーマやプラグインSimple Custom CSSなどを使ってください。

表示速度が遅い

このサイトはXサーバーのX10プランでLet’s Encrypt 無料SSLを使用して、その中にFacebook Page Pluginを入れています。

キャッシュ系のワードプレスプラグインは取り扱いがめんどくさい為、使っていないです。

サイトの表示速度は基本的に遅く、チューニング無し状態です。

しかし、Facebook Page Pluginはさらに表示が遅い。

アドセンスやツイッター埋め込みタイムラインと一緒にまさかの表示速度ボトルネックです。

WEBの大御所が足を引っ張ってしまっています。

javascript系のサーバーサイドはそれだけ難しくサーバー負荷が大きいのかもしれませんね。

ajaxを除き、サーバーサイドjavascriptは完全に学習放置してます。

CDN等、対策は何かあるのでしょうか。

FacebookPagePluginに起因するSSLのmixed content エラー

SSLサイトでFacebookPagePluginによるエラーが2つ出ました。結構、ダメージがデカいエラーです。

1.mixed content エラー

SSL(https)を導入している場合、Facebook page pluginのタイムラインに出てくる画像が、非httpsとなっている為にmixed contentsエラーになってしまう事があります。

SSLはiframeの中までhttpsであることを要求してきます。

以下の画像の様にディベロッパーツールを立ち上げて、Securityに進むと確認できます。

mixedcontent

非httpsが混じると緑の錠マークのhttpsのブラウザURL部分がグレーアウトします。

良からぬブラウザ反応がユーザーの不安を煽ってサイトの信頼性に影響します。

2.サーチコンソール、ブロックされたリソース エラー

フッターウィジェットなので、サーチコンソールですぐに数字が増えて結構な迷惑です。

サーチコンソール⇒グーグルインデックス⇒ブロックされたリソースで確認できます。

Fetch as Googleを行うとフッターのFBパーツ以下で失敗して、とてもイライラさせられます。

2つのエラーへの対策

PagePluginのスクリプト発行画面でタブのtimelineを削除して、messagesを入れてフェイスブックメッセージパーツを表示させ、タイムラインを表示させない様にしました。

SSLサイトでなければ、半角カンマ区切りで timeline,messages,events などでもいいと思います。

※Xサーバーの無料SSL手順ついては、エックスサーバーなど、無料SSL(Let’s Encrypt)設定、正しい方法!ワードプレス編を参照ください。

コメントを残す