以前ご紹介したような、WordPressでfacebookの「Page Plugin」を埋め込むケースは多いと思いますが、今回、facebookの投稿文をトピックス情報として抜粋したいというご相談を頂き、試してみました。

「App Token」の準備

まずは、開発者登録し、「App Token」を取得します。
開発者登録はこちら。
https://developers.facebook.com/

取得後、「新しいアプリを追加」をクリックします。

任意の名前を入力し、進めていきます。

連絡先メールアドレスとカテゴリーを選択し、「アプリIDを作成」をクリックします。

作成したら、「ツール&サポート」から、「Access Token Tool」をクリックします。

「js」ファイルを作成し、function.phpに追記する。

以前ご紹介した手順で「js」ファイルを扱えるように設定します。

jQueryが動かない？WordPressでjQueryを使う方法

今回は「app.js」というファイルを追加します。「function.php」に以下の内容を追記します。

if (!is_admin()) {
function my_scripts() {
    //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script( 'app', get_stylesheet_directory_uri() . '/js/app.js', array( 'jquery' ), '1.0.0', true );  
}
  add_action( 'wp_enqueue_scripts', 'my_scripts' );
}

facebookの投稿文は以下の形式で取得可能です。

https://graph.facebook.com/＜ページID＞/feed?access_token=＜App Token＞&limit=＜表示させたい件数＞

json形式で取得するため、そのままは埋め込めないため、ちょっと細工が必要です。追加した「app.js」に以下の内容を追記します。

jQuery(function(){
 jQuery.ajax({
 type: "GET",
 url: "https://graph.facebook.com/＜ページID＞/feed?access_token=＜App Token＞&limit=＜表示させたい件数＞",
 dataType: "json",
 success: function(json){
 json = json.data;
 var num = json.length;
 var Feed = "<table class="fb-tbl">\n";
 for(var i=0; i<num; i++){
 var time = jpymd(json[i].created_time);
 var text = json[i].message;
 if ( text == null ) {
	 text = '写真などを更新しました。'; // テキストがない投稿については適当に何か...
 }
 Feed += "<tr><th>" + time + "</th><td><a href='https://www.facebook.com/＜facebookページのURL＞/' target='_blank'> " + text + "</a></td></tr>\n";
 }
 Feed += "</table>\n";
 jQuery("#topics").append(Feed);
 }
 });
});

function jpymd(str) {
 var date = str.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
 return date = date[1] + "年"+ date[2] + "月" + date[3] + "日";
}

埋め込みたい箇所に以下の1行を追記します。

<div id="topics"></div>

出来上がりはこんなイメージです。

細かい見た目は「fb-tbl」クラスに指定し、調整しました。

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