Twitter、Facebook、Google+、はてなブックマーク、FeedlyのSNSボタン設置とカウント数を表示

ブログの独自性のためにSNSボタンをカスタマイズ

WordPressでブログを運営してたら独自性を持たすためにいろいろカスタマイズしたくなるのはみんな同じ思いだと思います。

僕もこれまでにいろいろいじりながら当ブログをカスタマイズしてきました。

SNSのボタンはそのブログの特徴を表すといっても過言では無いと思います。

ようやく当ブログのSNSボタンも形が固まってきたので、設定方法を忘れないためにも今回の投稿で記録しておきます。

SNSボタンを作るときに一番難しいのはどれだけシェアされているかを表す数値の部分だと思います。

シェア数を取得するためにSNS Count Cacheというプラグインもあって、SNS Count CacheはローカルにSNSカウント数をキャッシュさせて表示させるので処理は軽くて便利だったのですが、カウント数がうまく取得できないこともあったので、別の方法を探しました。

そこで、こちらのサイトにすごく便利そうなプログラムの方法があったので参考にさせてもらいました。
Twitter、Facebook、Google+、はてブのソーシャルカウント数をWordPressで直接取得する関数まとめ

まずはテンプレート化する

まずはそれぞれのSNSのカウント数をテンプレートにして関数として使えるようにします。

function.phpに以下の内容を貼り付けます。

//ツイート数の取得
function get_twitter_tweet_count($url){
  //JSONデータを取得
  $json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.rawurlencode($url));
  //JSONデータを連想配列に直す
  $array = json_decode($json,true);
  //データが存在しない場合は0扱いにする
  if(!isset($array['count'])){
    $count = 0;
  }else{
    $count = $array['count'];
  }
  //カウントを出力
  return $count;
}
 
//いいね!数の取得
function get_facebook_like_count($url){
  //JSONデータを取得
  $json = @file_get_contents('http://graph.facebook.com/?id='.rawurlencode($url));
  //JSONデータを連想配列に直す
  $array = json_decode($json,true);
  //データが存在しない場合は0扱いにする
  if(!isset($array['shares'])){
    $count = 0;
  }else{
    $count = $array['shares'];
  }
  //カウントを出力
  return $count;
}
 
//Google+1の取得
function get_google_plus_one_count($url){
  //GETリクエストでURLを指定する場合
  if(isset($_GET['url'])) $url = $_GET['url'];
  //CURLを利用してJSONデータを取得
  $ch = curl_init();
  curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" );
  curl_setopt( $ch, CURLOPT_POST, 1 );
  curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
  curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]' );
  curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
  curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-type: application/json' ) );
  $result = curl_exec( $ch );
  curl_close( $ch );
  //JSONデータからカウント数を取得
  $obj = json_decode( $result, true );
  //カウントが0の場合
  if(!isset($obj[0]['result']['metadata']['globalCounts']['count'])){
    $count = 0;
  }else{
    $count = $obj[0]['result']['metadata']['globalCounts']['count'];
  }
  //カウントを出力
  return $count;
}
 
//はてブ数の取得
function get_hatena_hatebu_count($url){
  //はてブ数を取得
  $count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url='.rawurlencode($url));
  //カウントが0の場合
  if(!isset($count) || !$count){
    $count = 0;
  }
  //カウントを出力
  return $count;
}
function get_feedly_count(){
  $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
  $res = '0';
  $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
  if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;

    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
    $res = ($subscribers ? $subscribers : '0');
    return $res;
  }
}

SNS用のアイコンとカウント数を表示する

アイコンと、アイコンの横にカウント数を設置します。

画像ファイルのパスは環境にあわせて変更してください。
設置をする場所はWordpressの各テーマごとの所定のファイルに記述してください。






/wp-content/themes/stinger3forFANS/images/hatena-bookmark.png" title="pocket"  alt="pocket" padding-top="-10px" width="40" height="auto" padding-bottom="0" scale="2">


/wp-content/themes/stinger3forFANS/images/social-080_google_plus.png" title="google+"  alt="google+" width="40" height="auto" scale="2">


/wp-content/themes/stinger3forFANS/images/feedly-black.png" title="feedly" alt="feedly" width="40" height="auto" scale="2">

ここで注目をしておきたいのは以下のPHPプログラムでカウント数を取得して表示さているところです。

;facebook カウント
<?php echo get_facebook_like_count( get_the_permalink() );?>
;twitter カウント
<?php echo get_twitter_tweet_count( get_the_permalink() );?>
;はてなブックマーク カウント
<?php echo get_hatena_hatebu_count( get_the_permalink() );?>
;Googleプラス カウント
<?php echo get_google_plus_one_count( get_the_permalink() );?>
;feedly カウント
<?php echo get_feedly_count(); ?>

CSSでバランスなどを調整

さいごに並べた時の幅のバランスなどを調整します。

各テーマごとのCSSファイルに以下のようなコードを書いておけば僕のブログのような感じに並ぶと思います。
アイコンの画像の幅のサイズによってwidthなどの数値を変更してもらえたらと思います。

/* sns buttom custmize */
a.feedlybtn{
width:20%;
padding: 20px 0px 20px 0px;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

a.facebook-iine{
width:20%;
padding:20px 0;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

a.twitter-tweet{
width:18%;
padding:20px 0;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

a.pocketbtn{
width:18%;
padding:20px 0;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

a.hatenabtn2{
width:20%;
padding:20px 0;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

a.gplusbtn{
width:18%;
padding:20px 0;
color:#fff;
text-align:center;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}

これで僕のブログに設置しているようなSNSボタンを設置することができると思います。

画像ファイルを差し替えるだけでも雰囲気をガラッと変えることもできると思うので、ぜひ参考にしてみてほしいと思います。