FacebookのPage Pluginについて今さらな見解


ホームページは様々なコンテンツが集まってできますが、ホームページ以外でも運用しているFacebookをホームページに組み込んでアピールしたいなどということもあると思います。そうした時に、バナーを作ってそこからFacebookページが開くようにという手段もありますが、折角なのでプラグインという形で提供されているパーツごと組み込むなんてケースも多く見ます。今更ですが、今日はそのプラグインについてワタシなりの見解を書きたいと思います。


バナー設置によるFacebookページへの誘導

バナーは比較的省スペースで設置ができます。スペースを効率的に使用するにはこれも良い選択です。しかしながら、Facebookページの更新情報はバナーをクリックして初めて見えるもの。クリックするまではその奥の世界を伺い知ることはできません。



更新も見えていいねもできる強力なプラグインの設置

これにとって代わる手段としてはプラグインの設置があります。FacebookではPage Pluginというパーツの配布がされていますので、これを使ってホームページの中にFacebookを機能ごと埋め込むことが可能となります。

ただ、こうしたパーツはAmeba Owndではすでに用意されているので、Page Pluginは使わなくてもOwndのFacebookパーツを選ぶだけでより簡単に設置することも可能となっています。便利ですね。

ただし設置する前に知っておくべきことがあります

これらプラグインは、ホームページの中に見えてはいますが、小窓を作ってその中から外の世界を見ている感覚に近いものとなります。そこに見えているのは、あくまで外の世界です。つまり、こうしたパーツがページにある場合、ページが開こうとするたびに、毎回「本体」を呼びに行くという動きが追加されます。例えば、それがFacebookのプラグインであれば、表示をさせるためにFacebookを呼びに行くといった流れが発生します。当然、この読み込みにはそれ相応の時間が必要となります。回線速度、PCのスペックなどの環境が良ければ比較的パッと開きますが、そうでなければいつまでたっても読み込めずに、くるりんマークがグルグルグルグル・・・なんて状態になることも。プラグインをつけるとページの読み込み時間が増えてしまう傾向にあることは間違いありません。こうしたことからもあれもこれもプラグインするパーツを欲張らないことは鉄則です。



表示スピードについて実際には検証してみるのが一番です

では、実際にどれくらいの読み込みロスがあるのでしょうか?それは検証するのが一番です。おすすめはGoogleで提供しているPageSpeed Insightsというサービス。ページが開くスピードを診断してくれます。もちろん無料です。

使い方は、ボックスにホームページのURLを入力して「分析」ボタンをクリックするだけ。超簡単です。モバイルとパソコン両方の画面について同時に計測してくれ、100点中何点かを教えてくれます。この数値が低ければパーツを外してもう一度検証し、どれくらい違うかを見ると良いと思います。修正ポイントなども教えてくれますが、Owndなどの場合は、パーツの取り外し以外の部分についてはほとんど対処のしようがないと思います。システムとして仕方がない部分もありますので100点満点はありません。60点以上であればまずまず問題なくページは開く状態だと判断して良いとワタシ的には思います。



そういえば昨日までFacebookのプラグインがやたら重かった気がする

実はこの件も先週あたりから検証を進めていたのですが、Facebookページのプラグインだけがやたら重いという状況が続いていました。そういえば・・・と考えると、一昨日あたりになんかいいねとか超いいねとか、仕様変更がありましたね。こうした背景がFacebook側のフットワークに影響していた可能性があるのかも、と勝手に納得してみました。違うかもしれませんが。そしてワタシだけそう感じていたのかも、です。



まとめ:Facebookプラグインの機嫌はFacebook次第ということ

結論を言うと、Facebookのプラグインを設置する場合は、常にFacebookの機嫌を伺ってみるということが必要かと思います。これまでもFacebookのプラグインが重い、重すぎるということはありましたので、ページがなかなか開かないときはそうしたことも疑ってみると良いです。場合によっては一時的にプラグインを外してみるということも視野に入れると尚良いですね。


ページがなかなか開かずイラっとして、そのまま離脱した経験はワタシにもあります。自分のホームページがそうならないように気をつけたいものです。



Poss Note

アメブロカスタマイズ・OwndカスタマイズのWEBデザイン研究所BEEの公式Owndです。

0コメント

  • 1000 / 1000