KIYOS LOG

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

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

　参考にしたというか、ほぼそのままコピペ（笑）。

/**
 * 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>
    ';
}

最後の出力順を替えているだけです。
　ほぼ引用ですね…。パクリとも言うけど…。

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

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

/* 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;
}

これを、style.css等にコピペ。
　Webフォントは各自のサーバにアップロードしてから、お使いください。
　”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

　そして、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;
}

こんな感じです。

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

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

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

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

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

関連記事

• シェアボタンをオリジナルにしてみた
• WordPressとの各種連携等
• TwitterとFacebookの連携
• TwitterとFacebookとmixi
• Twitter Digest & brBrbrの変更