この記事は、『レーティング機能と「いいね！」を連動させる【Facebook】：STEP2』の続きの記事です。
3. 「いいね！」と「だめだね！」ボタンを設置。
■3-1. 「いいね！」ボタンのコードを取得する
こちらのサイトから「いいね！」ボタンのコードを取得してください。
このとき注意しなくてなならないのは、「XFBML」形式で取得する必要があるということです。「iframe」形式では正常に動作しませんのでご注意ください。
■3-2. 「いいね！」ボタンの設置と、それを監視するスクリプトの追加
STEP2の「2-2. Ajax Requestを用いて上記のプログラム（rating_save.php）を呼び出す」で作成したサンプルコードに手を加えます。
なお、「いいね！」ボタンを監視するスクリプトは、こちらのサイトを参考にさせていただきました。
Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す jsdo.it Share JavaScript, HTML5 and CSS
サンプルコード（step3.php）
[PHP]
id;
$_SESSION["fb_user_id"] = $fb_user_id;
}
}
//これまでのレーティングデータを取得する
$fb_count_vote = 0;
$fb_like_vote = 0;
if(file_exists("csv/rating.csv")){
$fp = fopen("csv/rating.csv", "r");
while ($data = fgets($fp)) {
$data = rtrim($data);
$data_split = explode(",", $data);
if($data_split[1] == $fb_my_url){
$fb_count_vote++;
if($data_split[2] == "1"){
$fb_like_vote++;
}
}
}
fclose($fp);
}
?>
if (window.attachEvent) { //IE用 window.attachEvent("onload", watchRating); }else{ window.addEventListener("load", watchRating, false); }
function watchRating(){ if($("#rating_button") != ""){ timerID = setInterval(function () { if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) { ratingSave('1'); clearInterval(timerID); }; }, 200); } }
function ratingSave(select_vote){ var php_url = "rating_save.php"; var fb_my_url = ""; var fb_user_id = "";
if(select_vote == "1"){ $('#rating_button').html("「いいね！」に投票されました。"); }else if(select_vote == "0"){ $('#rating_button').html("「だめだね！」に投票されました。"); }
$.post( php_url, {"select_vote":select_vote, "fb_my_url":fb_my_url, "fb_user_id":fb_user_id}, function(message, status) { if ('error' != status){ message_split = message.split("/"); $('#like_vote_id').html(message_split[0]); $('#count_vote_id').html(message_split[1]); } }, "html" ); }
レーティングに参加するにはFacebookのアカウントが必要です。
またFacebook用アプリの「（アプリ名）」を許可する必要があります。
人中、人がいいね！と言っています。
[/PHP]
■追加部分
72～87行目：いいね！ボタンに変化がないかを監視。ボタンが押されたら、ratingSaveを実行。
127～129行目：3-1で取得した「いいね！」ボタンを貼り付ける。fb:likeタグのhrefには、開いているページのURLが入るようにする。
131行目の「だめだね！」ボタンはSTEP2から変更する必要はありません。
※今度のサンプルコードの実行例はFacebookに反映されるのでご注意ください。
※この段階では、まだ「だめだね！」ボタンが無限に押せてしまいます。