【WordPress】プラグイン不要！SNSシェアボタンの自作および設置方法

ブログにおいて非常に重要となるTwitter、FacebookなどのSNSへのシェアボタン。

特にこだわりがなければ各種SNSから提供されるコードを貼り付ければ事足りますが、ブログデザインを重視している方であれば見た目に統一性がなく不満かと思います。(私もそのクチです)

SNSごとのシェア用URLや、手っ取り早くシェアボタンを追加するためのコードをご紹介して参ります。

Contents

1 SNS別シェア用URL
2 手っ取り早くSNSボタンを設置するためのコード
3 シェアボタンの表示確認
4 まとめ

SNS別シェア用URL

自作シェアボタンを作成するには、SNSごとに下記URLをボタンのリンク先に設定すればＯＫです。「そんなことよりボタンを配置する具体的な手順を教えてくれ」という方は、読み飛ばし頂いて構いません。

Twitter

http://twitter.com/intent/tweet?text=[ツイートエリアに初期表示したい文字]&amp;url=[シェアする記事のURL]

Facebook

http://www.facebook.com/sharer.php?u=[シェアする記事のURL]&amp;t=[シェアする記事のタイトル]

Google+

https://plus.google.com/share?url=[シェアする記事のURL]

はてなブックマーク

http://b.hatena.ne.jp/add?mode=confirm&amp;url=[シェアする記事のURL]&amp;title=[シェアする記事のタイトル]

Pocket

http://getpocket.com/edit?url=[シェアする記事のURL]

手っ取り早くSNSボタンを設置するためのコード

script.js

シェアボタン押下時、シェア画面をサブウインドウで表示するためのjQueryを追加します。

「script.js」ファイルを作成し、内部に下記ソースコードを貼り付けて保存してください。その後、レンタルサーバのコンソールから、jsファイルを使用テーマフォルダの直下にアップロードしてください。

jQuery(document).ready(function($){
   /* サブウインドウ表示 */
   $(".opensub").click(function(){
      window.open(this.href,"WindowName","width=520,height=520,resizable=yes,scrollbars=yes");
      return false;
   });
});

shared-button.php

シェアボタンを一斉配置するためのファイルを用意します。

「shared-button.php」ファイルを新規作成し、下記ソースコードを貼り付け保存してください。その後、jsファイルと同じ手順で使用テーマフォルダの直下にアップロードします。

<div class="button-area">
   <div class="button-area-title"><span class="title-fill">この記事をシェアする</span></div>
   <div class="button-whole">
      <a class="button-link opensub" id="twitter"
         href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>"
         target="_blank" title="Twitterで共有">
         <i class="fa fa-twitter"></i>
      </a>
   </div>
   <div class="button-whole">
      <a class="button-link opensub" id="facebook"
         href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(the_title("","",0)); ?>"
         target="_blank" title="Facebookで共有">
         <i class="fa fa-facebook"></i>
      </a>
   </div>
   <div class="button-whole">
      <a class="button-link opensub" id="ggl-plus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>"
         target="_blank" title="Google+で共有">
         <i class="fa fa-google-plus"></i>
      </a>
   </div>
   <div class="button-whole">
      <a class="button-link opensub" id="hatena"
         href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>"
         target="_blank"
         data-hatena-bookmark-title="<?php the_permalink(); ?>"
         title="このエントリーをはてなブックマークに追加">
         <strong>B!</strong>
      </a>
   </div>
   <div class="button-whole">
      <a class="button-link opensub" id="pocket"
         href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>"
         target="_blank" title="pocketで共有">
         <i class="fa fa-get-pocket"></i>
      </a>
   </div>
</div>

各種シェアボタンのアイコン素材に「Font Awesome」を使用しています。header.php or ｆooter.phpに下記ソースコードを追記頂ければ、CDNでネットワークから直接CSSを参照できます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

functions.php

「functions.php」に下記ソースコードを追記してください。先ほど作成したjsファイルをブログ表示時に読み込みます。管理画面を表示する際には不必要であるため、その際はjsファイルを読み込まないように設定しています。

if (!is_admin()) {
  $cssdir = get_stylesheet_directory_uri();
  // 自作スクリプトをページにリンク
  wp_enqueue_script( 'theme-script', $cssdir.'/script.js', array('jquery'));
}

content-○○.php

シェアボタンを配置したい箇所に下記ソースコードを追記します。テーマによって構成は異なりますが、一般的にはcontent.php(トップページの投稿)、content-page.php(固定ページ)、content-single.php(投稿)のいずれかになるでしょう。

※content-page、content-singleがない場合、固定ページや投稿の表示にはcontent.phpが呼び出されます。

 <?php include( STYLESHEETPATH . '/shared-button.php' ); ?>

style.css

最後に、ボタンデザインを調整します。「style.css」に下記ソースコードを追記してください。

/* SNSごとの背景色 */
#twitter {
   background-color: #00acee;
}
#pocket {
   background-color: #EE4056;
}
#facebook {
   background-color: #3b5998;
}
#ggl-plus {
   background-color: #dd4b39;
}
#hatena {
   background-color: #2D4C86;
}

/* ボタン設定 */
.button-area {
   width: 100%;
   margin: 10px 0;
}
.button-area:after {
   content: '';
   clear: both;
   display: block;
}
.button-area-title {
   font-weight: 700;
   margin: 0 0 8px;
   text-align: center;
}
.title-fill {
   display: block;
   background-color: #444;
   color: #fff;
   font-size: 14px;
   width: 100%;
   padding: 6px 15px;
   box-sizing: border-box;
}
.button-whole {
   float: left;
   width: 19%;
   margin: 0 0.5% 0 0.5%;
   box-sizing: border-box;
}
.button-link {
   display: block;
   text-align: center;
   color: #fff !important;
   font-size: 14px !important;
   padding: 10px 0 !important;
   box-sizing: border-box;
   border-radius: 3px;
   text-decoration: none;
}
.button-link:hover {
   text-decoration: none !important;
   filter:alpha(opacity=70);
   -moz-opacity: 0.70;
   opacity: 0.70;
}