【超簡単】Facebookページの「いいね!」とタイムラインをサイドバーに表示する!

【超簡単】Facebookページの「いいね!」とタイムラインをサイドバーに表示する!
Pocket

何だか流行りに逆行するかのようだが、すでにFacebookに関しては「この記事が気に入ったらいいね!」ボタンの実装について記事を書いた。
(下図の画像は「この記事が気に入ったらいいね!」ボタンのイメージ)

それなのに、さらにまた固定エリアにFacebookの「いいね!」エリアが欲しいと思うのは、なんかカッコ良いんだよな。いいね!してくれた人の顔アイコンとか出るし。
イメージとしてはこのような図のFacebookページの「いいね!」を作りたい。

注意事項

  • Facebookの「いいね!」ボタンの有効性とは
  • Facebookページの作り方
  • FacebookページのアプリIDの取得方法
  • 「この記事が気に入ったらいいね!」ボタンの設置方法

これらに関しては当ブログでも紹介しているので、
【超簡単】Facebookファンページの作成と「この記事が気に入ったらいいね!」ボタンを実装する!
を参照のこと。

LikeBoxからPagePluginへ?

元々Facebookの「いいね!」を固定エリア(サイドバーとか)に出すのはLikeBox(ライクボックス)ってのがあったらしく、それがFacebookのAPIか仕様だかが変更にたったようで2015年6月23日でサービスが終了し、今はそれに代わってPagePlugin(ページプラグイン)を利用するようだ。

で、色々と調べて分かったのだが、私がイメージしていたのはLikeBoxの方で、サイドバーやフッター等にFacebookの「いいね!」エリアを作成するものだった。
それが2015年6月に終了して以降は、各コンテンツページ単位にFacebook「この記事が気に入ったらいいね!」ボタンを押すエリアを実装するのがトレンドになったっぽい。
むう!これでは「WordPressにFacebookのタイムラインをサイドバーに表示する」というタイトルの方が、合っているなぁ。(´・ω・`)

ページプラグインの設置方法

まずはFacebookの「ページプラグイン」へアクセスする。

ページの下に設定項目がある。

FacebookページのURL
FacebookページのURL(私の場合は「https://www.facebook.com/dajya.ranger/」)
タブ
timeline(タイムライン),messages(メッセージ),events(イベント)が「,」(カンマ)区切りで複数指定可能

最低180~最大500まで指定可(未指定も可
高さ
最低70以上で指定可(未指定も可
スモールヘッダー使用
ヘッダが小さいものになる
カバー写真を非表示にする
カバー画像を外せます(シンプルに表示する際には☑がオススメ)
plugin containerの幅に合わせる
自働で幅を合わせてくれるので、初期値のまま☑で良いでしょう
友達の顔を表示する
私はコレがやりたかったので、初期値のまま☑しておきます
「コードを取得」ボタンをクリックする

WordPressにログインして「外観」→「ウィジェット」をクリックし、サイドバーエリアに「テキスト」をドラッグ・ドロップする。
「コードを取得」ボタンで表示された画面のをドラッグ・ドロップした「テキスト」エリアにコピーペーストし、「保存」ボタンをクリックして有効化する。

こうして右のサイドバーにFacebookページの「いいね!」とタイムラインが表示された。

おわりに

当初思っていたイメージとは違うものの、WordPressのサイドバーからFacebookページへアクセス出来るのは、メリットが高いように思う。タイムラインがリアルタイムに反映されるし、Facebookへ移動しなくてもメッセージが送信出来るので、利便性が高くなったと評価できそうだ。



この記事が気に入ったら
いいね ! をお願いします

MZ-2000PC-6601SRをこよなく愛する現役のSEにしてガチな松本零士ヲタク。14歳で『人間失格』の洗礼を受けたダザイストで18歳から毎年桜桃忌に参加する太宰治真理教信者変態太宰治検定のスタッフだったりもする。愛車はトヨタJZX100マークⅡ2.5 グランデ レガリアとカワサキZX-4

Pocket

WordPressカテゴリの最新記事