2016年5月6日

TAMAMACのHOMEにFACEBOOKコメントを

I'm challengeing put on facebook comments on google blogger.
前からやっているんだけど、解決してないんですよ。


 まずは、https://developers.facebook.comにアクセスして携帯電話番号登録などもして個人認証して、デベロッパーモードの設定を済ませて、アプリの発行をしたら、

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : ‘xxxhogehogexxx’,
      xfbml      : true,
      version    : 'v2.6'
    });
  };

  (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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

のようなコードを吐き出したので、<body>タグの後ろへ貼り込んでおいた。その時「イイねボタン」の設定と思われる、

<div  class="fb-like" data-share="true" data-width="450" data-show-faces="true">
</div>

なるものも吐き出したので、これも適当な場所を探して、とりあえず標準のコメント欄の後ろにでもと思い貼り込んだ。

ここから本命、コメント欄設置。
にアクセスして、コードを取得してみた。

<div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&version=v2.6&appId=xxxhogehogexxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

と言われたが、さっきのと一緒だろうなぁ、だからイイやと放置。も1つ

<div class="fb-comments"></div>

と言われたので、イイねボタンの後ろに張り込んだ。
これだと各投稿ページごとにはならないので、イイねボタンとコメントを

<b:if cond='data:blog.pageType == &quot;item&quot;'>
イイねボタン
コメント
</b:if>

にしてみた。
自分にも通知が来て欲しいと思ったので、英語解説されているところを読んでみたら

<meta content='xxxhogehogexxx' property='fb:admins'/>

な感じにするとよろしいというので張り込んでみた。
おまけと言っては何だが、
にアクセスして自分の(固定?)ページのコードを取得してみる。

<div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&version=v2.6&appId=xxxhogehogexxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

とまた同じこと言われるので無視、でいいのか?
で、
<div class="fb-page" >
</dev>
と言われるもそれをガジェットに張り込んでも音沙汰なくもうしばらく説明を読んでみると、何やら設定項目が必要なようで、そりゃそうだ。で

<div class="fb-page" 
  data-href="https://www.facebook.com/あたいのページアドレスだよ
  data-width="240" 
  data-height=“300" 
  data-tabs="timeline"
  data-hide-cover="false"
  data-show-facepile="false" 
  data-small-header=“false”
  data-show-posts="false">
</div>
というような設定にしてみた。<-------今ここ

 等わりとスンナリいったのね、自分できるじゃんっ! エヘヘと思ったがそんなわけはなかった! ただ今の所DisqusFacebook2つのコメント欄が載ってます。その違いは、アカウント認証の問題は置いておいて、DisqusだとPCやタブレット、スマホに関わらずコメントスレッドが共有されます。
 ところがどっこいFacebookコメントではスマホで接続した時はスマホの書き込みのみ、PCの場合はPCのみしか見えない。なぜかiPadMiniPCの部類らしい。これは非常に困ってしまう、通知も届かないし。


 他のブログシステム、例えばwordpressとかでもそうなっちゃうのかなぁ? そんな訳無いよねぇ…たぶん。誰か詳しい人教えてくださいませ、もうチンプンカンプンです。T^T