facebook の投稿文を WordPress にトピックスとして 抜粋 する方法

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

「App Token」の準備

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

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

facebookapp1

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

facebookapp2

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

facebookapp3

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

facebookapp5

facebookapp4

facebookapp6

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

以前ご紹介した手順で「js」ファイルを扱えるように設定します。
https://developerslife.xyz/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>

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

sampletabel

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

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m

インディーズでミュージシャンをやっていたのですがいつのまにか...

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

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク