2011-02-26

ソーシャル系ボタンをBloggerに導入(zenback編)

昨年あたりから、各社のソーシャル系リアクションボタンが乱発されだして、いちいちブログに導入していくのは面倒くさいという方に朗報です。

先日、zenbackというサービスを知りました。
シックス・アパートが運営しているんですね。
http://zenback.jp/

zenbackは各社のソーシャル系リアクションボタンがモジュールひとつにまとめられているというもので、zenbackに登録すると発行されるScriptコードを、ブログのテンプレートにペコッと1度貼りつけるだけで簡単に有名どころのサービスのリアクションボタンを付け加えることが出来るという代物です。

現在(2011/02/26)は、twitter、はてなブックマーク、mixiチェック、Facebookいいね、Evernoteサイトメモリーを導入できます。これらのソーシャルボタンのほかに、関連記事、関連リンク、関連キーワード、Twitterでの発言、はてなブックマークでのコメントを表示することが出来ます。

▼こんな感じで見えます
http://blog.japps.jp/2011/02/amazon_26.html

さて、本題。
ペコッと1度貼り付けるだけと先ほど言ってしまったのですが、自分が独自ドメインのホスティング先として利用しているBlogger(Googleのブログサービス)を利用した場合、zenbackのScriptコードをペコッと貼りつけるだけでは終わらなかったので、今後困った人のために(&自分が忘れたときのために)記録として残しておきます。


【1】zenbackのScriptコードを発行します
<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?
(中略)
+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->

【2】1で発行したZenbackのScriptコードに追加
BloggerのテンプレートはXHTMLなので、CDATAを書きます。単一記事のページのみ表示したい場合はif文も追加。
<b:if cond='data:blog.pageType == "item"'> 
<!-- X:S ZenBackWidget -->
<script type="text/javascript">
// <![CDATA[ 
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?
(中略)
+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script>
<!-- X:E ZenBackWidget -->
</b:if>

【3】Bloggerのデザインテンプレートの編集画面へ
管理画面にて「デザイン」→「HTMLの編集」を開いて、「ウィジェットのテンプレートを展開」にチェックを入れて、ソースをいじっていきます。

【4】デザインテンプレートに反映
Ctrl+Fでページ内検索をして、「data:post.body」の箇所を見つけてください。
下記のように、追記したZenbackのScriptコードを挿入します。
<data:post.body/>
この間に、追記したZenbackのScriptコードを貼り付けます
<!-- clear for photos floats -->

変更を加えた上で、テンプレートを保存してください。
ソーシャル系ボタンの表示に関しては、これで完了です。

自分の場合は、下記のブログに大いに助けられました。ソーシャル系のボタン表示以外のことで、関連記事の精度をより高める方法なども記載されていますのでぜひご参考になさってください。
http://romberg-iso8.blogspot.com/2010/07/bloggerzenback_20.html

ブログに反映させてみた印象は、個人的にはまあ悪くないという感想なのですが、関連リンクと関連キーワードは必須でモジュールについてくるので、それが嫌だという人は無理かもしれないです。シックス・アパート側としては、ここからのキーワードページなどへの流入を見込んだビジネスモデルになってるっぽいので、この折り合いは厳しいところでしょうが。

サービスの総評としてはおしい。
でもサボりたい自分はしばらく導入しておくんだろうなと思います。

6 件のコメント:

John さんのコメント...

hermes bags
canada goose jackets
sac louis vuitton
red bottom
discount oakley sunglasses
michael kors
coach factory outlet online
cheap nike sneakers
fitflops sale
cheap rolex watches
2017209yuanyuan

dong dong23 さんのコメント...

nike free run
christian louboutin sale
reebok shoes
coach factory outlet
vans shoes
polo ralph lauren
michael kors outlet
michael kors bags
michael kors outlet online
ray ban sunglasses
20173.1wengdongdong

chenmeinv0 さんのコメント...

giuseppe zanotti
rolex watches
beats by dre
calvin klein
abercrombie & fitch
michael kors canada
basketball shoes
chelsea jersey
uggs outlet
timberland boots
20174.10chenjinyan

jeje さんのコメント...

Pour plus de détails sur Jordan 7 Significant Sneakers, assurez-vous air jordan future achat de prendre contact avec nous. Sur le côté négatif, l'Optimus est vraiment un petit peu encombrant dans la mesure et ne va pas se sentir aussi stable que d'autres personnes sur cette liste, perdre le coupe-guillotine peut aussi être un problème qui compromet l'apparence et la sensation, attention à aide à garder ce briquet en un seul morceau. Nike Shox Qualifier une autre société de sneaker célèbre. Cela devrait contenir leur tacle aussi parce que les parties de leurs achats. Aucun cowboy n'est complet sans un. Avec une lame à double air jordan pour femme noir et rose tranchant de 7 , il était utile pour pousser et couper.

Coqicoqi さんのコメント...

Pandora Official Site
Kyrie Irving Shoes
Pandora Charms
Red Bottom Shoes
Jordans 11
Air Jordan 9
Kyrie Shoes
Red Bottom Shoes
Jordan Retro
Pandora Outlet
Ryan20181225

Coqicoqi さんのコメント...

Yeezy boost 350 v2
Jordan 11
Jordan 9
Air Jordan
Pandora Charms Outlet
Pandora Outlet
Pandora Jewelry
Jordan Retro 11
Yeezy boost 350 v2
Air Max 270
Ryan20190209