2013年7月4日木曜日

Pocketボタンを追加しました

今日から、このブログにPocketボタンを追加しました。
せっかくなんで、bloggerにPocketボタンを追加した作業メモとしてブログにしてみます。

■追加の仕方

やり方はとっても簡単。

Pocketボタンをするには
管理画面から「テンプレート」→「テンプレートを編集」を選んで、
挿入したい位置にこの2行のコードを貼り付けるだけです。

<a class='pocket-btn' data-lang='ja' data-pocket-align='left' data-pocket-count='vertical' expr:data-save-url='data:post.url' href='https://getpocket.com/save'>Pocket</a>
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>

※編集は自己責任でお願いいたします!
 少なくとも、いじる前にバックアップをとることは必須です。


■解説

公式ページのコードジェネレーターからタグを取得できますが、
これでは各詳細ページ別(記事ごと)のURLをクリップすることができません。。
そこで、ここの2番目のコードを参考にします。
記事によると、2行目をblogger用に調整する必要があります。
調整の方法は下記の通りです。

---
調整前 data-save-url="{Permalink}"
調整後 expr:data-save-url='data:post.url'
---

expr:     → blogger独自の変数を使用しますよ。というおまじない。
data:post.url → これがblogger独自の変数で、各記事ごとのURLを表します。

twitterやfacebookのボタンも、
これらのおまじないを応用すれば、bloggerに貼り付けることが可能です。