▲PAGE TOP

2014年4月25日金曜日

各記事にfacebookコメントを設置する


各ページごとにfacebookコメントを設置する方法です。


  1. Comments をクリックする
  2. ”url to comment on”はそのままでwidthなどを適当に選ぶ
  3. ”Get Code”をクリックする
  4. ”XFBML”をクリックする
  5. 上段<div ...... </script>のコード(1)をコピーする
  6. ブロッガー管理ページ>テンプレート>HTML編集 をクリックする
  7. テンプレート内の「<!-- quickedit pencil -->・・・・</div></div>」の下にコード(1)をコピペする
  8. コピペしたコード(1)のすぐ下に最下段のコード(2)「<fb・・・・</fb:comment>」を編集後(下記参照)に入力する
  9. テンプレート最上部にあるコード(3) <html・・・・>内に中段にある「xmlns:fb='http://ogp.me/ns/fb#'」を入力する
  10. コード(1)(2)を囲むように<div id="fb-comments">・・・・・</div>を入力する(※1)
  11. 保存して終了


※1 <div>で囲むことでfacebookコメントを表示させたくない場合に簡単に非表示にできる
------------------------------------------------------------------------
非表示にさせたい場合は、以下のタグを入力する
<style>#fb-comments { display: none ; }</style>

【重要】ラベル一覧ページ(ラベルをクリックした後のページ)でfacebookコメントを表示させたくない場合は、以下の場所にタグを入力する

   <div class='status-msg-body'>
      <data:blog.searchLabel/>
<style>#fb-comments { display: none ; } </style>
    </div>




コード(3)のサンプル

facebookでは””で囲まれていますが、''に変更すること

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>


コード(1)(2)のサンプル

紫のコードの下に配置するとちょうどよい
赤字部分に変更して入力すること



        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>

<div id='fb-comments'>
<div id='fb-root'/>
<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 = &#39;//connect.facebook.net/ja_JP/all.js#xfbml=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<fb:comments colorscheme='light' expr:href='data:post.url' numposts='7' width='640'/>
</div>











COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)