WordPressにSNSボタンを設置する方法

SNSボタンの設置方法を紹介します。

SNSボタンの設置方法

$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
$domain = '自分のサイトのドメイン';//○○○○.com feedly用

として、「$url_encode」で現在の記事のURLを、「$title_encode」で現在の記事のタイトルを取得します。
次にテンプレート側ですが、

<div class="sns_area">
  <ul class="clearfix">
    	<!--ツイートボタン-->
        <li class="twitter">
          <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode;?>&text=<?php echo $title_encode;?>&tw_p=tweetbutton" target="blank"><i class="fa fa-twitter"></i>Twitter<?php if(function_exists('scc_get_share_twitter')):echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter();endif;?></a>
        </li>
        <!--Facebookボタン-->
        <li class="facebook">
          <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>Facebook<?php if(function_exists('scc_get_share_facebook')):echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook();endif;?></a>
        </li>
        <!--Google+1ボタン-->
        <li class="googleplus">
          <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=500');return false;"><i class="fa fa-google-plus"></i>Google+<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
        </li>
        <!--はてブボタン-->
        <li class="hatebu">
          <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=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてブ <?php if(function_exists('scc_get_share_hatebu')):echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu();endif;?></a>
        </li>
        <!--LINEボタン-->
        <li class="line">
          <a href="http://line.me/R/msg/text/?<?php echo $title_encode.'%0A'.$url_encode;?>" target="blank">LINE</a>
        </li>
	<!--ポケットボタン-->
        <li class="pocket">
          <a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank">Pocket<?php if(function_exists('scc_get_share_pocket')):echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket();endif;?></a>
        </li>
        <!--RSSボタン-->
        <li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>
        <!--feedlyボタン-->
        <li class="feedly">
          <a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F<?php echo $domain;?>%2Ffeed%2F" 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();endif;?></a>
        </li>
  </ul>
</div>

とします。
ここでは「fontawesome」のアイコンフォントを使用しています。

それから、CSSを

.sns_area{}
.sns_area ul{list-style:none;margin:0;padding:0;}
.sns_area ul li{float:left;width:25%;margin:0;padding:0;}
.sns_area ul li a{display:block;padding:1em 0;width:98%;margin:1%;text-align:center;text-decoration:none;color:#fff;border-radius:0.4em;}
.sns_area ul li a i{margin-right:0.5em;}
.sns_area ul li a:hover{opacity:0.7;}
.sns_area ul li.twitter a{background:#55acee;}
.sns_area ul li.facebook a{background:#455a9e;}
.sns_area ul li.googleplus a{background:#dd4b39;}
.sns_area ul li.hatebu a{background:#008fde;}
.sns_area ul li.line a{background:#00da00;}
.sns_area ul li.pocket a{background:#EE4257;}
.sns_area ul li.rss a{background:#ff8c00;}
.sns_area ul li.feedly a{background:#87c040;}

としました。
※テンプレート、CSSは適宜カスタマイズしてください。

すると下記のようなソーシャルボタンができると思います。