Zenback非同期コードをBloggerブログに貼る方法

平均20%+高速化！​Zenbackのスク​リプトコードが新しく​なりました。

とのメールタイトルで本日夕刻に、
メールを受信していました。

変わった内容としましては、

■ 変わったポイント
・もっと素早く　ページ読込完了速度向上
・もっと優しく　非同期読み込みに対応

他にユーザの実測値など、

以下内容のようなものがZenbackブログには掲載されています。

■ 20%以上の速度向上？
 弊社での調査でも平均27%以上の速度UPが見られました。
ユーザ様がご検証いただいたデータでも28.2%、25.7%、20.9％と
軒並み動作速度が向上したとのご連絡を頂いています。
 皆さまのお手元でも簡単にビフォーアフターの速度検証できますので、
ぜひお試しください。
そしてソーシャルなどでご報告いただけましたら、弊社ブログでも
 ご紹介させていただきたいです！
コードの差し替え、動作速度検証について詳しくは、こちらの記事をご参照ください。
> 平均20%+高速化！Zenbackのスクリプトコードが新しくなりました
> http://blog.zenback.jp/2013/11/20zenback-0a1e.html

はてさて、
それならばと、

私もサイト表示速度は気にしていた方なので、

早速、
Zenbackサイトにて非同期コードを入手しまして、
Bloggerブログの記事直下に今まで通り挿入…。

以下に非同期コード全容を記載します。

<!-- X:S ZenBackWidget --><div id="zenback-widget-loader"></div><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var r=Math.ceil((new Date()*1)*Math.random());var j=d.createElement("script");j.id=i;j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");</script><!-- X:E ZenBackWidget -->

うまくいくはずもなく…。

以前に記載した記事で、
≫zenbackコードを記事下に綺麗に貼る方法

というのがあります。

そこで、
また、コード内に

// <![CDATA[
// ]]>

をどこかに挿入してあげなければなりません。

それがどこかというのは、

以前とほとんど変わらずの位置です。

上記がZenbackより提供された元々の非同期コードです。

しかし、
これをそのまま記事内に挿入するだけでは、

Bloggerブログからエラーを吐かれて、プレビュー・保存すらできません。

なので、

以下の様に
// <![CDATA[
// ]]>

を追加します。

<!-- X:S ZenBackWidget -->
<div id="zenback-widget-loader"></div>
<script type="text/javascript">// <![CDATA[
!function(d,i){if(!d.getElementById(i)){var r=Math.ceil((new Date()*1)*Math.random());var j=d.createElement("script");j.id=i;j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");// ]]>
</script><!-- X:E ZenBackWidget -->

• ３行目の最後に// <![CDATA[
• ４行目の最後に// ]]>

を追加します。

すると、

以前のようにBloggerブログさんに怒られることもなく、

プレビューもできるし保存も可能となります。

そして、

サイト表示速度はいかに…！！

ということですが、
今のところ私は測定していません。

若干、
サイトが表示される時にチラチラするかなという感じがしました。
（すぐに元に戻りますが…。）

他のユーザの方々の検証結果が、

Zenbackブログに掲載されているようなので、
紹介しておきます。

平均20%+高速化！Zenbackのスクリプトコードが新しくなりました - Zenback ブログ

なお、

2013年11月7日16時以降にZenback管理画面から入手したコードは、

全て新しいコード（非同期コード）に、
切り替わっているとの事です。

ただ…、

同じBloggerブログでも記事内（記事下）にZenback表示されているのに、

コードの追加していなくても普通に表示されているBloggerブログもあったりする…。
テンプレートが違うからなのかな・・・。

Bloggerブログで記事内に表示したいけれど、

Zenbackコードが以前と変わって（非同期コード）使いたいけれど、
記事内に挿入するとエラーを吐かれる。

という方は、
試してみてください。