サイトにソーシャルボタンを追加しました

年の瀬も迫り大寒波到来というタイミングですが、いまさらながらブログにソーシャルボタンを追加しました。
今回はその方法を覚え書きとしてメモしておきます。

追加した要素

追加した要素としては、

  • シングルページ・投稿記事ごとのシェアボタンの追加
  • サイト全体のシェアボタンをフッターに追加
  • ついでにどれくらい閲覧されたのかを投稿の右下に表示

となります。

ソーシャルボタンの設置について

ソーシャルボタンはオリジナルのデザインにしたかったので、プラグイン「WP Social Bookmarking Light」などは使わず、後述の参考サイトさまの方法で表示させました。

wordpressでオリジナルのSNS共有ボタンを設置する方法 | CreativeTips

ただ、参考にした際、自分は単一記事用のシェアボタンだけでなく、サイト全体用のシェアボタンも追加したかったので、ヘッダー(もしくはフッター)で読み込む部分をサイト全体に反映させるため。

<?php
if(is_singular){
  wp_enqueue_script('social', get_stylesheet_directory_uri() . '/js/social.js');
}
?>

wp_enqueue_script('social', get_stylesheet_directory_uri() . '/js/social.js');

と、単一記事用のif文を削除しています。

単一記事用のソーシャルボタン

単一記事用のソーシャルボタンは、以下のソースで表示させています。

<div class="share">

  <ul class="clearfix">
    <li class="btn-tw">
      <a href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false)); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink(); ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank" rel="tooltip" data-toggle="tooltip" data-placement="top" title="この記事をtwitterで共有する"><i class="fa fa-twitter fa-lg"></i>&nbsp;Tweet <span class="t_count"><i class="fa fa-refresh fa-spin"></i></span></a>
    </li>
    <li class="btn-fb">
      <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="facebookでこの記事を友達に教える"><i class="fa fa-facebook-square fa-lg"></i>&nbsp;Share <span class="f_count"><i class="fa fa-refresh fa-spin"></i></span></a>
    </li>
  <!-- end .shear_list --></ul>

<!-- end .share --></div>

これで単一記事の下部に表示させています。

サイト全体用のソーシャルボタン

スクリーンショット 2014-12-17 16.51.41

サイト全体用のソーシャルボタンは、ついでにRSSの表示も含め以下のソースで表示させています。

<div class="meta-foot">
  <ul class="clearfix">
    <li class="btn-tw">
      <a href="http://twitter.com/intent/tweet?text=<?php bloginfo('name'); ?>&nbsp;|&nbsp;&amp;url=<?php bloginfo('url'); ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank" rel="tooltip" data-toggle="tooltip" data-placement="top" title="このサイトをtwitterで共有する"><i class="fa fa-twitter fa-lg"></i>&nbsp;<span class="t_count"><i class="fa fa-refresh fa-spin"></i></span></a>
    </li>
    <li class="btn-fb">
      <a href="http://www.facebook.com/sharer.php?u=<?php bloginfo('url'); ?>&amp;t=<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="facebookでこのサイトを友達に教える"><i class="fa fa-facebook-square fa-lg"></i>&nbsp;<span class="f_count"><i class="fa fa-refresh fa-spin"></i></span></a>
    </li>
    <li class="btn-rss">
      <a href="<?php bloginfo('rss2_url'); ?>" target="_blank" rel="tooltip" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fa fa-rss fa-lg"></i>&nbsp;</a>
    </li>
  <!-- end .shear_list --></ul>
<!-- end .meta-foot --></div>

こんな感じです。

はてなブックマークや、Feedlyのボタンも追加したかったのですが、読み込み速度の関係や、レイアウトの崩れ、それと細かいですがFontAwesomeにアイコンがないなど気になるところがあったので、まぁ必要最低限かな、というところで置いておきました。

それにこの表示数なら、モバイル・スマートフォンで閲覧した際でも、閲覧数とあわせて3つうまく並びますし。
拡散の重要性は知っているつもりですが、とりあえずここまでにしておき、おいおい対応を考えようと思います。

閲覧数について

閲覧数は、「WP-PostViews」というプラグインを使って取得。ソースコードを single.php に貼り付けて表示しています。
表示するだけならプラグインを有効化した後、

<?php echo post_custom('views'); ?>

上記の記述で表示できます。

自分の設定は以下のようにしています。(アイコンには「FontAwesome」を使用)

<div class="post-views">
  <i class="fa fa-eye fa-lg" title="Views"></i>&nbsp;<span><?php echo post_custom('views'); ?> Views</span>
<!-- end .post-views --></div>

設定については、後述の参考サイトが詳しいので、そちらをご参照ください。

もうすでに自分のところは積雪や地面の凍結・強風で大荒れなんですが、みなさま風邪やインフルエンザ、その他もろもろにお気をつけ下さい。
以上です。


参考

ソーシャルボタン設置関連

wordpressでオリジナルのSNS共有ボタンを設置する方法 | CreativeTips

閲覧数関連

[WP]記事の閲覧数を表示できるWordPressプラグイン「WP-PostViews」の基本的な使い方

[WP]「WP-PostViews」プラグインで記事に閲覧数を表示する方法と、人気記事一覧の作り方

 633 Views