最近話題のブックマークサービス「Pocket」ですが使っていますか?

情報操作と「はてなブックマーク」 ~はてブはPocketと連携した方が伸びると思うのに
Read It Laterの頃から使っていますが,すっかり普及しブログのソーシャルボタンに現れることも多くなりましたね.
このブログ「みずかるちゃー」にも設置していますが,デフォルトのStinger3にはつけていないので自己カスタムしてみました.
「あえて」つけてないんですよ。拡散しないので。自己カスタムでお願いします^^ “@daimech: はてブはPocketと連携した方が伸びると思うのに http://t.co/n0lVyQekFD もしかしてStingerにもPocketボタンがつく日が来るのかしら。”
— ENJI (@ENJILOG) October 22, 2013
Pocketボタンの設置
コード
貼付けるコードはこれです↓
[html] <a href="https://getpocket.com/save"class="pocket-btn"
data-lang="en"
data-save-url="<?php get_permalink(); ?>"
data-pocket-count="vertical"
data-pocket-align="left" >Pocket</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>
[/html]
変更点はないのでこのまま貼付けてください.
貼付け場所
標準状態だと貼付け場所は2箇所あります.
・sns.php(本文下のsnsボタン)
・footer.php(左下で追従するsnsボタン)
どちらもソーシャルボタンは4つまでに抑えないとスマホで表示したとき崩れてしまうので,既存のソーシャルボタン1つを置き換えします.
自分の場合利用率の低いGoogle+と置き換えしました.
こんな感じ.
修正方法は置き換えしたいsnsボタンのコードを消し,そこにPocketのコードを貼付けます.
<li>ここに貼る!</li>
例(Google+と置き換えした場合)
[html] <div class="sns"><ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mizuka123" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo(‘name’); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li>
<a href="https://getpocket.com/save"
class="pocket-btn"
data-lang="en"
data-save-url="<?php get_permalink(); ?>"
data-pocket-count="vertical"
data-pocket-align="left" >Pocket</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>
</li>
</ul>
</div>
[/html]
編集後記
以上簡単ですが手順になります.
一応ですが作業前はバックアップを取っておきましょう.
Pocketは意外と使っている人がいるみたいで,貼ってみるとどういう記事がPocketされやすいかわかっておもしろいですね.
有名度ではまだまだはてブには叶いませんが,使い勝手はPocketのほうが上だと思います.
シンプルですしね.
Stingerの場合スマホ版の横幅の関係で既存のSNSボタンと置き換えなのが結構悩みどころかもしれません.
両方変えてしまうのはなぁ・・・と思う場合は片方のボタンだけ置き換えしてみるのもいいですね.
例:追従ボタンはPocket,記事下はGoogle+
数字がカウントアップするのは記事を書くモチベーションにもつながるので,設置してみることでこれまでわからなかったモチベーションを得られるかもしれませんね.
まっ,自分がPocketに送るときはボタンではなくてChrome拡張やブックマークレットでやってしまうんですけどねw