下からニョキっと出てくるfacebookおすすめ記事プラグインを設置する

これです。

やってる人にとっては、あらお手軽♪て感じだけど、
ウェブつくってみたい！て初心者には分からない所だらけな気がするな、とくにこういうのは。

ワードプレスでサイト設置できました！てなったところに、
JavascriptとPHPとAPIの合わせ技だからね。いきなり。

自動で設置してくれるWordpressのプラグインもあるのかもしれないので、そういうのでもいいけど。
ワードプレスのテーマを自作してるんだったら、自分でやった方が良い気がする。

facebook App ID/API Key取得

それが何か分からなくても大丈夫。
とりあえずここに行く。
https://developers.facebook.com/

画面右上の「Apps」へ。

これまた右上の「Create New App」へ。

適当に名前を入力。
App Name とか App Namespace とか書いてあるけど、別にiPhoneみたいなアプリつくる訳じゃありません。楽しく遊べるfacebookアプリが出来上がる訳でもありません。単に申請してAPI keyというコードが欲しいだけ。

アルファベットがグニャって曲がって表示されてますので、正確に入力。
前から思うけど、これって結構難易度高い。。。大文字小文字も正確にね。

こんな画面が出てきて、完了しました。

使うのはこれです。

App IDを保存しておきましょう。後で使います。

JavaScript SDK

今度はこれ。英語で解説がありますが、要はfacebookのいろんな機能をあなたのウェブサイトで使うためには、これやっておいてくださいね。ということです。
https://developers.facebook.com/docs/reference/javascript/

下のコードを正確にコピーして、ウェブサイトのすべてのページに配置。
すべてのページにということは、Wordpressの場合はheader.phpがよろしいかと思います。
もしheader.phpにbodyタグが入っていたらね。
というのも、bodyタグの直後に配置することが推奨されてるから。
もし、bodyタグがindex.phpやsingle.phpやpage.phpに入っているのなら、ちょっとテーマファイルの構造を考えた方が良いかもしれません。いや今後のためにも。

ともあれ、YOUR_APP_IDをさっきゲットしたIDに差し替える。
WWW.YOUR_DOMAIN.COMをあなたのウェブサイトのURLに差し替える。

channel.htmlが何かってのは後で。
http://は要らないの？って思うかもしれないけど、要りません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

bodyタグの直後に配置しましたね？

おすすめ記事ボックスを表示

今度はここに行ってください。
https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

下のように入力。

URL of the article
後で変えますが、ひとまずウェブサイトのURLでOK。

Trigger
onvisibleのままでOK

Read Time
何秒後におすすめ記事ボックスを表示させますか？てこと。お好みで。

Verb to display
likeのままでOK

Side
right/left ボックスの配置位置

Domain
空欄でOK

「Get Code」をクリックでコードが生成されます。

1の「Include the JavaScript SDK on your page once」は無視してください。
さっきAPP_IDを差し替えたあのコードのことです。

2のコードをページのどこかに挿入。
Wordpressで全ページに表示させたいなら、やはりheader.phpでもいいんじゃないでしょうか。
footer.phpでもいいですよ。

data-href="ウェブサイトのURL"てなっているところを、差し替えましょう。
差し替えないと各記事じゃなくて、トップページだけがLikeされちゃいます。
同じ人にいろいろな記事をライクしてもらいたいでしょうから、個別記事のURLを入れることをおすすめします。
Wordpressの場合だと、こんな感じ。the_permalink();すね。

1
<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>"></div>

channel.htmlを設置

で、このままでも良さそうですが、もうひとつだけ。
JavaScript SDK の読み込みを格段に早くするために必要です。
公式マニュアルでも強く推奨されています。

新規HTMLファイルをつくって、下記をコピペしてchannel.htmlという名前で保存。

1
2
3
4
5
6
7
 <?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/ja_JP/all.js"></script>

これをワードプレスのどこかに入れましょう。
どこでも良いですが、入れた場所と、Javascript SDKのこの部分にパスを書いてあげること。

channelUrl : '//WWW.YOUR_DOMAIN.COM/wp-content/themes/テーマの名前/channel.html',

もしワードプレスのテーマファイルの中に入れるのなら、こんな感じでしょうか。
'//WWW.YOUR_DOMAIN.COM/wp-content/themes/workabroad/channel.html',

完了

これで大丈夫なはず。
ひょこっとボックスが出てきます。
ちなみに正式名称はRecommendations Barというそうです。

[googlead]