メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

SNSシェアボタンをプラグインなしで実装した時の備忘録です。

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

この記事で対応しているのは

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

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

目次

    シェア機能の基本知識

    ただ記事をシェアする場合、基本的にurlの操作だけで実装できます。

    Twitterを例にとってみます。

    http://twitter.com/intent/tweet

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

    このurlに、「url=◯◯」と「text=◯◯」というプロパティをセットしてあげることで、シェアするページ(url)と、その時にツイートするテキスト(text)を指定できます。プロパティのつなぎ方は、ベースのurlに「?」をつけます。2つ目からは「&」でつなげます。

    例えば、「あああ」というつぶやきとともに当サイトのトップページをシェアする場合、以下のようになります。

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

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

    どちらのurlを打ち込んでも、次のような画面に遷移します。

    ツイートの内容がすでに記入されてますね。このままツイートしてみると…

    無事、このようにツイートできました。シェアされる時に表示させる画像やサイトの紹介文などは、meta属性などであらかじめ設定しておかなければなりません。その辺はAll in One SEOというプラグインで簡単に設定できますのでググってみてください。

    つまり、ただシェアしてもらうだけのSNSボタンであれば、各SNSボタンを囲むaタグのhref属性に上のようなurlを記述してあげるだけで実装できます。思ってたよりめちゃくちゃ簡単なことでした。

    Facebookの場合

    もう一例として、Facebookの場合も軽く触れておきます。

    ベースとなるのは、

    https://www.facebook.com/sharer

    です。これでシェア画面にアクセスできます。これにつづいて、「.php?src=bm&u=“シェアするURL”」、「&t=“説明文”」となってます。

    例:https://www.facebook.com/sharer.php?src=bm&u=http://wemo.tech&t=タイトル

    超素朴なTwitterシェアボタン

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

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

    Twiiterでシェアする

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

    PHPのみで実装[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やタイトルを先に変数に代入しておき、onclick属性でシェア画像を小窓に表示する処理を加えています。

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

    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ファイルに記述しておく。

    //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タグの中身をそれぞれ下のように。小窓のwindowサイズを全て一緒にするのであれば引数はthis(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>
    

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

    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>
    

    だいぶスッキリしていますね。続いて、javascript側の処理です。引数にsns名、記事url、シェアの説明文(タイトル)を持つ、新しい関数を用意します。とりあえず先にコードを。

    function sns_window(sns, share_url, share_title){
      var size = "",
             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. -

    コメントする

    CAPTCHA


    TOPへ Top