MENU
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WEB制作者向け無料テーマ「Arkhe」をリリースしました

プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法

WordPress カスタマイズ

SNSシェアボタンをプラグインなしで実装した時の備忘録です。（このブログのシェアボタンはこの記事の方法で実装しています。）

PHPだけで実装するパターンと、html(php) + javascriptで実装するパターンの二種類をメモしていきます。アナリティクスとの連携もわかる範囲で合わせてメモ。

今回対応していくのは、

  • Facebook
  • Twitter
  • Google+
  • はてな
  • ポケット
  • LINE

の６種類のSNSボタンです。

*シェア数の「表示」に関しては、プラグインを頼った実装になります。

目次

シェア機能の基本知識

単純に記事をシェアするためのボタンを設置する場合、基本的にはアンカータグの href属性に指定するURL の操作だけで実装できます。

Twitterの場合

https://twitter.com/intent/tweet

が基本的なツイート画面のURLになっており、試しにこのURLにアクセスすると以下のような画面に遷移します。

twitter投稿画面

本当に単純なツイート画面なので、記事のシェアも何もありません。

このURLに、 url=◯◯と text=◯◯という プロパティをセットしてあげることで、シェアするページ(url)と、その時にツイートするテキスト(text)を指定できます。

先ほどのベースURLに ?をつけてプロパティを記述できます。2つ目からは ＆でつなげます。

例：「あああ」という文章で当サイトのトップページをシェアする場合、以下のようになります。

https://twitter.com/intent/tweet?url=http://wemo.tech&text=あああ

プロパティの順序はどちらが先でも構いません。

これらのURLをアンカータグに指定しておくことで、クリックされると次のような画面に遷移します。

twitterシェアテスト

