vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

Like Boxがサービス終了。「Page Plugin」に変更しておこう

      2015/07/21

LINEで送る
Pocket

fb-page-plugin
先日、当ブログにFacebookページヘリンクを貼るために「Like Box」を導入しようとした時のこと。なんだか以前見た導入ページと違う…どうやら「Like Box」は2015年6月にサービスが終了して、新たに「Page Plugin」に切り替わるようです。

ということで「Page Plugin」の導入方法をご紹介しておきます。

このブログはWordPress&Stinger5を使って運営しているので、記事下にPage Pluginを設置する方法も合わせて載せておきます。

参考http://websae.net/facebook-page-plugin-20150326/

スポンサーリンク

Page Pluginコードの取得

まずは下記公式ページにアクセス。

LINKPage Plugin

「FacebookページのURL」「横幅」「縦幅」をそれぞれ入力します。横幅は「280-500pxの間」、縦幅は「130px~」の範囲で指定する必要があります。

fb-page-plugin

それ以外のチェック項目はそれぞれ次の通りです。

  • 「Show Friend’s Faces」
  • いいね!をしてる人の写真を載せるかどうか

  • 「Hide Cover Photo」
  • 背景のカバー写真を非表示にするかどうか

  • 「Show Page Posts」
  • Facebookページに投稿されている記事を下部に表示するかどうか

入力が済んだら「Get Code」ボタンをクリックします。

fb-page-plugin2

設置用コードが出力されます。
[1]の「Include the JavaScript SDK on your page once, ideally right after the opening tag.」のコードはbodyタグの直後に。

[2]の「Place the code for your plugin wherever you want the plugin to appear on your page.」は「Page Plugin」を設置したい場所に貼り付けます。

WordPressサイトに貼り付ける場合

私はWordPressのテーマ「Stinger5」を使ってサイトを構築しているので、それに合わせて設置していきます。

Stinger5でのbodyタグは「header.php」内にあります。

<body <?php body_class(); ?>>

このすぐ下に、先ほどの[1]のコードを貼り付けましょう。

次は実際に「Page Plugin」を設置していきます。私は記事下に表示したかったので「single.php」内にある下記コード直下に[2]を貼り付けました。

<?php the_content(); //本文 ?>

保存して確認します。

fb-page-plugin3

私は[2]のコードをdivタグで囲って、CSSで枠をつけてみました。参考になれば幸いです。

まとめ

bodyタグ直下に貼り付けたコードは「JavaScript SDK 」を読み込むコードで、これがないと「Page Plugin」が動かないようです。

カバー写真やいいね!をしている人たちの画像を表示/非表示にしてみて、お好みのスタイルで設置してみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
確認した画像に「あなたがいいね!と言っています。」と表示されていて恥ずかしい…はい。自分でいいね!して現在8件です。。

 - Facebook, Web

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「Vimium」でマウスなしブラウジング!ネットサーフィンが捗るよ

こんにちは、okutani(@okutani_t)です。Chrome拡張機能の『 …

これでクソ記事書き放題!noindexを使ってサイト評価を下げない方法

こんにちは、okutani(@okutani_t)です。僕はブログ記事を書くとき …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

サイトを好きに改ざんできちゃう!?Clone Zoneってサイトが面白い件

こんにちは、Web勉強中okutani(@okutani_t)です。 今回は、サ …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。