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

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

2016022801

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

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

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

SNS別シェア用URL

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

Twitter

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

Facebook

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

Google+

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

はてなブックマーク

http://b.hatena.ne.jp/add?mode=confirm&url=[シェアする記事のURL]&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 footer.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;
}

シェアボタンの表示確認

シェアボタンを配置したページがこのように表示されます。ボタンサイズは絶対値ではなく相対値を指定しているため、レスポンシブにサイズチェンジします。

2016-02-28_050226

まとめ

シェア用URLの調査とタイトルやURLなどのクエリストリング設定が面倒ですが、設置さえできてしまえばこっちのものです。ソースに改良の余地がありましたら、ご自由に編集なさってください。

そのうちシェアカウントの取得方法を別途投稿しようかと思います。それでは。

にほんブログ村 漫画ブログへ
↑ランキングバナーをクリック頂けると励みになります。
この記事をシェアする
このブログをフォローする