QRコード
Facebook Comments と So-net ブログを連携させる方法 [その他]
このブログでも使用しておりますが、Facebook Comments と So-net ブログの各記事とを連携させる方法について簡単にご説明いたします。ただし、このブログのテーマからは大きく離れる内容ですので、申し訳ございませんが、このブログでの技術的情報の備忘録という位置づけで詳細は省きます。
なお、So-net ブログ上で「上級者向け」と記載されている部分の編集を行いますので、よくわからない場合はやらないでください。また、So-net ブログのテンプレートやHTMLなどによって違いがある可能性がありますし、すべてを検証したわけではございませんので、以下を実施する場合は自己責任の範囲でお願いいたします（この情報は、2011年10月時点のものです）。
０． そもそもの連携のメリット
ブログ記事の Facebook コメント欄にコメントを投稿すると、ブログ記事のコメント欄と投稿した方の Facebook のウォール欄の両方に、ほぼリアルタイムでコメントを投稿することができます（ウォール欄にはコメントを投稿しないことも可能）。そのウォール欄の投稿に対して Facebook 側でコメント返信すると、ブログ記事のコメント欄にも返信が反映されます。このように、ブログと Facebook の双方向投稿ができるようになります。
１． Facebook アプリを登録し app ID （アプリID）を取得する
アプリの登録方法は省略しますが、また、どのようなアプリでもよいようですが、ブログのURLをWebアプリとして登録する形で app ID を取得しました。この app ID を、次の２．で使用します。
２． Facebook 開発者ページの Comments ページのツールからコードを取得する
Core Concepts › Social Plugins › Comments （https://developers.facebook.com/docs/reference/plugins/comments/）のページにツールがありますので、app ID を含む必要項目を入力してブログに貼るコードを取得します。必要項目は、So-net ブログにコードを貼るさいにも改変できますので、適当なものでも構いません。以下のような２つのコードが取得できます。これらのコードを、次の３．４．で使用します。
（Ａ）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 です（Ｂ）Facebook コメント配置場所に貼るコード： 後で改変して使います
<div class="fb-comments" data-href="example.com" data-num-posts="2" data-width="500" data-colorscheme="dark"></div>
※黄字の部分が後で改変できます
３． So-net ブログのテンプレート管理のＨＴＭＬ編集で（Ａ）のコードを貼る
ブログのメニュー デザイン＞テンプレート管理＞HTML編集 より、HTMLを追加してトップページのHTMLを編集します。以下のように、<body> の直後あたりに（Ａ）のコードをペーストします。・・・・・</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">・・・・・
４． So-net ブログの記事コンテンツのＨＴＭＬ編集で（Ｂ）のコードを貼る
ブログのメニュー デザイン＞レイアウト＞記事カラム＞記事＞コンテンツHTML編集 より、記事ページのHTMLを編集します。Facebook コメントを表示させたい場所に（Ｂ）のコードをペーストし改変します。コードをペーストする場所は、画面に表示されている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年８月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以上のサイズに）。
Copyright (c) 2012 ~ 2024 ANOTHER YOU All Rights Reserved.
コメント 0