20150503_eyecatch

WordPress でオリジナルの SNS シェアボタンを実装する方法

2015年12月1日追記 : Twitter のツイート数取得 API count.json の提供終了に伴い、内容を修正しています。

EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。

目次

  • Facebook
    • 事前知識: 公式ボタンの設置方法
    • オリジナルボタンの実装方法
  • はてなブックマーク
    • 事前知識: 公式ボタンの設置方法
    • オリジナルボタンの実装方法
  • Twitter
    • 事前知識: 公式ボタンの設置方法
    • オリジナルボタンの実装方法
  • pocket
  • さいごに
    • PHP
    • JavaScript

Facebook

事前知識: 公式ボタンの設置方法

20140501_fbDevelpoers

公式ボタンを設置するには、Facebook の開発者向けのページにアクセスして、専用のコードをページに貼り付けます。ページの真ん中にある<layout>を選択し、<Get Code>ボタンをクリックします。

Share buttons – Facebook Developers
https://developers.facebook.com/docs/plugins/share-button

HTML

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div>

data-href はシェアしたいページの URL、 data-layout はボタンのレイアウトです。

JavaScript

以下のコードを body の直下に設置します。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

オリジナルボタンの実装方法

PHP

下記のシェア用の URL に現在のページ URL を取得してエンコードさせたものを指定してあげましょう。指定するにはメインループ内で <?php echo urlencode(get_permalink()); ?> を使えば OK です。span の要素内には API で取得したシェア数が入るので、マークアップの時点では空の状態です。

https://www.facebook.com/sharer/sharer.php?u={URL}
<a class="btnShare btnShare--fb" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>">
  <span class="count count--fb"></span>
  <svg viewBox="0 0 9 18" role="img" area-labelledby="title desc" width="7px" height="16px">
    <use xlink:href="<?php echo get_template_directory_uri(); ?>/assets/images/sprite-global.symbol.svg#icon_shareFb"></use>
  </svg>
  <span class="btnShare__text">Share</span>
</a>

EXP の場合、アイコン部分は svg スプライトを使用していますが、ここら辺は各自やりやすいものを使って下さい。

JavaScript(jQuery)

Facebook のシェア数取得には、下記の API を使います。

http://graph.facebook.com/?id={URL}

http://graph.facebook.com/?id= 以下に encodeURIComponent(location.href) を記述して、現在のページ URL を取得してエンコードし、クエリ文字列として指定します。あとは Ajax で JSON データを取得して、カウント数を出力します。

var facebook = {
  init: function() {

    this.open();

    // シェア数取得
    var url = 'http://graph.facebook.com/?id=' + encodeURIComponent(location.href);
    $.ajax({
      url: url,
      dataType: 'jsonp',
      success: function(json) {
         // 変数 count に三項演算子を代入
         // 条件式 json.shares が ture なら json.shares の値を返し、false なら 0 を返す
        var count = json.shares ? json.shares : 0;
        // #main の中の .snsShare__count--fb を含む HTML 要素内にシェア数を出力させる 
        $('#main').find('.snsShare__count--fb').html(count);
      }
    });
  },
  // ボタンをクリックした時にシェア用のポップアップウィンドウを開く
  open: function() {
    var $target = $('#main').find('.snsShare__icon--fb');
    $target.on('click', function(event) {
      event.preventDefault();
      window.open($(this).attr('href'), 'facebook', 'width=670, height=400, menubar=no, toolbar=no, scrollbars=yes');
    });
  }
}
facebook.init();

Facebook の場合、http://graph.facebook.com/?id={URL} をたたくと、下記のような JSON データが返ってきます。例として、前回の記事「WordPress のオリジナルテーマ開発で使用した技術やツールまとめ」の URL を使ってみます。

http://graph.facebook.com/?id=http%3A%2F%2Fwp-e.org%2F2015%2F04%2F06%2F5905%2F

出力結果

{
   "id": "http://wp-e.org/2015/04/06/5905/",
   "shares": 83
}

shares という key に対して、83 という値(=シェア数)が返ってきました。この例では Ajax で API へのリクエストを出し、結果を変数 json で受け取っているので json.shares としてあげると、シェア数を取り出すことができます。

count = json.shares ? json.shares : 0;

はてブ

事前知識: 公式ボタンの設置方法

20150501_haDevelopers

以下の URL にアクセスして、専用のコードをページに貼り付けます。

はてなブックマークボタン
http://b.hatena.ne.jp/guide/bbutton

オリジナルボタンの実装方法

PHP

マークアップは Facebook と同じで、シェア用の URL に <?php echo urlencode(get_permalink()); ? を記述します。

http://b.hatena.ne.jp/add?mode=confirm&url={URL}
<a class="btnShare btnShare--ha" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(get_the_title()); ?>">
  <span class="count count--ha"></span>
  <svg viewBox="0 0 19 17" role="img" area-labelledby="title desc" width="14px" height="12px">
    <use xlink:href="<?php echo get_template_directory_uri(); ?>/assets/images/sprite-global.symbol.svg#icon_shareHa"></use>
  </svg>
  <span class="btnShare__text">Bookmark</span>
</a>

JavaScript

JS も手順は Facebook と同じです。シェア数取得には、以下の API を使います。

