ソネブロに Zenback プラグインを導入

Zenbackであなたのブログに全てのフィードバックを。

タイトルの通り、So-net ブログに『Zenback プラグイン』を入れてみました。Zenback プラグインとは自分のブログなどを他の人に簡単に共有してもらうことが出来るプラグインです。「重い」とか色々と好みはあるようですが個人的には面白くていいかなと思います。楽だし。じゃあ何故今まで入れてなかったのか?というとプラグインを使ってしまうと自分で作ろうとする意欲が薄れてしまうから。Twitter のプラグインも自分で作ろうと思ってましたが『作ってやりたいこと』が最近無くなったので妥協しようと Zenback を使ってみようと思ったわけです。

それから最近、Movable Type で遊んでいるんですが、Movable Type を提供している シックス・アパート株式会社 が Zenback を提供しているということでちょっぴり興味をもってみたり…というわけです。

Zenback ブログの ブログサービスごとにZenback設置方法をまとめました に So-net ブログが掲載されていなかったので導入方法をメモっておきます。基本的には seesaa と同じだと思います。

ソネブロへの導入方法

ソネブロは HTML が自由なので色々方法はあると思うのですが導入方法を3通りほど挙げておきます。

記事ペイン内に貼り付ける(おすすめ)

記事に密接させたい場合に。一番効果が得られる設置場所だと思います。

「カスタム ペイン」を使って Zenback プラグインパーツを作る(設置方法はこちら

サイドバーなど、ちょいちょい場所を入れ替えるような場合に便利です。カスタム ペインの場合はページ毎の表示設定もボタンで出来ます。

ページの HTML に直接貼り付ける

フッターとか表示させたい場所が固定の場合はこの方法。

プラグイン コードの貼り付け方

今回は出来るだけ記事の近くに配置したかったので一番最初の「記事ペイン内に貼り付ける」ことにしました。

詳細編集に切り替えるとコードが色々並んでいて難しそうに感じますが貼り付ける場所がわかっていればそれほど難しくはないと思います。今回は Zenback プラグインをソネブロのシェアボタンの代替えとして導入します。「bookmark」で検索すると <% if:blog.bookmark_service -%> という部分が見つかると思うのでその手前に Zenback のコードを貼り付けます。シェア ボタンのコードは消す必要はありません。

ただ貼り付けただけでは全てのページで表示されてしまったりとちょっと困るので少しカスタマイズします。下のコードは多分そのままお使いいただけると思います。

<% if:page_name eq 'article' -%>
<div class="zenback_widget">
<!-- ↓ここにZenbackのコードを貼る↓ -->

<!-- ↑ここにZenbackのコードを貼る↑ -->
</div>
<% /if -%>

<% if:page_name eq 'article' %>〜<% /if %> というのは「記事ページの時だけ〜を出力するよ」というものです。この中に書いたものはトップ ページやカテゴリ ページなどでは表示されません。

ソネブロのナイスやコメント欄はもともと記事ページ内でしか表示されない部分なのでその辺りに設置する場合は <% if:page_name eq 'article' %><% /if %> は必要ありません。

コードの貼り付けが終わったらこのページの保存ボタンを押して、画面右上の「記事の設定に戻る」を押して戻ったあとの画面でもう一度 [保存] をします。こうしないと変更が反映されません。詳しくは編集画面下の注意書きを読んで下さい。

ソネブロのシェア ボタンを無効化する

そのままだとソネブロのシェア ボタンと Zenback プラグインのシェア ボタンが表示されてしまうのでソネブロのシェア ボタンをオフにします。「ブログの設定」に項目があるのでチェックを全部外しちゃいます。シェア ボタンが全てオフの場合はシェア ボタンのコンテナも出力されなくなるので先程の編集画面でシェア ボタンのコードを消す必要はありません。

Zenback のデザインをカスタマイズするには?

CSS でカスタマイズする場合は ブログパーツのid/class構造とcssについて - Zenbackブログ が参考になりそうです。Zenback プラグインが吐き出すスタイルに !important 指定があるので <style>〜</style> を記述したカスタムペインを記事ペインの後ろに追加してスタイルを上書きするといいかもしれません(まだやってないので憶測ですが)。

導入サンプル

今回の方法で設置した場合、タグから nice! ボタンの間に Zenback が表示されます。ソネブロのコンテンツ(コメント欄とか)を優先したい場合は位置を変更するか、カスタムペインで記事の後ろに配置してあげるといいかもしれません。

Twitter や Facebook でのレスポンスなら匿名拒否も出来てスパムも減るし、ソネブロのサーバーにも負荷がかからない。最近重い重いと言われるソネブロさん、Zenback プラグインを公式に取り入れてみては?

しばらく使って様子をみます(∩´∀`)∩

2012年03月05日:ソネブロのカスタムペインを使った導入方法を追加しました
ソネブロにZenbackプラグインを導入(カスタムペイン編)
2012年03月05日:Zenbackブログでソネブロの記事ペインへの導入方法のページを登録していただきました
ブログサービスごとにZenback設置方法をまとめました - Zenbackブログ

Trackback