ツイートの内容、「 あああ」という本文とシェアするURL ( http://wemo.tech ) がすでに記入されてますね。

このままツイートしてみると…

twitterシェア確認

無事、このようにツイートできました。

シェアされる時に表示される画像やサイトの紹介文などは、 head内のmeta属性などであらかじめ設定しておかなければなりません。

その辺はAll in One SEOというプラグインなどを使えば簡単に設定できますので、各自でググってみてください。

超素朴なTwitterシェアボタン

無駄な機能の一切ない、純粋にシェアしてもらうだけのボタンの例です。

<a href="https://twitter.com/intent/tweet?url=シェアさせたい記事のURL&text=タイトルとか" target="blank_">
  Twiiterでシェアする
</a>

Twiiterでシェアする

もちろん、これだけでは物足りないと思うので、後ほどクオリティを上げていきます。

Facebookの場合

Facebookの場合も軽く触れておきます。

ベースとなるのは、下記のURLになります。

https://www.facebook.com/sharer

これでシェア画面にアクセスできます。これにつづいて、「 .php?src=bm&u="シェアするURL"」、「 &t="本文テキスト"」とすれば、ツイッターの時のようにツイートする本文とシェアするURLが指定できます。

例：当サイトのトップページをシェアするためのURL

https://www.facebook.com/sharer.php?src=bm&u=http://wemo.tech&t=備忘録ブログです

PHPのみで実装【WordPress】

さて、基本的な記事のシェア方法が理解できましたら、実際に表示中の記事をシェアするボタンを実装していきましょう。

Javascriptのwindow.open()を使って、ボタンがクリックされたらシェア用URLにて小窓を展開します。

アイコン画像やボタンのデザインは各自でどうぞ。

シンプルな実装（シェア数表示なし）

まず先にコードから。WordPressでの例です。

シェアボタンを表示させたい位置にコードを記述

<?php
  $share_url   = get_permalink();
  $share_title = get_the_title();
?>
<ul>

<!--Facebookボタン--> 
<li>
  <a href="//www.facebook.com/sharer.php?src=bm&u=<?=$share_url?>&t=<?=$share_title?>" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
    Facebook(アイコンなど)
  </a>
</li>

<!-- Twitter -->
<li>
  <a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>&via=wemo_blog" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
    Twitter(アイコンなど)
  </a>
</li>

<!-- Google+ -->
<li>
  <a href="//plus.google.com/share?url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;" title="Google+で共有">
    Google(アイコンなど)
  </a>
</li>

<!-- はてな -->
<li>
  <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">
    はてな(アイコンなど)
  </a>
</li>

<!-- ポケット -->
<li>
  <a href="//getpocket.com/edit?url=<?=$share_url?>&title=<?=$share_title?>" target="_blank" title="Pocketに保存する">
    ポケット(アイコンなど)
  </a>
</li>

<!-- LINE -->
<li>
  <a href="//line.me/R/msg/text/?<?=$share_title.'%0A'.$share_url?>" target="_blank" title="LINEに送る">
    LINE(アイコンなど)
  </a>
</li>

</ul>

シェアしてほしい記事のURLやタイトルをWordPressの関数で取得しておき、onclick属性でシェア画面を小窓表示する処理を加えています。

window.open()の第2引数'_blank'は空文字''でも大丈夫っぽいです。

一応urlencode()でURL用にエンコードをかけています。

*追記：urlencode()を使うと、Pocketでの保存時にタイトルが認識されずにURLで保存されてしまうことが判明しましたので、コードから削除いたしました。

pocketやLINEは小窓表示させずに単純にtarget="blank_"にするだけでも大丈夫です。（好みでどうぞ）
また、スマホの場合も小窓表示は必要ないですので、wp_is_mobile()などで条件分岐させて記述を分けても良いかもです。

シェア数表示あり

シェア数を表示するには SNS Count Cacheというプラグインが便利だそうです。

このプラグインを使用した場合の実装コードをメモしておきます。

※ 申し訳ございません、私は実際ににはまだこのコード確認できてないです。一応参考として載せておきます。

アイコンの横など、表示させたい場所にそれぞれ以下のコードを記述。（LINEは非対応）

<!--Facebookボタン--> 
　　<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?>
<!-- Twitter -->
　　<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>
<!-- Google+ -->
　　<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?>
<!-- はてな -->
　　<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?>
<!-- ポケット -->
　　<?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?>

JavaScript側で関数を作っておく場合

aタグに全部詰め込むとぐちゃぐちゃで気持ち悪い！って人は以下のようにjavascript側で関数を作っておくといいかもしれません。

onclickでの処理を js側へ分担

function sns_window( item, height, width ){
  var size = 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height='+height+', width='+width;
  window.open( item.href, '_blank', size );
  return false;
}

あとは、aタグの中身をそれぞれ下のように。

スッキリバージョンの PHP側コード

<!--Facebookボタン--> 
<a href="//www.facebook.com/sharer.php?src=bm&u=<?=$share_url?>&t=<?=$share_title?>" title="Facebookでシェア" onclick="return sns_window(this, 800, 600);">
  Facebook
</a>

<!-- Twitter -->
<a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>&via=wemo_blog" title="Twitterでシェア" onclick="return sns_window(this, 400, 600);">
  Twitter
</a>

<!-- Google+ -->
<a href="//plus.google.com/share?url=<?=$share_url?>" onclick="return sns_window(this, 600, 500);" title="Google+で共有">
  Google
</a>

<!-- Pocket -->
<a href="//getpocket.com/edit?url=<?=$share_url?>&title=<?=$share_title?>" onclick="return sns_window(this, 500, 800);" title="Pocketに保存">
  Pocket
</a>

<!-- はてな -->
<a href="//b.hatena.ne.jp/add?mode=confirm&url=<?=$share_url?>" onclick="return sns_window(this, 600, 1000);" title="はてなブックマークに登録">
  はてな
</a>

結構スッキリします！

小窓のwindowサイズはそれぞれのSNSに適したサイズに合わせていますが、全て一緒のサイズでいいやって人は、引数はthis(aタグ自身)だけにもできます。

Googleアナリティクスと連携させる

最後に、 Googleアナリティクスに連携させる方法です。

シェアするurlを個別にGoogleに投げる必要があるので、href属性は使わずに 必要な情報を全て onclick で js 側に受け渡します。

もはや自分では何もできなくなったPHP側のコード

<ul>
  <!--Facebookボタン-->
  <li>
    <a href="javascript:void(0);" title="Facebookでシェア" onclick="return sns_window('Facebook', '<?=$share_url?>', '<?=$share_title?>');">
      Facebook
    </a>
  </li>
  <!-- Twitter -->
  <li>
    <a href="javascript:void(0);" title="Twitterでシェア" onclick="return sns_window('Twitter, '<?=$share_url?>', '<?=$share_title?>');">
      Twitter
    </a>
  </li>
  <!-- Google+ -->
  <li>
    <a href="javascript:void(0);" title="Google+で共有" onclick="return sns_window('Google', '<?=$share_url?>', '<?=$share_title?>');">
      Google
    </a>
  </li>
  <!-- はてな -->
  <li>
    <a href="javascript:void(0);" title="はてなブックマークに登録" onclick="return sns_window('Hatena', '<?=$share_url?>', '<?=$share_title?>');">
      はてな
    </a>
  </li>
  <!-- ポケット -->
  <li>
    <a href="javascript:void(0);" title="Pocketに保存する" onclick="return sns_window('Pocket', '<?=$share_url?>', '<?=$share_title?>');">
      ポケット
    </a>
  </li>
  <!-- LINE -->
  <li>
    <a href="javascript:void(0);" title="LINEに送る" onclick="return sns_window('LINE', '<?=$share_url?>', '<?=$share_title?>');">
      LINE
    </a>
  </li>
</ul>

href属性の中身は空文字""でも動作します。

続いて、肝心のjavascript側の処理です。引数に「 sns名」、「 記事url」、「 シェアの説明文(タイトル)」を持つ、新しい関数を用意し、以下のようにします。

JS側のコード

function sns_window( sns, share_url, share_title ) {
  var size = "";
  var url = "";
  switch ( sns ) {
    case 'Facebook':
        size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800, width=600";
        url = "//www.facebook.com/sharer.php?src=bm&u="+share_url+"&t="+share_title;
        break;

    case 'Twitter':
        size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400, width=600";
        url = "//twitter.com/share?url="+share_url+"&text="+share_title;
        break;

    case 'Google':
        size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600, width=500";
        url = "//plus.google.com/share?url="+share_url;
        break;

    case 'Hatena':
        size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600, width=1000";
        url = "//b.hatena.ne.jp/entry/" + share_url;
        break;

    case 'Pocket':
        size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500, width=800";
        url = "//getpocket.com/edit?url=" + share_url + "&title=" + share_title;
        break;

    case 'LINE':
        url = "//line.me/R/msg/text/?"+share_title+"%0A"+share_url; 
        break;

    default:
        break;
}

  // Googleアナリティクスにイベント送信 ('share'はGoogleアナリティクス上の表示文字。なんでもOK）
  ga( 'send', 'social', sns, 'share', share_url, {
      'nonInteraction': 1   //1にしないと、直帰率がおかしくなる（ イベント発行したユーザーは直帰しても直帰扱いでなくなる ）
  });

  // シェア画面の新規ウインドウを表示
　　  window.open( url, '_blank', size );

　 return false;
}

Googleアナリティクスへイベントを送信するため、ga()という関数を使ってます。

普通のクリックイベントを送信するときは第二引数を'event'としますが、'social'とすることで「ソーシャル プラグイン」という特殊な項目でSNSのシェア状況を計測できるようになります。

各引数やアナリティクスのイベント送信については、この記事とか読むとすごくわかりやすいと思います。

また個人的に整理して記事にしてみようと思います。

シェア数の確認

アナリティクスの管理画面から「集客」->「ソーシャル」->「プラグイン」で確認できます。

管理画面スクショ

注意点

  • analytics.jsが先に読み込まれていないと、ga()という関数が Undefinedエラーを出します。
  • Googleアナリティクスのトラッキングコードをgtag.jsへ乗り換えた人もたぶん上記のイベントは動かないのではないかと思いますので注意してください。（確認できしだい記事更新します。）

おわりに

SNSシェアボタンをプラグインなしで実装するのはすごくややこしそうなイメージを持っていたのですが、以外と単純な仕組みでした。

長いメモになりましたが、根本的な仕組みはただaタグで飛ばす先のurlを操作するだけでした。

プラグインに頼りたくない派の方々の参考になれば幸いです。

WordPress カスタマイズ

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （2件）

目次