[Blogger]記事下にZenbackを導入する方法_ポイントはエンコード

Zenbackとは

---

ブログのウィジェットです。SNSボタンはもちろん、記事に対するSNSでのコメントまで表示されます。詳しくは下記リンクを参照してください。

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

以前当ブログで紹介した「忍者おまとめボタン」の機能を含んだウィジェットですので、うまく貼りつけられれば、こちらに移行しようと思います。

[Blogger]トップページの記事下にソーシャルボタンを追加する方法 - 初心者からのBloggerカスタマイズ





Zenbackの導入方法概要

---

方法は他のウィジェットと同様です。Zenbackでユーザー登録を行い、コードを取得し、テンプレートに貼り付けるだけです。

対象のコードの探し方や、書き換える際の注意は下記記事の「コードをテンプレートに追加する」あたりを参照ください。

初心者からのBloggerカスタマイズ: [Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

Adsenseのコードを貼り付けた記事でもあったように、Bloggerでは外部で取得したコードをそのままテンプレートに貼り付けてもエラーが発生します。

そのためには事前にエンコードを行う必要があります。今回はこのエンコードがポイントでした。





Zenbackのコードをエンコードする

---

では実際にコードを取得するところから始めます。Zenbackで取得できるコードはこれです。

<!-- 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//mnt02.blogspot.jp/&nsid=119505468925193949%3A%3A119515572835722946&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");</script><!-- X:E ZenBackWidget -->

これを貼り付ける前にAdsenseのコードのように秀丸でエンコードします。下記記事も参考にしてください。

[Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法 - 初心者からのBloggerカスタマイズ


コード変換はAdsenseで行った以下に加えて、&→&amp;が必要のようです。

< → &lt;
> → &gt;
" →　&quot;

ちなみに３つの変換後にさらに&が含まれていますので、&→&amp;を行ってから上の３つの変換を行うと上手く行きました。順番を逆にした場合は試していません。

上記コードをエンコードするとこんな感じになります。

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

テンプレートにコードを貼り付ける

---

記事下で忍者おまとめボタンの下に貼り付けたいので、2番目と3番目のdata:post.bodyの下で忍者おまとめボタンのコードの下に挿入します。

プレビューではこのような表示になりますが、これでＯＫです。

結果として、このように記事下で忍者おまとめボタンの下に上手く表示されました。

デザインの変更はZenbackの管理画面でカスタマイズが可能です。


この記事を書くのに下記サイトを参考にしました。


BloggerにZenbackをエラーなく導入する方法 | 某氏の猫空

http://mnt02.blogspot.com/2014/02/bloggerzenback.html[Blogger]記事下にZenbackを導入する方法_ポイントはエンコード