ココログにfacebookの「いいね」ボタンと「コメントプラグイン」を表示するようにしてみました

投稿日時: 投稿者:

前提条件として、ココログのプランは「プロ」でなければできません。事前にプラン変更を行っておく必要があります。

まずはfacebookのcommentsプラグインのソースを入手。手順は以下の通りです。

Ws000100_3 まずはアプリケーションＩＤを取得します。
https://developers.facebook.com/apps　から「新しいアプリケーションを作成」ボタンを
押してください。

表示された画面にて App Name欄に適当な文字列（私は cocolog-commentsと入れました）を入力し、続行ボタンを押します。

Ws000101_3 次にセキュリティチェックにて表示された文字列を入力して送信ボタンを押します。

Ws000102_5 これでアプリケーションＩＤは作成完了です。表示された画面にて「アプリのドメイン」欄にココログブログのドメイン、あと下の方の「サイト」にチェックを入れ、表示されたＵＲＬ記入欄にブログのＵＲＬを入力します。

次にfacebookのcommentsプラグインのコードを取得します。

以下のＵＲＬをクリックします。
http://developers.facebook.com/docs/reference/plugins/comments/

Ws000103_2 「URL to comment on」欄にブログのＵＲＬを入力し、「Get Code」ボタンを押します。

Ws000106_3 Commentsのプラグインコードが表示されますが、最上部はXFBMLを選択してください。
３行目ほどにある「次のスクリプトがあなたのアプリのIDを使用しています」の右側に先ほど入力した「App Name」が表示されていることを確認してください。違う場合は▼マークをクリックして選択してください。

コードは３つあります。それぞれ、メモ帳かどこかに貼り付けておいてください。

1.ページにJavaScript SDKを含めます(理想的には、<body>のすぐ後に配置します)。

<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=（あなたのアプリケーションＩＤ）”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

2.XMLの名前空間を文書の<html>タグに追加してください。これは旧バージョンのInternet ExplorerでXFBMLを動作させるために必要です。

<html xmlns:fb=”http://ogp.me/ns/fb#”>

3.プラグインを表示したい場所にプラグインのコードを配置します。
<fb:comments href=”http://*******************” num_posts=”2″ width=”470″></fb:comments>

ココログの方で上記のコードを埋め込んでいきます。

Ws000107 まずブログのデザインを予め上級テンプレートに変換しておいてください。
埋め込む場所ですが、私は個々の記事のページだけに埋め込むようにしました。（その他のページは「いいね」ボタンだけです。）
なので、編集するテンプレートは「Individual Archives 」だけです。「Individual Archives 」をクリックします。

編集する箇所は３箇所です。

まずは２行目あたりの<html>タグですが、以下のように編集します。
<html xmlns=”http://www.w3.org/1999/xhtml” id=”sixapart-standard” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://ogp.me/ns/fb#”>
※これは上述の３つのコードの２番にあたります。

次に</head>タグのすぐ手前に以下のコードを追加します。

<meta property=”og:title” content=”<$MTEntryTitle remove_html=”1″$>” />
<meta property=”og:type” content=”article” />
<meta property=”og:description” content=”<$MTEntryExcerpt remove_html=”1″$>” />
<meta property=”og:url” content=”<$MTEntryPermalink$>” />
<meta property=”og:site_name” content=”<$MTBlogName$>” />
<meta property=”og:locale” content=”ja_JP” />
<meta property=”fb:admins” content=”（あなたのフェイスブックＩＤ）” />
<meta property=”fb:app_id” content=”（先ほど取得したアプリケーションＩＤ）”/>

次に<body>タグのすぐ下に以下のコードを追加します。

<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=（あなたのアプリケーションＩＤ）”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
※これは上述の３つのコードの１番にあたります。

最後ですが、</MTEntryIfAllowComments>タグの下に以下の２行を挿入します。

<fb:like href=”<$MTEntryPermalink$>” send=”true” width=”470″ show_faces=”true”></fb:like>
<fb:comments href=”<$MTEntryPermalink$>”  num_posts=”2″ width=”470″></fb:comments>
※これは上述の３つのコードの３番にあたります。
※１行目は「いいね」ボタンのコードです。２行目がコメントプラグインのコードになります。

皆さんもお試し下さい。