今回のバージョンUPに伴った更新です。
結構ニーズある気がする、表示の早いソーシャルリンクの作り方です。
キャッシュを利用したSNSリンク
どうせコードが見たいでしょうからまずコード。
ただ、説明も読まないと自分のサイトに合わせられませんよ。
<?php
if ( false === ( $social_counts = get_transient( 'social_counts_' . get_the_ID() ) ) ) {
$url = get_permalink();
$org_timeout = ini_get('default_socket_timeout');
$timeout_second = 3;
ini_set('default_socket_timeout', $timeout_second);
$json = file_get_contents( 'http://api.sharedcount.com/?url=' . rawurlencode( $url ) );
$htebucount = @file_get_contents('http://api.b.st-hatena.com/entry.count?url='.rawurlencode($url));
ini_set('default_socket_timeout', $org_timeout);
$counts = json_decode( $json, true );
if(!isset($htebucount) || !$htebucount){
$htebucount = 0;
}
$social_counts = array(
$counts["Twitter"],
$counts["Facebook"]["share_count"],
$counts["GooglePlusOne"],
$htebucount,
);
set_transient( 'social_counts_' . get_the_ID(), $social_counts, 60 * 60 * 24 );
}
?>
<div class="social">
<ul>
<li>
<a href="Twitter" class="twitter" onclick="window.open('//twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
<span class="socialbox"><i class="fa fa-twitter"></i> Tweet</span><s></s>
<span class="scount">
<?php if(!isset($social_counts[0]) || !$social_counts[0]){
$social_counts[0] = 0;
} echo $social_counts[0]; ?>
</span></a>
</li>
<li>
<a href="Facebook" class="facebook" onclick="window.open('//www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
<span class="socialbox"><i class="fa fa-facebook-square"></i> share</span><s></s>
<span class="scount">
<?php if(!isset($social_counts[1]) || !$social_counts[1]){
$social_counts[1] = 0;
} echo $social_counts[1]; ?>
</span></a>
</li>
<li>
<a href="Google+" class="googleplus" onclick="window.open('//plus.google.com/share?url=<?php the_permalink(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
<span class="socialbox"><i class="fa fa-google-plus"></i> 共有</span><s></s>
<span class="scount">
<?php if(!isset($social_counts[2]) || !$social_counts[2]){
$social_counts[2] = 0;
} echo $social_counts[2]; ?>
</span></a>
</li>
<li>
<a href="Hatena" class="hatena" onclick="window.open('//b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
<span class="socialbox"><span class="hatenab">B!</span> Hatena</span><s></s>
<span class="scount">
<?php echo $social_counts[3]; ?>
</span></a>
</li>
</ul>
</div>
とこんな感じです。
カウントは
Sharedcount>>リンク
のapiを使っています。Sharedcountは神様のような存在ですね。
Sharedcountにはてブは無いので、はてブのみ本家APIから取得します。
それを配列にするのが上のほう。
で、httpリクエストがプログラムの進行を長時間止められるといけないので、タイムアウト時間を設定。上では3秒。
そしてそのデータをデータベースにキャッシュします。上のコードでは24時間キャッシュです。
一番上のif文では、キャッシュがあればそっちのデータを拾います。
リアルタイム反映が良い人はキャッシュを使わないのが良い。
でも、毎回毎回httpリクエストを繰り返すので、表示は遅れますよ。
あとは配列したカウントを配置します。
ついでに上のコードでは、
Font Awesome>>リンク
のアイコンを使っています。これも軽量にする手段です。
webフォントが嫌いな人には向きませんし、古いブラウザまで考慮するなら画像のが良いかもだけど、僕は古いIEに対応させるくらいなら、対応させず安いタブレットでも購入してもらうようにしたほうがユーザーにとっても、製作側にとっても良いと思うよ。
で、カウントを配置する際に、タイムアウトでデータが取得出来なかった時は0を表示しておくようにセットしてます。
はてブは上のif文ですでにせっと済みなので配置の時は何もしてません。
当テーマでは専用phpファイルを作ってテンプレート化しています。必要な箇所に書いても動くはず。
関数にするのも良いかもですね。
あとはOPGタグも設置しないと、フェイスブックやググタスでは良い表示にならないかもよ。
余談ですが、リアルタイムじゃないのが不満な人もいるかも知れないけど、リアルタイムでカウントを動かす為に表示速度を遅らせるのと、カウントはリアルタイムじゃなくても表示が速いの、どっちがユーザーにとって良いか考えれば、僕なら迷わず表示速度を選びますね。SNSなんて所詮SNSですからカウントが1日後でも別に良くない？。
ではでは
追記 修正版を書きました。
コチラ＞＞