WordPress に Pocket (Formerly Read It Later) を組み込んでみた

この記事で見たのですが、皆さん結構 pocket って使われているんですね。
自分はこの手の「あとで読む」系あるいはブックマーク系は、あまりまとまりがなく Evernote や Delicious、はてブなんかをバラバラに使っています。

いずれにしても、pocket の需要があるということは、我がサイトにも導入せねばということで入れてみました。

pocket のボタンはここで作れます。
作ったボタンを好きなところに貼っていくだけ。

まず、ソーシャルボタンの並びから。
当サイトの場合、基本 AddThis でボタンを作っているので、そこに入れてあげれば OK!

テーマファイルの single.php をゴニョゴニョして、こんな感じ↓

[php highlight=”5,6″]
<div style="width: 85px;">
<a class="addthis_button_linkedin_counter" li:counter="top"></a>
</div>
<div style="width: 85px;">
<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>
</div>
<div style="width: 85px;">
<a class="addthis_counter"></a>
</div>
[/php]

すると、ほれ！

なんかずいぶんボタン増えたな wwwwww

あと必要なのは Social Metrics。
これについては以前書いた記事『WordPress プラグイン Social Metrics に “はてなブックマーク” を追加した』があるので、それを参考に。

“Digg” は使わないから消しちゃえ。
こんな感じかな↓

[php highlight=”9,21,33″]
<table class="widefat post fixed smtable" cellspacing="0">
<thead>
<tr>
<th scope="col" id="title0" class="manage-column column-title" >Title</th>
<th scope="col" id="title1" class="manage-column column-title" >Twitter</th>
<th scope="col" id="title2" class="manage-column column-title" >Facebook</th>
<th scope="col" id="title3" class="manage-column column-title" >Google +1</th>
<th scope="col" id="title4" class="manage-column column-title" >Hatena</th>
<th scope="col" id="title5" class="manage-column column-title" >pocket</th>
<th scope="col" id="title6" class="manage-column column-title" >LinkedIn</th>
</tr>
</thead>
<tbody>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<tr>
<td ><a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></td>
<td ><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="horizontal" data-url="<?php the_permalink() ?>">Tweet</a></td>
<td ><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></td>
<td ><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></td>
<td ><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" 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></td>
<td ><a data-pocket-label="pocket" data-pocket-count="horizontal" 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></td>
<td ><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script></td>
</tr>
<?php endwhile; ?>
</tbody>
<tfoot>
<tr>
<th scope="col" class="manage-column column-title" >Title</th>
<th scope="col" class="manage-column column-title" >Twitter</th>
<th scope="col" class="manage-column column-title" >Facebook</th>
<th scope="col" class="manage-column column-title" >Google +1</th>
<th scope="col" class="manage-column column-title" >Hatena</th>
<th scope="col" class="manage-column column-title" >pocket</th>
<th scope="col" class="manage-column column-title" >LinkedIn</th>
</tr>
</tfoot>

</table>
[/php]

すると、こんな感じになります↓

んー、いいんじゃない？

おしまい。

Pocket
Read It Later, Inc
価格： 0円

posted with sticky on 2014.11.9