キャリコおすすめ

本日の人気記事

まだデータがありません。

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>

以上で終了にゃ。

まとめ

今回はコピペするだけで簡単に pocket ボタンの設置が出来たにゃ。これならいくら SNS ボタンが増えても楽勝にゃー！

今日はここまで、じゃあにゃ～

ライター紹介

ラテ　Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

- ウェブサービス Web 関連, カスタマイズ

この記事が気に入ったら
いいね！しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう！

Follow @calicocatxyz

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

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

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

設置したいボタンを選ぶ

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

functions.php に追記する

SNS ボタンを設置する

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

コードに追記する

CSS に追記する

sns.php に追記する

sns-top.php に追記する

まとめ

おすすめ記事

関連記事

Google+ ページを作って Google+ バッジを設置しよう

これでもアクセスが増えなかったらもう諦めよう！

忍者 AdMax の年間平均クリック単価は62円？！

これは便利！Retina で拡大・縮小しても美しいまま表示される魔法のアイコン

Googleがマテリアルデザイン化された750個のアイコンを配布

軽いブラウザを比較した、おすすめの使い分け方法とは？

【保存版】フリー写真素材サイト超絶まとめ61選

アクセスアップには Twitter を極めるのが近道な理由

コピペで OK！バイラルメディア風オリジナル SNS ボタンの設置方法

なければ作ればいい！アイコン型ウェブフォントが自作できる IcoMoon

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

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

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

設置したいボタンを選ぶ

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

functions.php に追記する

SNS ボタンを設置する

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

コードに追記する

CSS に追記する

sns.php に追記する

sns-top.php に追記する

まとめ

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(*ΦωΦ*)

おすすめ記事

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(*ΦωΦ*)

【キ】 アドセンス用336px

【キ】 アドセンス用336px

関連記事

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

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(ΦωΦ)

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(ΦωΦ)

【キ】　アドセンス用336px

【キ】　アドセンス用336px