各種SNSの共有数別記事ランキングを作る方法

wordpress, ブログ運営

久しぶりにブログのデザインと機能に手を加えようかと思い、各種SNS(twitterやfacebook、はてな、google+1など)の共有数別の記事ランキングでも設置してみようかなと思ったので試してみた。

結果的に出来たのだが、とりあえず暫定で各種SNSで共有された合計の値での記事ランキングをサイドバーに設置してみた。デザインも暫定でこんな感じだ。大体10分くらいで出来るので興味がある方はお試しあれ。

集計対象のSNS
・twitter
・facebook
・google+
・pocket
・はてなブックマーク
合計共有数記事ランキング

合計共有数記事ランキング

PV数などを元にしているアクセスランキングよりも、合計シェア数の記事ランキングの方が【話題性があり、訪問者の目を引きやすく、多数の人にとって役に立った記事、注目されている記事】という事が分かりやすいのでは無いかと考えた。訪問者にとっても良質な記事に辿り着けるorウォンツを満たす記事に出会える可能性が上がると思うので、設置してみた次第でございまする。

スポンサーリンク

SNS合計共有数別の記事ランキングを作る

用意するもの
・wordpress
・wordpress plugin SNS Count Cache

wordpressじゃ無い場合の環境については、cronを動かせるサーバーで、一定時間ごとに記事のシェア数をキャッシュ、もしくは共有数を記録するファイルを生成・更新するコードを書く方法などが考えられるが、今回はお手軽にSNS Count Cacheというプラグインを使用し、簡単に実装してみた。

SNS Count CacheでSNS共有数を高速表示+オリジナルSNSボタンでwordpressを高速化

plugin開発者様のブログ記事でも、コードが公開されているのでそちらも参考にしてみてください。

[試] 表示速度改善とシェア数ベースの人気記事ランキングを実現、WordPressプラグイン SNS Count Cache | 試行錯誤ライフハック
SNS Count Cacheは、Twitter、Facebook、Google+、Pocket、はてブのシェア数をキャッシュするWordPressプラグインです。表示時にネットワークを介さずキャッシュ経由でシェア数を取得できるようになるため、複数の記事、複数のSNSにまたがるシェア数取得時に表示速度の改善が見込めます。

合計共有数での記事ランキングのコード

pluginをインストール後に、設置したい箇所のファイルに以下のコードを記述。

<div class="best_populer">
    <h3>みんなに人気の記事</h3>
  <?php
    $args = array(
      'post_type' => 'post',
      'post_status' => 'publish',
      'meta_key' =>  'scc_share_count_total',
      'orderby'  =>  'meta_value_num',
      'posts_per_page' => 5
    );

     $myposts = new WP_Query($args);
                
    if($myposts->have_posts()) : ?>
      <?php while($myposts->have_posts()) : $myposts->the_post(); ?>
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <div class="best_pupuler_style">
          <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link"><?php the_post_thumbnail( 'thumb300', array('class' => 'entry-thumnail') ); ?><span class="best_populer_count"><?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>&nbsp;Share</span></a>
          <a class="best_populer_title" href="<?php echo esc_url(get_permalink($myposts->ID)); ?>"><?php echo esc_html(get_the_title($myposts->ID)); ?></a>
        </div>
      <?php else: // サムネイルを持っていない ?>
        <div class="best_pupuler_style">
          <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" class="entry-thumnail no-image list-no-image" /><span class="best_populer_count"><?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>&nbsp;Share</span></a>
          <a class="best_populer_title" href="<?php echo esc_url(get_permalink($myposts->ID)); ?>"><?php echo esc_html(get_the_title($myposts->ID)); ?></a>
        </div>
      <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
        <p>記事が存在しません。</p>
    <?php endif; wp_reset_postdata(); ?>
  </div>

シェア数の表示を行っているのはこの部分なので必要ない場合は削除すべし。

<span class="best_populer_count">
            <?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>&nbsp;Share</span>

スタイルの設定

.best_pupuler_style{
  position:relative;
  margin:0 0 20px 0;
  border: 1px solid #666;
  width:100%;
}

.best_populer_count {
  position:relative;
}

.best_populer span{
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  background: rgba(106, 90, 205, 0.93);
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

.best_populer img{
  width:100%;
  height: 169px;
}

.best_populer_title{
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: #fff;
  bottom: 0;
  padding: 10px 5px;
  text-decoration: none;
  right: 0;
  left: 0;
  overflow: hidden;
  display: block;
}

使用しているテーマが【Simplicity】である場合は、上記コードをそのままコピペしても問題は無い。他のテーマ等で使う場合は記事のサムネイル画像のサイズを最適化する必要とがあるので、以下の部分を変更してください。

<?php the_post_thumbnail( 'thumb300', array('class' => 'entry-thumnail') ); ?>
↓に変更
<?php the_post_thumbnail( 'thumbnail', array('class' => 'entry-thumnail') ); ?>

(あとCSSも抜けてるところがあると思うので、自由にデザインしてくださいな。)

各種SNS別の共有数での記事ランキングのコード

twitterでつぶやかれた回数だけ、facebookで話題の記事、google+で人気の記事、はてなブックマーク人気記事等のサービス別での共有数ランキングを作りたい場合も簡単に出来る。

先ほどの合計数別の記事ランキングのコード内にあるmeta_keyの値を変更すればOK。

$args = array(
      'post_type' => 'post', // 投稿タイプ
      'post_status' => 'publish', //記事の状態、publishは公開状態
      'meta_key' =>  'scc_share_count_total', // 絞込みシェア数の選択
      'orderby'  =>  'meta_value_num', // 表示順のソート
      'posts_per_page' => 10 // 記事の表示件数
    );
meta_key 概要
scc_share_count_twitter Twitterのシェア数
scc_share_count_facebook Facebookのシェア数
scc_share_count_google+ Google+のシェア数
scc_share_count_hatebu はてなブックマークのシェア数
scc_share_count_pocket Pocketに保存された数
scc_share_count_total 上記のシェア数の合計値

もうちょっとカスタマイズしたい場合

特定のカテゴリやタグで表示する記事ランキングを絞りたい、表示件数を増やしたい等の場合は以下のリファレンスサイトを参考にパラメーターを変更したり追加してあげるといい。

関数リファレンス/WP Query – WordPress Codex 日本語版
テンプレートタグ/query posts – WordPress Codex 日本語版

まとめ

PV数による記事ランキングでは、純粋に多くの人に見られている記事が把握でき、シェア数ランキングでは訪問者からのアクション(共有)などが更に増やせるたり、ウォンツを満たす可能性が増える。両方設置していれば1ユーザー辺りの平均PV数が増え、再訪問率の上昇やシェア数の底上げなど、SEOにもいい効果をもたらす可能性が増える。

ブログだけじゃなく、コンテンツ型のサイト運営にもかなり有効な手法ではないかと思われる。

ニコニコ動画内の【話題の動画】に表示されるものも、SNSのシェア数によって掲載されているものが多く、掲載時に再生数が100や1000でも、翌日にはデイリーランキングの上位に入っていることが多いし、純粋に凄いと思える動画や面白いものが多い。(一夜で再生数10万越えする事が多々あり)。そういった観点からも、シェア数による記事ランキングの表示をオススメしたい。

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