Facebook Page Plugin を 以前のLike Box風に表示する

main_FBPcustomize
Facebookの「Like Box」は2015年6月23日で終了して「Page Plugin」に変わりました。しかし幅が500pxまでになった事やデザイン面でちょっと…な所があったので変更したかったのですが、「Page Plugin」はiframeでfacebook.com内で表示されていますのでどうする事もできません。

そこで、強引な方法ですが 外観をこちら側で HTML・CSS で生成し「Page Plugin」からは必要な情報だけを取得して HTMLに流し込むという方法でうまく動きましたのでご紹介します。

 

Page Plugin

今回作った Like Box風な Page Plugin

設置方法

ダウンロード

こちらからファイルをダウンロードしてください。


*fb_page_plugin.php はWordPress上で動作します。

 

ソース設定

fb_page_pluginXXXX.zip ファイル(XXXXはバージョン番号)を解凍してください。

解凍されたファイルは2つです。
fb_page_plugin.php
fb_page_plugin.css

fb_page_plugin.phpファイルを 以下 の手順で設定値を変更してください。

 

サーバー設置

my-pluginフォルダ、または 現在利用しているテーマフォルダへ 2つのファイルをアップロードしてください。
*ローカル(テスト環境)でも動作します。

 

表示確認

fb_page_plugin.phpを設置している実アドレスでブラウザで確認してみてください。
*WordPressを「wp」フォルダにインストールしたとしての例です。

例:fb_page_plugin.php を my-pluginフォルダ に設置した場合
http//ドメイン/wp/wp-content/plugins/my-plugin/fb_page_plugin.php

例:fb_page_plugin.php を テーマ(TwentyFifteen)フォルダ に設置した場合
http//ドメイン/wp/wp-content/themes/twentyfifteen/fb_page_plugin.php

 

テンプレートに設置

表示したいページのテンプレートに以下のコードを張り付けてください。

例:fb_page_plugin.php を my-plugin に設置した場合

	<iframe src="<?php echo plugins_url(); ?>/my-plugin/fb_page_plugin.php" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:300px;" allowTransparency="true"></iframe>
	

例:fb_page_plugin.php を テーマ に設置した場合

	<iframe src="<?php echo get_template_directory_uri(); ?>/fb_page_plugin.php" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:300px;" allowTransparency="true"></iframe>
	

*iframe内の widthやheight・設定タグ等は環境に合わせて設定してください。

 



 

fb_page_plugin.php 設定

以下を参考にして fb_page_plugin.php 内をあなたの環境にあわせて変更してください。

WordPressの環境読込

「../」の部分を調整してください。

	/** Loads the WordPress Environment and Template */
	require_once '../../../wp-blog-header.php';
	

fb_page_plugin.php を設置した位置から相対で WordPress の wp-blog-header.php の場所を指定します。
*間違うと 表示確認で 真っ白 になります。

 

Facebookページ の URL設定

Facebookページ のURLを入力してください。

	//Facebookページ URL
	private $fb_page_url = "https://www.facebook.com/pages/・・・・";
	

*Facebookページ とは 会社や団体、ブランドまたは製品、コミュニティ等の専用に作ったページです。個人のページでは表示されません。

 

Facebookページ の タイトル設定

これは「Page Plugin」がうまく読み込めなかった時に表示する Facebookページのタイトルです。通常は「Page Plugin」のデータを使います。

	//Facebookページ タイトル
	private $fb_page_url_title = "Facebookページのタイトルです";
	

Facebookページのタイトルを入力してください。

 

Facebookページ の アイコン設定

これは「Page Plugin」がうまく読み込めなかった時に表示する画像URLです。通常は「Page Plugin」のデータを使います。

	//Facebookページ  アイコン URL
	private $fb_page_url_img = "";
	

FacebookページのアイコンURLを入力してください。

こちらを参考に FacebookページのアイコンURLを入力してください。
*自前で用意する場合はそのURLを入力してください。サイズは 50x50px です。

 

Facebook APP ID 設定

あなたの Facebook APP IDを入力してください。

	//Facebook APP ID
	private $fb_app_id = "0123........";
	

*Facebook Page Plugin作成のページの「Get Code」ボタンで表示されるスクリプト内に APP ID が使われていますので調べるのは簡単です。

それでも不明な場合はこちらで確認してくたさい。
Facebook All Apps https://developers.facebook.com/apps/

 

Facebook Page Plugin の URL設定

	//Page Plugin URL
	private $page_plugin_url = "http://www.facebook.com/v2.4/plugins/page.php・・・・";
	

こちらを参考に「Page Plugin」のURLを入力します。

 

いいねをされたユーザーの最大表示数の設定

	//いいねユーザー最大表示数
	private $max_user_su = 50;
	

ユーザー表示は最初は数人ですが ユーザー情報はキャッシュに貯めこんでいきますので徐々に増えていきます。
表示するユーザーは CSS で2行以降は見えなくしていますが 行を多くしたい・表示幅が大きい場合等はユーザー表示の最大数を調整してください。
*表示行を増やす場合は CSS(fb_page_plugin.css) も調整してください。

 
 

「Page Plugin」のURL と アイコンURL の取得方法

① Facebook Page Plugin作成のページを Firefoxブラウザ でアクセスします。
 https://developers.facebook.com/docs/plugins/page-plugin

② 各項目を以下を参考に設定します。
fb_page_plugin_1

Facebook Page URL Facebook Page のURLを入力してください。
Tabs 空欄にしてください。
Width 500 にしてください。
Height 空欄にしてください。
Use Small Header チェック無しにしてください。
Adapt to plugin container width チェックを入れてください。
Hide Cover Photo チェックを入れてください。
Show Friend’s Faces チェックを入れてください。

*設定をすすめると「Page Plugin」のプレビューが変化していきます。

③ 「Page Plugin」のURL
「Page Plugin」のプレビューが表示されている所を右クリック。「このフレーム(H)」→「このフレームを新しいウィンドウで開く(W)」で iframe のサイトが単独で開きますのでそのURLをコピーします。
fb_page_plugin_2
fb_page_plugin_4

④ アイコンURL
fb_page_plugin_3
アイコン が表示されている所を右クリック。「画像の URL をコピー(Q)」で URLをコピーします。

*IEブラウザ の場合はそれぞれ右クリック->プロパティでURLのコピーを取ることができます。
*既にサイトに「Page Plugin」が設置されている場合はそちらの URL を取得した方が最新のバージョンのコードが得られます。

 

注意事項

*「Page Plugin」はアクセスするユーザーの情報によって友達優先で いいねをされたユーザー表示をしているようですが fb_page_plugin.php では そうなりません。
* Facebookは よく仕様が変わりますので いつかは使えなくなるかもしれませんのでご注意ください。(Facebook API Ver2.4で作ってます)

 


 

おまけ

fb_page_plugin.php 内の HTML部分や fb_page_plugin.css を変更する事で 背景や装飾・レイアウト等 自由にデザインを変更する事ができます。

fb_page_plugin.phpはファイル名を変えて使用する事で複数のFacebookページの「Page Plugin」を設置できます。
また、デザインも変える場合はCSSファイルも別名で作ってHTML部分のCSS読込タグを変更してください。
*その際には以下のデータ保存先名を個別に変更してください。

	//Transient,option 保存先名
	private $transient_name = "nendebcom_fb_page_plugin";