Facebookの「いいね数」をGraphAPI v2.7を使ってajaxで取得してみる
こんにちはシステムエンジニアの今井です。
先日とある案件で、Facebookの「いいね数」を取得するためにGraphAPIのv2.7を使ったので、そのとき学んだことをここで紹介したいと思います。
今回行いたいこと
https://www.spiceworks.co.jp/blog/?p=7603
のブログの「いいね数」をGraph APIを使いajax通信で取得して
https://www.spiceworks.co.jp/hoge.html 上で取得した「いいね数」を表示する。
↑hoge.html はテスト用に作成したページですので、アクセスしても何も表示されません。
以下は上記のブログの「いいね数」を取得した例になります。
ajaxで取得するメリット
ajaxを使わずサーバサイド側（PHPプログラム）でGraphAPIを呼び出して「いいね数」を取得しHTMLに描写することもできます。
ただこの時、例えばPHPで20件のページの「いいね数」をGraphAPI経由で取得してからHTMLで表示しようとすると、20件分のデータを取得するまでHTMLが表示されずレスポンスが遅いページになってしまいます。
（１つのデータの取得に0.2秒かかるとしても20件あれば、4秒になってしまいます。）
ajaxを使うことで、ページを表示する処理と、「いいね数」を取得する処理を分けることができるので、ページ読み込みの待ち時間を減らすことができます。
実現できること
今回紹介する内容を利用することで以下のようなことができるようになります。
・WordPressのTOPページでブログ一覧を表示
・ブログ一覧のタイトルの横に「いいね数」を表示
以下は弊社ブログ一覧ページの表示例になります。タイトル下にある数が取得した「いいね数」です。
前置きが長くなりましたが、Facebookの「いいね数」をGraphAPI v2.7を使ってajaxで取得する内容を紹介します。
目次
1. 対象サイトのFacebookアプリを作成します。
2. GraphAPIでアクセストークンを取得します。
3. Ajaxを使ってGraphAPIから「いいね数」を取得します。
1. 対象サイトのFacebookアプリを作成します。
http://www.spiceworks.co.jp 用のFacebookアプリを作成します。
まず公開するURLのFacebookアプリを作成します。ここで作成したアプリは後々、GraphAPIで使います。
①：Facebookにログインします。
②：Facebook For Developerページにアクセスします。
https://developers.facebook.com/
③：右上の「マイアプリ」メニューをクリックして「新しいアプリを追加」を押します。
④：「新しいアプリIDを作成」のポップアップが出ますので、
「表示名」には、そのサイトの名前を入力してください。
「連絡先メールアドレス」には連絡可能なメールアドレスを入力してください。
「カテゴリ」にはそのサイトにふさわしいものを選択してください。
入力が終わりましたら、「アプリIDを作成」をクリックしてください。
⑤：次にセキュリティチェック画面が出ますので、ふさわしいものを選択して「送信」ボタンを押してください。
⑥：⑤の処理が完了しますと、自動的にアプリの画面へ移行します。
⑦：左メニューの「設定」をクリックすると以下の画面が表示されます。「連絡先メールアドレス」にメールアドレスを入力します。その後「＋プラットフォームを追加」ボタンをクリックします。
⑧：プラットフォーム選択画面が表示されますので、「ウェブサイト」を選択します。
⑨：「アプリドメイン」に対象のドメインを記入します。また「ウェブサイト」の箇所には対象のURLを記入します。記入が終わりましたら、「変更を保存」をクリックします。
＊今回はwww.spiceworks.co.jpの「いいね数」データを取得するので以下の様に記入しました。
⑩：左メニューの「アプリレビュー」をクリックして、「公開しますか？」を「はい」にします。
⑪：「アプリを公開しますか？」の確認画面が表示されますので、「確認」を押します。
以上で、対象サイトのFacebookアプリが作成できます。
次はGraphAPI上での作業を紹介します。
2. GraphAPIでアクセストークンを取得します。
GraphAPIから「いいね数」を取得するために、あらかじめGraphAPIでアクセストークンを取得します。
以下は取得するときの手順になります。
①：GraphAPIにアクセスします。
ここからGraphAPIへアクセスします。
②：右上あたりの「Graph API Explorer」からさきほど作成したアプリを選択します。
※ここではさきほど作成したアプリ名「hoge」を選択します。
③：右上あたりの「Get Token」をクリックして「Get App Token」を選択します。その後「アクセストークン」欄に表示されたものが今回取得したいアクセストークンになります。
以上が、GraphAPIのアクセストークンの取得手順になります。
3. Ajaxを使ってGraphAPIから「いいね数」を取得します。
ここからGraphAPIを使って特定のURLの「いいね数」を取得する処理を解説します。
①：まず取得した「いいね数」を表示するためのHTMLを準備します。
・ファイル名はhoge.htmlとします。
・jQueryを利用するのでjQueryをgoogleのCDNから呼び出します。
・「いいね数」を取得する処理をget_like_cnt.jsとします。このファイルを呼び出します。
・取得した「いいね数」は<table class=”like_list”>内で表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>いいね数を表示するHTML</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="./get_like_cnt.js"></script>
<style>
table td{
padding: 10px;
}
</style>
</head>
<body>
<table class="like_list" border="1">
<tr><th>URL</th><th>いいね数</th></tr>
</table>
</body>
</html>
②：GraphAPIから取得するための処理を書いたjsファイルを作成します。
・ファイル名はget_like_cnt.jsとします。
$(function(){
var url_list = ["https://www.spiceworks.co.jp/blog/?p=7603"];
var access_token = 'ここにアクセストークンを記入します。';
for (i in url_list) {
var url = url_list[i];
$.ajax({
url: 'https://graph.facebook.com/v2.7/?id=' + url + '&access_token=' + access_token,
dataType:'jsonp',
cache: false
}).done(function(data){
var cnt = data.share.share_count;
var u = data.id;
$('table.like_list').append('<tr><td>' + u +'</td><td>'+ cnt +'</td></tr>');
});
}
});
③：hoge.htmlを実行した結果
以下の様に表示されます。
まとめ
以上で、GraphAPIとajaxを使ってFacebookの「いいね数」を取得することができるようになりました。
Facebookの「いいね数」をGraphAPI経由で取得するときは参考にしてみてください。
