IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

FacebookページのLike Box廃止に!代りのPage Pluginを設定する方法

      あとで読む   はてブする

FaceBookページ「Page Plugin」登録サイト

ブログの記事下やサイドバーなどに取り付けているFaceBookページのLike Boxというのがあります。これが2015年6月23日に廃止されることになりました。

僕はかなり前からこの情報を知っていましたが、変更がめんどくさくて放置していたんです。するとタイムリミットに近づいてきて急に焦り出すという流れ。月日が経つのは早いですね。

僕と同じように急きょ変更される方も多いはず。FaceBookページの旧Like Boxから新Page Pluginに変更する方法をご紹介します。

スポンサーリンク

旧Like Boxとは?

FaceBookページのLike Box一例FaceBookページの旧Like Boxとは上のようなボックスです。ブログを読んでもらった後に、このブログ「いいね」とシェアしてもらうものです。

過去に「いいね!」してくれた方の「FaceBook」の写真が載るようになっています。

この個人的に気に入っているLike Boxが6月23日に廃止されることとなりました。では重い腰を上げて、新しいPage Pluginに変更していきます。

 

スポンサーリンク

「Page Plugin」の設定手順

FaceBookページ「Page Plugin」登録サイト

Page Pluginを設置していきます。まずココをクリック。「Page Plugin」のサイトをクリックして詳細を登録します。

クリックすると上のようがサイトが開きます。ここで「Page Plugin」の設定をしていきます。

FaceBookページ「Page Plugin」設定画面

まずは「Facebook Page URL」と「Width(横幅)」を入力しましょう。

  • Facebook Page URL:「https://www.facebook.com/○○○○○○」
  • Width(横幅):500
  • Height(高さ):お好みで。空白でもOK

Widthの最大のサイズがなぜか500pxまでなので、ここには「500」と入力しましょう。

最近はPCとスマホでサイズの切り替えが自動で出来るレスポンシブ(かレスポンシブ風に見せるのどちらか)が主流です。

「500」に設定しておくと、PCでは最大サイズの500pxが、スマートフォン(スマホ)では、スマホのサイズに縮小して表示くれるので、ほとんどの方は500でOKです。

Height(高さ)はお好みで。空白でもOKです。

 

FaceBookページ「Page Plugin」設定画面次にチェックが入っている箇所の詳細設定をします。

  • Show Friend’s Faces:下に写真を載せるかどうかの選択
  • Show Page Posts:写真の下に投稿のTL(タイムライン)を載せるか
  • Adapt to plugin container width:チェックを入れたままでOK

「Show Friend’s Faces」は矢印の赤色の箇所、「Show Page Posts」は水色の矢印の箇所を表示させるか決めましょう。

因みに僕は写真は表示、投稿タイムラインは非表示にしました。投稿タイムラインはスマホの時にスクロールしづらいからです。もちろんお好みで設定してください。

 

FaceBookページ「Page Plugin」設定画面まだチェック欄があるので、続きを

  • Use Small Header:少しだけヘッダーサイズが狭くなる
  • Hide Cover Photo:Facebookページのカバーを表示させるか

「Use Small Header」は少しだけヘッダーカバーの高さが変わります。チェックを入れたり外したりして確認してください。

「Hide Cover Photo」はヘッダーカバーを表示させるか否か。表示させない場合は、上のように背景が白色になります。

設定が終わると「Get Code」をクリック。

 

FaceBookページ「Page Plugin」コード「Get Code」を押すとコードが表示されます。

1.は<body>の先頭に、2.はPage Pluginを表示させたい箇所(WordPressならsingle.phpやサイドバー)に、それぞれコピー&ペーストして下さい。これで設定は終了です。

1.はフッターの最後にある</body>の手前に貼り付けても表示されました。

 

設定完了、最後は実機で確認

PC画面

FaceBookページ「Page Plugin」表示チェック

最後に実機でチェックします。僕はSNSボタンの下に表示しました。PCでは500pxで表示されています。

 

スマホ画面

FaceBookページ「Page Plugin」表示チェックスマホでは300pxで表示されています。スマホサイズによって大きさが変わるようになっています。チェック済み。

 

最後に

FaceBookページの旧Like Boxから新Page Pluginに変更する手順をご紹介しました。

例として記事の下に設置しましたが、サイドバーでももちろんOKです。

いざ変更してみると、これでもいいかなって気になりました。見慣れてきたかも(笑)。

Like Boxは2015年6月23日で廃止になるので設定変更はお早目に。

【関連】FacebookのOGPの設定はAll in one SEO Packが簡単!

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - ブログ運営

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

Twitterの鳥のマーク
Twitterのツイート(つぶやき)をブログに貼り付ける方法

たまにTwitterでのやり取りをブログの記事に載せたい時ってありませんか? 僕 …

「ウェブチェッカー(WebChecker)」の新規登録画面
RSSに追加登録できないサイトの更新を確認してくれる「WebChecker」が超便利

気になるサイトがあるけど、そのサイトの更新が毎日では無い時どうしてますか?RSS …

XSERVER(エックスサーバー)
ムームードメインをXSERVER(エックスサーバー)に追加する方法

普段レンタルサーバーは、シックスコア(SIXCORE)の共有サーバーを使用してい …

Windows7でhostsファイルの書き換えをする方法。サーバ移転
Windows7でhostsファイルの書き換えをする方法。サーバ移転

サーバの移転を行っている時に必要になります。新しいサーバにファイルを転送後、ho …

リンククラブの管理画面
「リンククラブ(Link Club)」の解約(退会)方法。ドメイン移管の手続き

「リンククラブ(Link Club)」というドメインとサーバーの両方を管理する会 …

XSERVER(エックスサーバー)
XSERVERにWordPressをワンクリックインストールする方法

これまでムームードメインでドメインを取得し、ネームサーバーを変更、そしてドメイン …

docomo-sumafo
ドコモのスマホ「http://search.smt.docomo.ne.jp/」からバズるってあるの?

育児・雑貨ブログも更新しています。先日、Google Analyticsを見てる …

sixcoreサーバにwordpressをワンクリックインストールする手順
「SIXCOREサーバ]WordPressにワンクリックインストールする方法

  これまでムームードメインでドメインを取得し、ネームサーバーを他社に …

SIXCOREサーバー管理ツール
ムームードメインをSIXCORE(シックスコア)サーバに追加する方法

ムームードメインでドメインを取得し、ネームサーバを他社に変更する方法を順に紹介し …

ムームードメインのホームページ
「ムームードメイン」で独自ドメインを取得する方法

僕はドメインを「ムームードメイン」で取得しました。というのはロリポップサーバとの …