http://api.b.st-hatena.com/entry.count?url={URL}

はてブの場合、API の出力結果とカウント数が0の場合(=データが空の場合)は0ではなく空白を返すのが Facebook と違う点です。

var hatena = {
  init: function() {

    this.open();

    var url = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(location.href);
    $.ajax({
      url: url,
      dataType: 'jsonp',
      success: function(json) {
        var count = json ? json : 0;
        $('#main').find('.snsShare__count--ha').html(count);

        // データが存在しない場合は0を返す
        if(typeof(count) == 'undefined'){
          count = 0;
        }
      }
    });
  },
  open: function() {
    var $target = $('#main').find('.snsShare__icon--ha');
    $target.on('click', function(event) {
      event.preventDefault();
      window.open($(this).attr('href'), 'はてなブックマークブックマークレット', 'width=550, height=420, menubar=no, toolbar=no, scrollbars=yes');
    });
  }
}
hatena.init();

ここで、はてブの API の出力結果を確認してみましょう。http://api.b.st-hatena.com/entry.count?url={URL} をたたくと、下記の出力結果のようにダイレクトに値を返してくれます。そのため、var count 以下は json ? json : 0; としてあげれば OK です。

http://api.b.st-hatena.com/entry.count?url=http%3A%2F%2Fwp-e.org%2F2015%2F04%2F06%2F5905%2F

出力結果

70

Twitter

事前知識: 公式ボタンの設置方法

20150501_twDevelopers

Twitter の開発者用ページにアクセスして専用コードを貼り付けます。

Tweet Button – Twitter Developers
https://dev.twitter.com/web/tweet-button

HTML

<a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>

JavaScript

window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));

オリジナルボタンの実装方法

公式ボタンを使っていた方は知っているかと思いますが、Twitter はカウント数をクリック(タップ)するとツイート一覧を見ることができます。そのため、マークアップは次のようになります。

Twitter はツイート数の表示ができなくなったため、マークアップは次のようになります。

<a class="btnShare btnShare--tw" href="https://twitter.com/share?&amp;text=<?php echo urlencode(get_the_title()); ?>&amp;via=WPE34">
  <svg viewBox="0 0 20 17" role="img" area-labelledby="title desc" width="17px" height="13px">
    <use xlink:href="<?php echo get_template_directory_uri(); ?>/assets/images/sprite-global.symbol.svg#icon_shareTw"></use>
  </svg>
  <span class="btnShare__text">Tweet</span>
</a>

記事のシェア

https://twitter.com/share?&amp;text=<?php echo urlencode(get_the_title()); ?>&amp;via=WPE34"

text=<?php echo urlencode(get_the_title()); ?> の様に text パラメータに記事タイトルを渡し、ツイートのフォームに初期値としてセットしています。&amp;via=WPE34 はユーザーアカウントの指定ですね。

ついでなので、よく使いそうなパラメータをリストアップしてみました。全てのパラメータは開発者用ページで確認できます。

url
URL を指定すると、その URL が投稿フォームに入力される。
text
テキストを指定すると、投稿フォームに入力される。ページタイトルや記事タイトルを指定することが多い。
via
ユーザーアカウント(@useraccount)を指定すると投稿フォームに入力される。先頭のアットマーク(@)は不要。
related
ユーザアカウントを指定すると、ユーザーがシェアした後に「そのアカウントをフォローしませんか?」と勧める画面が表示される。先頭のアットマーク(@)は不要で、複数指定する場合はコロン(:)で区切る。
count
ボタンのレイアウト(形)を指定する。horizontal がデフォルトでカウントが右に表示、vertical はカウントがボタンの上部に表示、none はカウント表示なし。
lang
Twitter のボタン表示の言語を国コードで指定する。英語の場合は en。

JavaScript

シェア用のポップアップウィンドウを開きます。Facebook やはてブと手順は同じです。

var twitter = {
  open: function() {
    var $target = $('#main').find('.snsShare__icon--tw');
    $target.on('click', function(event) {
      event.preventDefault();
      window.open($(this).attr('href'), 'Twitter でリンクを共有する', 'width=550, height=400, menubar=no, toolbar=no, scrollbars=yes');
    });
  }
}
twitter.init();

pocket

20150501_poDevelopers

Pocket Button
https://getpocket.com/publisher/button

pocket は記事の冒頭でも触れたように、API が公開されていないので公式ボタンの設置方法のみの紹介です。まずは pocket のサイトにアクセスして、ボタンのスタイルを選択します。スタイルを選択したら、下記のコードを貼り付けてください。

HTML

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>

ボタンのスタイルによって data-pocket-count の値が vertical horizontal none に変化します。

JavaScript

<script>!function(d,i){
    if(!d.getElementById(i)){
    var j=d.createElement("script");
    j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";
    var w=d.getElementById(i);
    d.body.appendChild(j);}
}
(document,"pocket-btn-js");</script>

さいごに

いかかでしたでしょうか?
オリジナルボタンの実装はやはり一手間加える必要がありますが、その代わりデザインの統一感やオリジナリティを出すことができますよね。EXP ではボタンとしてもっと目立たせる感じにしてみました。

それでは、ソースコードをまるっと貼り付けて記事を締めくくりたいと思います。

PHP

JavaScript(jQuery)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です