2015年12月1日追記 : Twitter のツイート数取得 API count.json
の提供終了に伴い、内容を修正しています。
EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。
目次
- Facebook
- 事前知識: 公式ボタンの設置方法
- オリジナルボタンの実装方法
- はてなブックマーク
- 事前知識: 公式ボタンの設置方法
- オリジナルボタンの実装方法
- Twitter
- 事前知識: 公式ボタンの設置方法
- オリジナルボタンの実装方法
- さいごに
- PHP
- JavaScript
事前知識: 公式ボタンの設置方法
公式ボタンを設置するには、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": "https://wp-e.org/2015/04/06/5905/",
"shares": 83
}
shares
という key に対して、83
という値(=シェア数)が返ってきました。この例では Ajax で API へのリクエストを出し、結果を変数 json
で受け取っているので json.shares
としてあげると、シェア数を取り出すことができます。
count = json.shares ? json.shares : 0;
はてブ
事前知識: 公式ボタンの設置方法
以下の 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&url=<?php echo urlencode(get_permalink()); ?>&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 の開発者用ページにアクセスして専用コードを貼り付けます。
- 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?&text=<?php echo urlencode(get_the_title()); ?>&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?&text=<?php echo urlencode(get_the_title()); ?>&via=WPE34"
text=<?php echo urlencode(get_the_title()); ?>
の様に text パラメータに記事タイトルを渡し、ツイートのフォームに初期値としてセットしています。&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 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 ではボタンとしてもっと目立たせる感じにしてみました。
それでは、ソースコードをまるっと貼り付けて記事を締めくくりたいと思います。