Bloggerにzenbackで関連記事を表示する

zenbackを導入しました。 Ardor(@ArdorOnline)です。 zenbackを利用すると書いた記事の関連記事や、他の方の記事を紹介自動で紹介できるので便利です。

zenback導入について

zenbackを導入すると次のような関連記事を表示することができます。

zenbackを導入すると自身のブログ記事で関連があるものや、また他の方が書いている関連がある記事を表示してくれます。 また、あなたの記事がzenbackを導入している方のブログからリンクされますので、あなたの記事を読んでもらえる可能性が広がります。

zenbackの新規登録

zenbackを利用するにはメールアドレスの登録が必要です。
実際の登録手順は次の通りです。

新規登録

メールアドレスとパスワードを入力します。
利用規約に同意して、「確認」をクリックします。

新規登録確認画面

メールアドレスが正しいか確認して「決定」をクリックします。

新規登録完了

「次の画面へ（コード取得）」をクリックします。

スクリプトコード取得：ステップ1

ブログのURLを入力します。
「次へ」をクリックします。

スクリプトコード取得：ステップ2

入力したURLのタイトルが表示されます。
確認できたら「次へ」をクリックします。

スクリプトコード取得：ステップ3

表示したい項目を選択します。
ソーシャルボタン、関連記事、Twitter、はてなブックマーク、Facebookコメントなどが設定できます。

スクリプトコード取得：完了

設定した項目に対するスクリプトコードが表示されます。
ブログに設置するためにスクリプトコードをコピーします。

カスタマイズ

zenbackの見た目や、関連記事の表示数などカスタマイズが後から可能です。

Bloggerに設置する

コピーしたコードをBloggerテンプレートへ埋め込んで記事下に表示します。
※「HTML/Javascript」ガジェットを利用する場合は、コードをそのまま貼り付けて表示されるだけです。

テンプレートに埋め込む際には、XHTMLの対応が必要になります。
対応は、次の赤字の様にscriptタグの中身にCDATAを書き足します。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
// <![CDATA[
(あなたのコード)
// ]]>
</script>
<!-- X:E ZenBackWidget -->

追加した位置は、記事下ですので<data:post.body/>の下に入れました。

あとはzenbackにブログ記事が反映されるまで、数時間から数日かかるので待つだけです。

最後に

zenbackを導入できましたか？
zenbackはCSSを指定してカスタマイズすることもできます。
各ブログにCSS指定でカスタマイズしていけば、オリジナルコンテンツの一部として扱うことも可能です。

最後までお読み頂きありがとうございます。