Page Plugin（旧『Like Box』）をWordPressブログに導入する方法

HAGANEYA（@imech_jp）です。

ブログを長期休止している間に、facebookプラグインの『Like Box』がリニューアルされていたようです。

巷の話だと「Like Box が使えなくなった」とのことですが、レイアウトが崩れるような不具合なども特に無かったため、全く気付かずに使い続けていました。

問題が表面化するキッカケとなったのは「facebook の投稿をブログに埋め込めない」というトラブル。

先日、Twitter や Google+ などと同じ感覚で、記事内に投稿を埋め込もうと試みたのですが・・・何度挑戦しても "blockquote（引用）" 扱いになってしまいます。

その時点では原因が全くわからなかったのですが「Page Plugin を導入することによって直る」との情報を目にし、実際に試してみたところ、埋め込みが正常に表示されるようになりました。

参考記事

Facebookの投稿を埋め込んでも表示されない時の対処法 | ブログ用WordPressテーマ マテリアル

『Page Plugin』を導入してみよう

「既に "facebookページ" を開設している」と想定して話を進めます。もし開設がまだなのであれば、先に "Facebookページを作成" から facebookページを開設しちゃってください。

まず『Page Plugin』のページへアクセスしましょう。

画面をスクロールすると、Page Plugin の設定項目が現れます。

各項目の内容は以下のとおり。

• Facebook Page URL：facebookページのURL
• Tabs：timeline・messages・events などを設定（空欄にすると、タイムライン部分を省略可能）
• Width：Page Plugin の "横幅" を変更（最小180～最大500の間で設定）
• Height：Page Plugin の "縦幅" を変更（最小は70）
• Use Small Header：ヘッダーの "縦幅" をスリムに
• Adapt to plugin container width：Page Plugin の幅を自動で調整
• Hide Cover Photo：facebookページのカバー写真を "ヘッダー部分" に表示しない
• Show Friend's Faces：いいね！してくれた方々のアイコンを表示/非表示

Tabs：timeline・messages・events などを設定（空欄にすると、タイムライン部分を省略可能）

Width：Page Plugin の "横幅" を変更（最小180～最大500の間で設定）

Height：Page Plugin の "縦幅" を変更（最小は70）※『Tabs』に "Timeline" が入っていないと変化無し

Use Small Header：ヘッダーの "縦幅" をスリムに

Hide Cover Photo：facebookページのカバー写真を "ヘッダー部分" に表示しない

Show Friend's Faces：いいね！してくれた方々のアイコンを表示/非表示

設定を終えたら [Get Code] ボタンをクリックしましょう。コードが表示されます。

１と２のコードをまとめて、ウィジェットにコピペしてください。※どちらか一方だけだと正常に表示されません

特に問題がなければ、このように表示されます。

私の場合、"facebookページのカバー写真" と "タイムライン投稿" が邪魔だったので、このようなデザインにしてみました。見た目は『Like Box』時代とあまり変わっていませんが、なんとなく無駄が削ぎ落とされたような印象を受けます。