WordPressでTwitter、Facebook、はてブなどのオリジナルソーシャルシェアボタンを実装するコード

やろうやろうと思いつつめんどくさいからいいやと放置していた記事直下SNSシェアボタンのオリジナルデザイン化。

Twitterの仕様変更でシェア数が吐き出されなくなり、これまでの公式ボタンではサイズが揃わないし、いい加減実装するか！と一念発起して対応してみました。

準備

まずは準備としてWordPressプラグインのSNS Count Cacheをインストール。これはSNSのCountをCacheしてくれるものです。すごいですね。

まぁつまりFacebookとかはてブのシェア数を数えてくれるやーつです。なんかそのうちTwitterも対応してくれないかしら。

記事数によって時間は違いますが各記事のシェア数がキャッシュされていきます。ほんだら次の作業、いよいよ記事直下のシェアボタンを実装しましょう（別にキャッシュしてる途中に作業してもOKです）。

ソーシャルボタンのコード

コードは下記をtheme/single.php内、ボタンを表示させたい場所に書けばよろし。

<div class="snsShareArea">
  <!-- Twitter / hogehogeの部分を自分のアカウント名に変更してください。-->
  <a class="btn--twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=hogehoge&tw_p=tweetbutton&related=hogehoge" target="_blank">
    Twitter&nbsp;
    <!-- SNS Count CacheよりTwitterのシェア数を取得 -->
    <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>
  </a>

  <!-- Facebook -->
  <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn--facebook">
    Facebook&nbsp;
    <!-- SNS Count CacheよりFacebookのシェア数を取得 -->
    <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?>
  </a>

  <!-- Google+ -->
  <a class="btn--google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
    Google+&nbsp;
    <!-- SNS Count CacheよりGoogle+のシェア数を取得 -->
    <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?>
  </a>

  <!-- はてなブックマーク -->
  <a class="btn--hatena" target="_blank"  href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank">
    はてブ&nbsp;
    <!-- SNS Count Cacheよりはてなブックマークのシェア数を取得 -->
    <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?>
  </a>

  <!-- Pocket -->
  <a class="btn--pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php echo get_the_title;?>" target="blank">
    Pocket&nbsp;
    <!-- SNS Count CacheよりPocketのシェア数を取得 -->
    <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?>
  </a>
</div>

WordPressでしたらまるっとコピペでOKですが、Twitterのhogehogeの部分は自分のアカウント名に変更してください。コードはLIGさんのPHPがわからなくても簡単！WordPressでオリジナルのソーシャルボタンを設置する方法を参考にさせていただきました。

CSS

あとはcssでお好みに仕上げるだけ。一応うちのブログのボタンっぽいスタイル書いたので使って、どうぞ。

.snsShareArea:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.snsShareArea a{
  box-sizing: border-box;
  display: block;
  float: left;
  width: 31.3%;
  margin: 1%;
  padding: .7em 0;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  text-align: center;
}
.btn--twitter{
  background: #55acee;
}
.btn--facebook{
  background: #3b5998;
}
.btn--google{
  background: #dd4b39;
}
.btn--hatena{
  background: #008FDE;
}
.btn--pocket{
  background: #ee4056;
}

↑のスタイルを適用したページがこちら↓です。

ソーシャルアイコンを使いたい場合は頑張って下さいこの記事とかを参考にしてください。ただし海外のWebフォントサービスははてなブックマークアイコンが無いので別途svgを作成する必要があります。頑張って下さい

参考：アイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる

まぁそんなわけでようやくSNSシェアボタンをオリジナルにしたよてな話でした。

それにしてもブログのコードが汚くてイヤになっております。いつか、いつか書き直そう…

• Twitterソーシャルボタンにツイート数を表示できるようになったので実装してみた
• パクリサイトに記事を全文無断転載されたのでGoogleに著作権侵害を報告しつつ差し替え画像を用意して対策を講じてみた
• Google Adsenseの広告配信が停止処分→再審査申し立てのメールをとんでもない文面で送ってしまった件
• ブログをリニューアルいたしました:)