BloggerにZenbackを導入する方法

公開日 : 最終更新日 :

カテゴリー :

Zenbackは、自身のブログの関連記事やちがうブログの関連記事を表示するサービスです。関連記事を表示する機能以外にもFacebook・Twitter・mixiといったSNSのボタンやソーシャルプラグインのほか、はてブやEvernoteクリップといったブックマークサービスのボタンなども設置出来ます。Zenbackを導入すると自身のブログのアクセスも増えると言われています。今回は、BloggerにZenbackの導入方法を紹介します。

Zenbackコードの取得方法

まずは、Zenbackにアカウントを作って欲しい機能を選択します。

  1. Zenbackにアクセス
  2. 右上の「新規登録」をクリック
  3. メールアドレスとパスワードを設定して「確認」ボタンをクリック
  4. 「決定」ボタンをクリック
  5. ブログのURLを入力して「次へ」ボタンをクリック
  6. ブログ名を確認して「次へ」ボタンをクリック
  7. 入れたいものを選択して「次へ」ボタンをクリック
    zenback-social
  8. 出てくるスクリプトコードをコピーする
  9. 完了

これでBloggerにZenbackを導入する準備が出来ました。次に、ZenbackをBloggerに実装します。実装する方法はHTML/Javascriptウィジェットを導入する方法とブログガジェットの中にインクルードする方法です。

Bloggerの設定

HTML/Javascriptガジェットを使用する方法

  1. 「レイアウト」→「ガジェットの追加」をクリック
  2. 「HTML/Javascript」ウィジェットを選択
  3. コンテンツにZenbackから取得したコードを挿入
  4. 「保存」ボタンをクリック
  5. 完了

HTML/Javascriptガジェットを使用する方法(オプション [記事を出しているときだけ表示] )

  1. 「テンプレート」→「HTMLを編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. 「ウィジェットを展開」にチェックを入れる
  4. Zenbackを導入したHTML/Javascriptウィジェットを探す
    (予めZenbackコードが入っているHTML/JavascriptウィジェットのタイトルにZenbackを探しやすくするための文言を入れておいてブラウザの検索等でその文言を検索したほうがいいと思います。そうすると <b:widget id=’HTML*’ locked=’false’ title=’???’ type=’HTML’> が出てきて「title=’???’」の???にウィジェットのタイトルが入っています。)
  5. そのウィジェットの中のincludableコードを変更する

探すコード

変更するコード


6. 「保存」ボタンをクリック
7. 完了

ブログガジェットの中にインクルードする方法

  1. 「テンプレート」→「HTMLを編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. 「ウィジェットを展開」にチェックを入れる
  4. ブラウザの検索で「<b:widget id=’Blog1′ locked=’true’ title=’ブログの投稿’ type=’Blog’>」を検索する 検索した「<b:widget id=’Blog1′ locked=’true’ title=’ブログの投稿’ type=’Blog’>」の下に以下のコードを挿入
    (Zenbackで取得したコメントや<script>タグは外してください。)
  5. ブラウザの検索等で「<b:includable id=’post’ var=’post’>」を検索する
  6. 検索した「<b:includable id=’post’ var=’post’>」の中に「<div style=’clear: both;’/> <!– clear for photos floats –>」があるので探す
  7. 「<div style=’clear: both;’/> <!– clear for photos floats –<」の下の行に「<b:include data=’posts’ name=’zenback’/>」を挿入
  8. 「保存」ボタンをクリック
  9. 完了

Zenbackの関連記事の精度を上げる

HTML/Javascriptガジェットを導入する方法は、ブログのレイアウトのある程度自由度がある反面、メンテナンスがしづらいと思います。ブログガジェットの中にインクルードする方法は、出す場所が決まってしまいますが、メンテナンスが行い易くなります。どちらを選んでも得られるものは一緒ですのでやりやすいほうでいいでしょう。これでBloggerにZenbackを導入することはできましたが、Zenbackの関連記事の精度を上げるためブログウィジェットを少し弄ります。

  1. 「テンプレート」→「HTMLの編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. 「ウィジェットを展開」にチェックを入れる
  4. ブラウザの検索等で「<b:includable id=’post’ var=’post’>」を検索する
  5. 「<!– zenback_title_begin –>」と「<!– zenback_title_end –>」のコードを以下の場所に挿入
    (includable タグのすぐ下あたりにあります)

    「<data:post.body/>」の上下に以下のコードを挿入(<div style=’clear: both;’/> の上にあると思います)
  6. 「保存」ボタンをクリック
  7. 完了

まとめ

これでZenbackの精度を上げることが出来ます。僕のブログの場合は、まだZenbackを導入してそこまでたってないので、まだ実感があまりないのですが、これからZenbackのありがたみを受けることを楽しみにしています。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>