はじめに
わかってしまえばなんてことないのですが、やってみたら以外とはまってしまいました。
現在はこんな感じで表示されているかと思います。
これ、普通にBloggerのウィジェットとしてHTML/Javascriptで登録するなら簡単だったのですが、僕は、Shareitを使っているので、どうしてもその横または下に表示したかったのです。
コードを設置する方法
こちらにアクセスしてコードを取得します。
Pocket for Publishers: Pocket Button
data-lang="en"ですがそのままでダイジョブです。
コードを取得したら、Bloggerの管理画面から、「post-footer」を探します。
設置したい場所がウィジェットの中でなければそのまま貼り付けます。
以上で終わりです。
何に苦労したのか
僕はShareThisは、ウィジェットで登録しました。
ShareThis - Share Buttons, Share Plugin, Share Analytics, Media Solutions
これだけでちゃんとフッターの位置に共有ボタンが入るのですが、このウィジェットがHTML編集上でみると、
これだけになっていて、新たにpocketをどこに設置したらよいのか、さっぱりわからないのです。
で、pocketを新しいウィジェットとして登録してしまうと、ShareThisとの配置がどうしても崩れてしまい、ほとほと困りました。
なので、ウィジェットは無視して、
<b:includable id='post' var='post'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket'/>
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
こんな感じで書いてしまうと、解決しました。
最後に
こういうボタンが簡単に設置出来てしまうというのは、本当に便利です。
個人的には、誰かのブログでボタンを押すことが少ないので、設置したところでどうなのかな？
と思っていたのですが、意外とやっていただける時はやっていただけるようで、そういう方のためにも、共有ボタンなどは設置しておいたほうが良いのですね。
以上です。
