• アクセス数向上計画
  • ホームページのアクセス数チェックと、その向上のためにできることを紹介しています。

SNSやツイッターでも拡散しよう

 記事へのアクセス数を増やすためにはfacebookなどのSNSやTwitterなどで拡散してもらうこともひとつの方法です。SEOテンプレート【賢威】 を使えば、ソーシャルメディアを使った拡散の手立てが用意されていますので、選択肢も広がります。

ボタンが重い

 ところが、これらのシェアボタン設置には課題があって、数を取得する際に読み込みに時間がかかることがあるのです。非同期にするような方法もありますが、ボタンがなかなか表示されず、いかにも「重たい」という感じです。そこで当サイトでは、SNS Count Cacheというプラグインを使っています。

「SNS Count Cache」は、Twitter、Facebook、はてなブックマークなどのSNSでシェアされた数をSNS経由ではなく、定期的にシェア数をカウントたキャッシュを表示するプラグインです。その場で読み込まないのでかなりの高速化が期待できます。

 このプラグインを使えば、全ての記事のシェア数などが一覧表示でわかるので、よく拡散されている記事がどれなのかもわかります。使い方は細かいところまで設定しようと思えばいろいろありますが、基本的にはインストールして有効化するだけでOKです。

ボタンが目立ちすぎ

 さて、シェアボタンの表示速度が改善されればあとは問題ない・・・といったところですが、表示位置やデザインは少々考えたいところです。デフォルトでは記事の上下に表示されますが、当サイトは記事の下だけに表示するようにしています。また、デザインもカラフルだと目立ちすぎるので基本はグレーにしておき、マウスカーソルを載せるとイメージカラーが出るようにしています。

賢威7 social-button2.phpを書き換える

  1. <aside class=”sns-wrap”>
  2.  <?php 
  3.  if( function_exists( “enqueue_font_awesome”) ):
  4.  add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
  5.  function enqueue_font_awesome() {
  6.  wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
  7.  }
  8.  endif;
  9.  $url_encode = urlencode( get_permalink() );
  10.  $title_encode = urlencode( get_the_title() ); 
  11.  $twitter_account = ‘Namara_Hokkaido(自分のアカウント)‘;
  12.  ?>
  13.  <ul class=”sns clearfix”>
  14.  <li class=”twitter”>
  15.  <a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ‘ | ‘ ); echo urlencode( get_bloginfo(‘name’)); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related=”<?php echo $twitter_account; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-twitter”></i><span class=”pc”>ツイート</span></a>
  16.  </li>
  17.  <li class=”facebook”>
  18.  <a href=”http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-facebook”></i><span class=”pc”>シェア</span><span class=”share-count”><?php if(function_exists(‘get_scc_facebook’)) { echo scc_get_share_facebook();}?></span></a>
  19.  </li>
  20.  <li class=”googleplus”>
  21.  <a href=”https://plus.google.com/share?url=<?php echo $url_encode;?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-google-plus”></i><span class=”pc”>Google+</span><span class=”share-count”><?php if(function_exists(‘get_scc_gplus’)) { echo scc_get_share_gplus();}?></span></a>
  22.  </li>
  23.  <li class=”hatebu”> 
  24.  <a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><span class=”hatena-icon”>B!</span><span class=”pc”>はてな</span><span class=”share-count”><?php if(function_exists(‘get_scc_hatebu’)) { echo scc_get_share_hatebu();}?></span></a>
  25.  </li>
  26.  <li class=”pocket”>
  27.  <a class=”no-deco” target=”_blank” href=”http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-get-pocket”></i><span class=”pc”>Pocket</span><span class=”share-count”><?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></span></a>
  28.  </li> 
  29.  <li class=”feedly”>
  30.  <a href=”http://feedly.com/i/subscription/feed/<?php bloginfo(‘rss2_url’); ?>” rel=”nofollow” target=”_blank”><i class=”fa fa-rss”></i>feedly <?php if(function_exists(‘scc_get_follow_feedly’)) echo (scc_get_follow_feedly()==0)?”:scc_get_follow_feedly(); ?></a>
  31.  </li>
  32.  </ul>
  33.  </aside>

 書き換える時に文字コードがUTF-8になっていないと文字化けを起こします。

賢威7 子テーマbase.cssに追記

google PageSpeed Insightsで最適化したCSSです。

  1. .sns-wrap{width:100%;margin-top:1em;margin-bottom:1%;}
  2. .sns{margin:0 auto;list-style:none;}
  3. .sns a{text-decoration:none;font-size:15px;}
  4. .sns{text-align:center;}
  5. .sns li{float:left;width:32.3%;margin:0 .5% 2%;}
  6. .sns a{position:relative;display:block;padding:10px 5px;border-radius:5px;text-align:center;color:#000;background:#ccc;box-shadow:0 0 0 1px #aaa inset;}
  7. .sns span,
  8. .sns .fa{margin-right:.4em;//color:#fff;}
  9. .sns li a:hover{color:#fff;}
  10. .sns .twitter a:hover{background:#55acee;}
  11. .sns .facebook a:hover{background:#315096;}
  12. .sns .googleplus a:hover{background:#dd4b39;}
  13. .sns .hatebu a:hover{background:#008fde;}
  14. .sns .pocket a:hover{background:#f03e51;}
  15. .sns .feedly a:hover{background:#87c040;}
  16. @media only screen and (max-width:736px){.sns li{width:32.3%;margin:0 .5% 4%;}
  17. .sns a{color:#fff;font-size:13px;padding:6px 3px;}
  18. .sns .twitter a{background:#55acee;}
  19. .sns .facebook a{background:#315096;}
  20. .sns .googleplus a{background:#dd4b39;}
  21. .sns .hatebu a{background:#008fde;}
  22. .sns .pocket a{background:#f03e51;}
  23. .sns .feedly a{background:#87c040;}
  24. }
▶ スポンサードリンク

賢威7 シェアボタンを記事の下だけにする

「single.php」を開いて、33行目あたりにあるシェアボタン表示関係の1行を消す。

  1. <?php if (the_keni(‘social_post_view’) == “y”) get_template_part(‘social-button2’); ?>

 以上で高速化され、かつシンプルなシェアボタンを表示することが可能です。なお、技術は日々進歩しています。実際にサイト作成をされる際は参考元のサイトもチェックしてみてください。

関連記事一覧

  1. この記事へのコメントはありません。