2012年11月21日水曜日

BloggerでZenbackを導入

面白い機能のあるZenbackだが、Bloggerに導入するとなると色々とハードルがあるようで。
僕も試行錯誤する羽目になったのだが、なんとか目処が付いたので報告しておこう。
Zenbackって?
このブログでは関連記事の項目をつくってリストアップしてあるが、ブログ内の関連記事やブログ外の関連記事を反映してくれるガジェットがZenbackというヤツだ。
具体的にはこんな感じになる。
zenback
この画面では「関連するみんなの記事」と「ソーシャルブタンセット」しか入れていない。が、色々表示させることが可能だ。
Zenbackが表示できる項目
  • ソーシャルボタンセット
  • 関連する記事
  • 関連するみんなの記事・キーワード
  • Twitterでの反応
  • はてなブックマークでの反応
  • Facebookコメント
と、大きく分けるとこんな感じ。
ソーシャルボタンセットに含まれるもの
ソーシャルボタンセット
選択できるのは8項目。
好きなモノをセレクトできる。
関連する記事の選択
選択
関連する記事、というのはブログ内の関連記事のことなのだが、これを画像付きで紹介するという話。
画像を付けると目を引くので、一見把握性が向上する。
ま、メリットはあるって事だな。
BloggerでのZenbackの導入手順
まあ、Bloggerに特化した話でもないし、Zenbackのサイトでも方法は紹介されている。
だが、自分の場合、色々理解出来なかったこともあったので、せっかく試行錯誤した結果については報告しておこうと思う。
手順は3パターン
BloggerにZenbackのガジェットを適用するパターンは3つあるようだ。どの手順が良いかは人それぞれだと思うが、公式のサイトが紹介する方法の他にもやり方はある、と言うことだけは覚えておいた方が良いだろう。
方法1 公式サイトが紹介する導入方法
公式サイトでは、基本的に記事内にガジェットを埋め込む方法を推奨している。手順はこんな感じだ。
  1. Zenbackに登録する。
  2. 発行されるコードを取得。
  3. コードを「テンプレート>HTMLの編集>続行」で、「ウィジェットのテンプレートを展開」にチェックを入れ、所定の場所にコードを埋め込む。
  4. テンプレートを保存する。
この方法だと、Zenbackが推奨する記事ページの記事下にガジェットを埋め込むことが出来る。
個別記事下
方法2 「ガジェットを追加」でコードを埋め込む
この方法は比較的簡単だ。
手順は以下の通り。
  1. Zenbackに登録する。
  2. 発行されるコードを取得。
  3. 「レイアウト」で「ガジェットを追加」を選択し、「HTML/JavaScript」の項目を選ぶ。
  4. 「コンテンツ」の中にコードを貼り付ける
この方法だと、サイドバーやトップ下などにガジェットとして埋め込むことが出来る。
サイドバーへの設置
ただ、個別の記事に対応する様になる訳ではないので、関連記事の検索精度はイマイチだ。これは仕方が無いところだろう。
故に、導入方法は単純だがZenbackも積極的に勧めている方法ではない。
方法3 記事の設定に埋め込む
この方法もかなり簡単。
前提条件が満たされれば、この方法が一番良いかも。方法1と同じ場所にガジェットを埋め込むことが可能となる。
  1. Zenbackに登録する。
  2. 発行されるコードを取得。
  3. 「設定>投稿とコメント>投稿テンプレート」を選択。テンプレートのテキストボックスの中にコードを貼り付ける。
方法は単純だが、前提条件として、記事をオンラインで書く人に限られる方法である点と、テンプレート導入以降の記事にしか反映されない点がデメリットかな。
僕のようにWLWでオフライン編集し、Bloggerに投稿するスタイルを採る人には不向きだ。
Bloggerで「zenback読み込み中です。」と表示されるケース
さて、僕の場合は色々な手違い等があって、なかなかZenbackを導入出来なかった。
リダイレクトされる仕様に悩まされる
大した話ではないのだが、これに気がつかなかったのが失敗の1つ。
Bloggerのドメインが.comから.jpに変更された時期があり、本来.comなのに、リダイレクトされて.jp表示になる仕様となっている。
http://katuyaku2.blogspot.jp/というのが、僕のサイトのトップのアドレスに示されているのだが、本来、Bloggerは.comドメインを使っており、各国のアドレスにリダイレクトされた結果だ、ということを僕は知らなかった。
この辺りは、Zenbackの公式にも説明が成されている。
Bloggerのドメイン変更(.comから.jpへ)でお困りの方へ
こんな記事で分かるかいっ!ちゅー感じのシロモノだが、説明はされている。
 
解決方法は簡単で、Bloggerのダッシュボードから「ブログを表示する」を選択し、実際に表示されたブログのURLをZenbackに登録する際のURLとして報告すれば良いのだ。
  1. 「新規ブログを追加」を選択
  2. 「スクリプトコード取得:ステップ1」で、実際に表示されているURLを入力し「次へ」
  3. 「スクリプトコード取得:ステップ2」で、ブログ名を確認して「次へ」
  4. 「スクリプトコード取得:ステップ3」で、必要なボタンをセレクトして「次へ」
  5. 「スクリプトコード取得:完了」で、「管理画面へ」を選ぶ
  6. 管理画面で、「ツール」の中の「コード」をクリックして、表示されるスクリプトを取得。
これで、適切なスクリプトコードを取得することが出来る。
「/」と「www」
スクリプトコードを取得するときに気をつけたいのが、「/」と「www」の表記だ。
BloggerのURLはwwwを省いた状態で表示される。
http://katuyaku2.blogspot.jp/
こんな感じだ。
だが、実際には、wwwを付けた状態の方がより正しい。「www」は[World Wide Web」の略称だが、ウェブドレスは「Http://」の後に本来、「www」が付けられる。
よって、これに準じて、
http://www.katuyaku2.blogspot.jp/
と表記されるのが正しいと扱われるケースがあり、Zenbackでもこれを踏襲しているようなのだ。
一番最後の「/」も省いてはならない。
……のだが、僕の場合は「www」を付けてスクリプトを取得すると、逆にzenbackが表示されなくなってしまうので、人それぞれなのかも知れない。

記事が長くなってしまったので、続きはまた。

ランキングへの応援クリックよろしく!