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

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

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

Pocket-icon

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

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

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

    <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>

すると、ほれ!
SNS_buttons_w_pocket

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

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

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

	<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>

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

SocialMetrics_w_pocket

んー、いいんじゃない?

おしまい。


Leave your comment

papaya

This is blog what is the inside of Papaya. Hum... nobody wants that, neither do I, maybe. I think with or without my empty brain and sometimes write down here.