Tortoise-like pace

toshibohjp

Octopress に「Pocket」に追加するボタンをつける

| Comments

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

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

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

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

_config.yml に設定を追加する

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

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

_config.yml
1
2
3
4
5
6
7

@@ -93,3 +93,6 @@ 

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

コピー＆ペースト用のコードも添付しておきます。

_config.yml
1
2

# Pocket
pocket_button: true

shareing.html を修正する

source/includes/post/sharing.html に先ほどのコードを貼り付けます。加えて、先ほど config.yml に設定した属性でボタンの表示をするかどうかのテストを行うように ’... で囲みます。

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

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

source/_includes/post/sharing.html
1
2
3
4
5
6
7
8
9

@@ -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 %}

コピー＆ペースト用のコードも添付しておきます。

source/_includes/post/sharing.html
1
2
3
4

  {% 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 %}

参考サイト

Comments