So-net無料ブログ作成
検索選択

Facebook Comments と So-net ブログを連携させる方法 [その他]

実物は、この記事や他の記事の下部をご覧ください。

このブログでも使用しておりますが、Facebook Comments と So-net ブログの各記事とを連携させる方法について簡単にご説明いたします。ただし、このブログのテーマからは大きく離れる内容ですので、申し訳ございませんが、このブログでの技術的情報の備忘録という位置づけで詳細は省きます。

なお、So-net ブログ上で「上級者向け」と記載されている部分の編集を行いますので、よくわからない場合はやらないでください。また、So-net ブログのテンプレートやHTMLなどによって違いがある可能性がありますし、すべてを検証したわけではございませんので、以下を実施する場合は自己責任の範囲でお願いいたします(この情報は、2011年10月時点のものです)。

0. そもそもの連携のメリット

ブログ記事の Facebook コメント欄にコメントを投稿すると、ブログ記事のコメント欄と投稿した方の Facebook のウォール欄の両方に、ほぼリアルタイムでコメントを投稿することができます(ウォール欄にはコメントを投稿しないことも可能)。そのウォール欄の投稿に対して Facebook 側でコメント返信すると、ブログ記事のコメント欄にも返信が反映されます。このように、ブログと Facebook の双方向投稿ができるようになります。

1. Facebook アプリを登録し app ID (アプリID)を取得する

アプリの登録方法は省略しますが、また、どのようなアプリでもよいようですが、ブログのURLをWebアプリとして登録する形で app ID を取得しました。この app ID を、次の2.で使用します。

2. Facebook 開発者ページの Comments ページのツールからコードを取得する

Core Concepts › Social Plugins › Comments https://developers.facebook.com/docs/reference/plugins/comments/)のページにツールがありますので、app ID を含む必要項目を入力してブログに貼るコードを取得します。必要項目は、So-net ブログにコードを貼るさいにも改変できますので、適当なものでも構いません。以下のような2つのコードが取得できます。これらのコードを、次の3.4.で使用します。

(A)SDKスクリプト部分: 後で取得したままのコードをコピー&ペーストして使います

<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/all.js#xfbml=1&appId=123456789012345";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
※青字の数字部分が app ID です
 

(B)Facebook コメント配置場所に貼るコード: 後で改変して使います

<div class="fb-comments" data-href="example.com" data-num-posts="2" data-width="500" data-colorscheme="dark"></div>

※黄字の部分が後で改変できます 

3. So-net ブログのテンプレート管理のHTML編集で(A)のコードを貼る

ブログのメニュー デザイン>テンプレート管理>HTML編集 より、HTMLを追加してトップページのHTMLを編集します。以下のように、<body> の直後あたりに(A)のコードをペーストします。
 
 ・・・・・ 
</head>
<body>

<!-- ▼ここからfacebookコメントプラグイン追加用改変 -->

<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/all.js#xfbml=1&appId=123456789012345";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- ▲ここまでfacebookコメントプラグイン追加用改変 -->

<div id="container">
 ・・・・・ 
 

4. So-net ブログの記事コンテンツのHTML編集で(B)のコードを貼る

ブログのメニュー デザイン>レイアウト>記事カラム>記事>コンテンツHTML編集 より、記事ページのHTMLを編集します。Facebook コメントを表示させたい場所に(B)のコードをペーストし改変します。コードをペーストする場所は、画面に表示されているHTML+スクリプトコードをよく読んで、慎重に位置を探し出してペーストしてください。
 
 ・・・・・ 
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/_js/bookmark.js"></script>
<% /if %>
</div>
 
<!-- ▼ここからfacebookコメントプラグイン追加用改変 -->

<div class="fb-comments" data-href="<% article.page_url | html %>" data-num-posts="5" data-width="570" data-colorscheme="dark">
</div>
 
<!-- ▲ここまでfacebookコメントプラグイン追加用改変 -->
 
<div class="posted"><% if:article.owner_is_share_blog %><span class="postName">posted by <% article.nickname %> at </span><% /if %> 
 ・・・・・ 
 
ここで、黄字の部分が重要で、この部分が Facebook 側に通知するブログのURLになります。上記のように改変(スクリプト変数化)することで、各記事作成時に自動的に各記事個別のURLを生成して Facebook に通知でき、各記事個別の Facebook コメントにすることができます。また、上記コードの青字の改変可能部分の意味は以下の通りです。
 
  data-num-posts : ブログに表示するコメントの最大数
  data-width : コメントの表示幅
  data-colorscheme : コメントの背景色 light と dark が指定可能
  

以上で完了です。

なお、コメントの投稿管理は、Facebook のCommnet Moderation Tool (https://developers.facebook.com/tools/comments)で行うことができます。

#設定の仕方に問題があるのか、私どものアカウントでは Commnet Moderation Tool は正常に動作していない様子。→以下の例のようにアプリIDを head 内に追加設定することで、モデレーションツールが正常に動作する模様(2013年7月30日)。
  <meta property="fb:app_id" content="123456789012345" />

##記事公開直後に、コメント欄下に「警告: ・・・・・ に到達できません」というメッセージが表示される。このメッセージのリンクをクリックするとこの警告は解消されていたが、解消されないこともある。その場合、デバッガーツール(https://developers.facebook.com/tools/debug)に当該記事のURLを入力すると警告が解消した(2013年7月10日)。2014年8月10日時点では、デバッガーツール画面にwarningだけではなく、新たにerrorレベルの表示がされるようになった。og:typeが"blog"のためerrorとなっている、また、以前からのwarningはog:imageの画像サイズが小さいとなっている。冒頭のメッセージ表示を消すには、リンクをクリックして、「Open Graph Object Debugger」>「Input URL」>「Fetch new scrape information」をクリックする。根本的には、og:typeとog:imageへの対応をso-netブログでしていただく必要がある("blog"でなく"article"か"website"にHTMLコード生成、画像サイズを縮小せず200x200以上のサイズに)。


RSS1.0このブログの更新情報が届きます(RSS1.0) ※左のリンクから「フィードを登録|購読する(無料です)」をクリックしてブラウザに登録すると、更新通知が自動的にブラウザに表示されます。詳しくはブラウザのヘルプをご覧ください。
※以下のFacebookコメントへの返信内容は、2012年5月以前のものは、ご投稿者と返信者だけが見られます。
nice!(2)  コメント(0)  トラックバック(0) 
共通テーマ:blog
Copyright (c) 2012 ~ 2017 ANOTHER YOU All Rights Reserved.

nice! 2

コメント 0

コメントを書く

お名前:[必須]
ブログアドレスURL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ 現在の画像認証文字は587625です(数字部分をコピー&ペーストして入力ください)。お手数おかけしますが、So-netブログの大量スパムコメント対策のため、画像認証が必要になりました。
※※ 現在、コメント投稿は承認制としております。ご投稿いただいたコメントの公開までには、今しばらくお時間をくださいませ。

トラックバック 0

この記事のトラックバックURL:
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。