MENU

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

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

今回対応していくのは、

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

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

目次

シェア機能の基本知識

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

Twitterの場合

http://twitter.com/intent/tweet

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

image

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

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

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

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

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

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

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

image

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

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

image

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

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

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

超素朴なTwitterシェアボタン

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

<a href="http://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]

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

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

シンプルな実装(シェア数表示なし)

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

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

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

<!--Facebookボタン--> 
<li>
  <a href="http://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="http://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="https://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="http://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=400,width=510');return false;" title="はてなブックマークに登録">
    はてな(アイコンなど)
  </a>
</li>

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

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

</ul>

内容的には先ほどまでの基本的なこととそんなに変わっていません。

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

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

*ちなみに、 <?=◯◯;?><?php echo ◯◯; ?>の省略形です。

pocketLINEは小窓表示する意味がないので単純に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タグの中身をそれぞれ下のように。

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

<!--Facebookボタン--> 
<a href="http://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="http://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="https://plus.google.com/share?url=<?=$share_url;?>" onclick="return sns_window(this, 600, 500);" title="Google+で共有">
  Google
</a>

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

これだけでも結構スッキリします!

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

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

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

シェアするurlをGoogleに投げる必要があるので、onclickの中身だけでなくhref属性の扱いもjsに任せます。

html(php)側のコード

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

HTML側はだいぶスッキリしていますね。

続いて、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 = "http://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 = "http://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 = "https://plus.google.com/share?url="+share_url;
      break;

    case 'Hatena':
      size = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400, width=510";
      url = "http://www.facebook.com/sharer.php?src=bm&u="+share_url+"&t="+share_title;
      break;

    case 'Pocket':
      url = "http://getpocket.com/edit?url="+share_url+"&title="+share_title;
      break;

    case 'LINE':
      url = "http://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;
} 

snsの名前によって分岐させ、phpだけで実装する場合にhref属性に記述していたURLやonclick処理の中身を変数に代入していき、 window.open()でシェア画面へ飛ばします。

てな感じで、アナリティクスとの連携も情報を投げるだけみたいですね。以外と簡単でした。

シェア数の確認

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

注意点

analytics.jsが先に読み込まれていないと、ga()という関数がUndefinedでエラーを出します。

おわりに

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

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

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

- Thank you for reading this to the end. -
TOPへ Top