SNSカウント数を取得してみた

　ここに表示されている、各SNSのカウント数を取得してみた。
　各SNS公式のボタンでも良いんだけど、なんか収まりが良くないのでオリジナルにしてみたかったんだよね。

　参考にしたのは、Transients APIを使って各ソーシャルのカウント数をWordPressデータベース内に一時保存&表示するのよ！このページ。

　参考にしたというか、ほぼそのままコピペ（笑）。
[php title=”functions.phpにコピペ”]
/**
* SharedCount を使ってソーシャルのカウントを取得
* Transientで保存。
*
* 出力例（ループ内がいいよ）: <?php social_counts(); ?>
*/
function social_counts() {
ini_set( "display_errors", "Off");
// Transient データを取得
if ( false === ( $social_counts = get_transient( ‘social_counts_’ . get_the_ID() ) ) ) {
// Transient が存在しない場合、コード実行
$url = get_permalink();
$json = file_get_contents( ‘http://api.sharedcount.com/?url=’ . rawurlencode( $url ) );
$counts = json_decode( $json, true );

// 配列にカウント格納
$social_counts = array(
$counts["Twitter"],
$counts["Facebook"]["total_count"],
$counts["GooglePlusOne"],
);
/*
* Transient の値を設定。
*
* キャッシュデータのユニークIDは「 social_counts_(投稿IDの数字) 」
* 先頭に _transient_ が自動付加される。
*/
set_transient( ‘social_counts_’ . get_the_ID(), $social_counts, 60 * 60 * 4 ); //=4時間 重いと思ったら増やせばいいよ
}

// $social_counts 出力
echo ‘
<p class="sns">
<span class="fb">’ . $social_counts[1] . ‘</span>
<span class="tw">’ . $social_counts[0] . ‘</span>
<span class="gp">’ . $social_counts[2] . ‘</span>
</p>
‘;
}
[/php]
最後の出力順を替えているだけです。
　ほぼ引用ですね…。パクリとも言うけど…。

　CSSは、こんな感じで、WebフォントLigature kudakurage Symbolsを使用してます。

　こちらにも記載されてますが、念の為にもう一度、記載。

[css titele=”WebフォントのCSS”]
/* LigatureSymbols */
@font-face {
font-family: ‘LigatureSymbols’;
src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot’);
src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot?#iefix’) format(‘embedded-opentype’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.woff’) format(‘woff’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.ttf’) format(‘truetype’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.svg#LigatureSymbols’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/css]
これを、style.css等にコピペ。
　Webフォントは各自のサーバにアップロードしてから、お使いください。
　”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

　そして、SNSアイコンの方は…
[css titele=”SNSカウント”]
/* SNSカウント */
.tw {
font-size:110%;
vertical-align: top !important;
padding-right: 0em;
}
.fb {
font-size:110%;
vertical-align: top !important;
padding-right: 0em;
}
.gp {
font-size:110%;
vertical-align: top !important;
padding-right: 0em;
}
.mi {
font-size:110%;
vertical-align: top !important;
padding-right: 0em;
}
.tw:before{
font-family:’LigatureSymbols’;
font-size:140%;
content:’\E12f’;
padding-right:0.5em;
padding-left:0.5em;
color:#00acee !important;
vertical-align: top !important;
}
.fb:before{
font-family:’LigatureSymbols’;
font-size:140%;
content:’\E047′;
padding-right:0.5em;
padding-left:0em;
color: #3b5998 !important;
vertical-align: top !important;
}
.gp:before{
font-family:’LigatureSymbols’;
font-size:140%;
content:’\E05a’;
padding-right:0.5em;
padding-left:0.5em;
color:#DD4B39 !important;
vertical-align: top !important;
}
.mi:before{
font-family:’LigatureSymbols’;
font-size:140%;
content:’\E090′;
padding-right:0.5em;
padding-left:0.5em;
color:#d1ad59 !important;
vertical-align: top !important;
}
[/css]
こんな感じです。

　mixiのカウントも表示させたいんだけど、上手い事行かないんでCSSだけ設定してます（笑）。

　そのうち、良い感じなのが見つかると良いなぁ〜。

　公式APIではなくキャッシュみたいに一時保存しているので、リアルタイムに変化しないのが、ちょっと物足りない。

　その分、表示が軽くなってれば良いのだけど…。

【参考】
Transients APIを使って各ソーシャルのカウント数をWordPressデータベース内に一時保存&表示するのよ！
Ligature kudakurage Symbols