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

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

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

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

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

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

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

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

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

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

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

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

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=(あなたのアプリケーションID)”;
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 」をクリックします。

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

まずは2行目あたりの<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#”>
※これは上述の3つのコードの2番にあたります。

次に</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=”(あなたのフェイスブックID)” />
<meta property=”fb:app_id” content=”(先ほど取得したアプリケーションID)”/>

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

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

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

皆さんもお試し下さい。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>