2016.10.03

オリジナルデザインのSNSシェアボタン実装方法まとめ！WordPress編

ハア～～イ！！みんな元気？！MaromaroのHOSHIDAよ！！

WEBサイト作成で何かと手間のかかるSNSシェアボタンの実装。Wordpressの場合、プラグインJetpackを使用して簡単に追加できたりしますが、デザインが限定的だったり、シェア時に表示されるテキストの制御がむつかしかったり何かと使いずらい場合があります。

だったら、オリジナルのものを作った方が早い！というわけで以下コードです。

オリジナルデザインのSNSシェアボタンのコード

このようなシェアボタンを作るコードを紹介します。

以下テンプレートに記述するコードです。ボタンの中身はアイコンフォントです。IcoMoonによってFont Awesomeのアイコンフォントを使用しています。もちろんテキストや画像でもよいです。

<ul class="share_area">
  <?php
    //パーマリンクを取得
    $share_link = get_permalink();
    //タイトルを取得。ページタイトルの後にサイト名やキャッチコピーも入れています
    $share_ttl = get_the_title().'｜'.get_bloginfo( 'name' ).' - '.get_bloginfo( 'description' );
    //記事の抜粋を取得
    $share_excerpt = get_the_excerpt();
    //記事のサムネイルURLを取得
    $share_img_id = get_post_thumbnail_id();
    $share_img_url = wp_get_attachment_image_src($share_img_id, true);
  ?>
  <!-- Twitter -->
  <li>
    <a href="http://twitter.com/share?url=<?php echo $share_link; ?>&text=<?php echo $share_ttl; ?>" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-twitter"></i>
    </a>
  </li>
  <!-- facebook -->
  <li>
    <a href="http://www.facebook.com/share.php?u=<?php echo $share_link; ?>" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-facebook"></i>
    </a>
  </li>
  <!-- google + -->
  <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo $share_link; ?>" onclick="window.open(this.href, 'GPwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-google-plus"></i>
    </a>
  </li>
  <!-- tumblr -->
  <li>
    <a href="http://www.tumblr.com/share/link?url=<?php echo $share_link; ?>&name=<?php echo $share_ttl; ?>&description=<?php echo $share_excerpt; ?>" onclick="window.open(this.href, 'TBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-tumblr"></i>
    </a>
  </li>
  <!-- pocket -->
  <li>
    <a href="http://getpocket.com/edit?url=<?php echo $share_link; ?>&title=<?php echo $share_ttl; ?>" onclick="window.open(this.href, 'PCwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-get-pocket"></i>
    </a>
  </li>
  <!-- pinterest -->
  <li>
    <a href="http://pinterest.com/pin/create/button/?url=<?php echo $share_link; ?>&media=<?php echo $share_img_url[0]; ?>&description=<?php echo $share_excerpt; ?>" onclick="window.open(this.href, 'PINwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-pinterest-p"></i>
    </a>
  </li>
</ul>

以下CSSです。

.share_area{
  text-align:center;
}
.share_area li{
  padding:0;
  display:inline-block;
  list-style-type:none;
}
.share_area a{
  padding:0;
  width:32px;
  height:32px;
  color:#fff;
  text-align:center;
  background:#00468C;
          border-radius: 50%;
  -webkit-border-radius: 50%;
          box-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display:inline-block;
}
.share_area a i{
  color:#fff;
}
.share_area a i::before{
  font-size:16px;
  line-height:1;
  vertical-align:text-top;
}

上記以外のサービスのシェアボタンも、たいてい特定のURLに記事URLやタイトルをパラメーターで入れると実装できるので、適宜追加してください。ボタンごとに色を変えたい方は個別にクラスを振って頑張ってください。