pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法

2014/10/03 2014/11/02

週3でペペロンチーノを食べてるキャリコ（ @calicocatxyz ）です。

正式名称はアーリオ・オリオ・ペペロンチーノ。イタリアの家庭で頻繁に食べられる料理で材料と作業工程の少ないシンプルな料理だから、素材の質と調理する人の技量が味に直結する料理ということで… なんだか STINGER5 のカスタマイズにも似てますね♪さて、本日は pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法です。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

今回は SNS ボタンに pocket を追加したから、ブックマーク数の取得と新たにボタンを作って設置したにゃ。

試行錯誤ライフハック
[試] Pocketブックマーク数（ある意味シェア数）の取得方法 | Pocket公式APIないけどどうする？

これから紹介する方法はこちらの記事を参考にしたにゃ。ただし、ブックマーク数の取得方法は pocket の公式というわけではないから注意するにゃ。

Ads by Google

pocket の公式ボタンを設置する

pocket のパブリッシャーズページにアクセスする

pocket
http://getpocket.com/publisher/button

設置したいボタンを選ぶ

設置したいボタンを選んでコードを貼るだけにゃ！簡単♪ただ… キャリコではオリジナルのアイコンを設置してるから、それに合わせた方法で pocket ボタンを導入したにゃ。

pocket のブックマーク数を取得する

functions.php に追記する

function get_pocket_count($url) {
	$query = 'http://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=' . $url;
	$html = file_get_contents($query);
	$dom = new DOMDocument('1.0', 'UTF-8');
	$dom->preserveWhiteSpace = false;
	$dom->loadHTML($html);
	$xpath = new DOMXPath($dom);
	$result = $xpath->query('//em[@id = "cnt"]')->item(0);
	return isset($result->nodeValue) ? intval($result->nodeValue) : 0;
}

function get_pocket_count($url) {

$query = 'http://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=' . $url;

$html = file_get_contents($query);

$dom = new DOMDocument('1.0', 'UTF-8');

$dom->preserveWhiteSpace = false;

$dom->loadHTML($html);

$xpath = new DOMXPath($dom);

$result = $xpath->query('//em[@id = "cnt"]')->item(0);

return isset($result->nodeValue) ? intval($result->nodeValue) : 0;

}

参考にしたサイトのコードを丸々コピペするだけにゃ。このコードではじき出されたブックマーク数は次のコードで表示させることが出来るにゃ。

<?php echo get_pocket_count(get_permalink($post->ID)); ?>

1	<?php echo get_pocket_count(get_permalink($post->ID)); ?>

SNS ボタンを設置する

オリジナルボタンを自作する

前に設置した SNS ボタンと同じように pocket のボタンを自作したにゃ。設置してある SNS ボタンについてはこのエントリーに目を通すといいにゃ。

キャリコ
これでスッキリ！SNS ボタンのデザインをコピペだけで綺麗に統一する方法
これでスッキリ！コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

今回はこのエントリーのコードに追記する形で pocket ボタンを設置したにゃ。

今使ってる画像に…

同じサイズで pocket ボタンを作成したにゃ。

出来上がりがこの画像にゃ。

コードに追記する

CSS に追記する

.pocket { background-position: 0 -100px; }

1	.pocket { background-position: 0 -100px; }

sns.php に追記する

<li><span class="sns-count"><?php echo get_pocket_count(get_permalink($post->ID)); ?></span><a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' target="_blank""><span class="sns-icon pocket">pocket</span></a></li>

1	<li><span class="sns-count"><?php echo get_pocket_count(get_permalink($post->ID)); ?></span><a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' target="_blank""><span class="sns-icon pocket">pocket</span></a></li>

sns-top.php に追記する

<li><span class="sns-count"><?php echo get_pocket_count(get_permalink($post->ID)); ?></span><a href='http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>' target="_blank""><span class="sns-icon pocket">pocket</span></a></li>

1	<li><span class="sns-count"><?php echo get_pocket_count(get_permalink($post->ID)); ?></span><a href='http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>' target="_blank""><span class="sns-icon pocket">pocket</span></a></li>