東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2016.10.03

hoshida

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

ハア~~イ!!みんな元気?!MaromaroのHOSHIDAよ!!

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

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

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

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

以下テンプレートに記述するコードです。ボタンの中身はアイコンフォントです。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やタイトルをパラメーターで入れると実装できるので、適宜追加してください。ボタンごとに色を変えたい方は個別にクラスを振って頑張ってください。

注意点

facebookなどではページのogメタタグを読みこんでシェア先で表示するので、ogメタの設定は必ず行いましょう。ogメタの記述については以下のような記事も書いているので覗いてみてください。

あと、カスタムパーマリンクスで設定したパーマリンクがうまくシェア先で表示されない場合は、以下の記事を参考にしてください。

このコードを使用してみなさんもどんどんシェアされてください。ではでは