Octopress

Octopress に Pocket ボタンを追加する

More than 5 years have 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 %}


参考サイト