Octopress に Pocket ボタンを追加する

  • 11
    Like
  • 0
    Comment
More than 1 year has passed since last update.

私は Pocket をかなり使い倒してます。何か興味深いページがあれば、「Pocketに追加する」で Pcket に保存しておき、後で読み返しながら興味深ければ Twitter でツイートして、後で使いそうな知識であれば Evernote に保存してお>きタグで整理しています。

さて、役に立つかどうかはわかりませんが、私の Github pages にも「Pocket に追加する」ようなボタンを追加したいと思います。

Pocket ボタンのコードを取得する

Pocket for Publishers: Pocket Buttonにクセスして、Pocket ボタンのコードを取得します。スタイルはお好みで選んでください。

_config.yml に設定を追加する

せっかくなので、設定で Pocket ボタンをオン/オフできるようにしてみます。

_config.yml の末尾に pocket_putton という属性を追加します。git diff を取った
ものが以下のコードです。

_config.yml
@@ -93,3 +93,6 @@

 # Facebook Like
 facebook_like: true
+
+# Pocket
+pocket_button: true

shareing.html を修正する

source/_includes/post/sharing.html に先ほどのコードを貼り付けます。Pocket はなる
べく早く押せたほうがいいので、ソーシャルボタンの先頭になるようにします。貼り付け
たままだとインデントが気になるので、私は Vim 上から :setlocal expandtab ts=2 sts=2 sw=2 とコマンドを入力して、g=G でインデントを修正しました。

横幅が長くなりますが git diff を取った結果は以下の通りになります。

source/_includes/post/sharing.html
@@ -1,4 +1,8 @@
 <div class="sharing">
+  {% if site.pocket_button %}
+  <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
+  <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>
+  {% endif %}
   {% if site.twitter_tweet_button %}
   <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
   {% endif %}

参考サイト