この記事は1年以上前の記事のため、内容が古い可能性があります。
この記事は、『レーティング機能と「いいね！」を連動させる【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）
004 | $fb_app_id = "App IDをここに入力"; |
005 | $fb_app_secret = "App Secretをここに入力"; |
008 | $fb_my_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; |
009 | $fb_my_url_split = explode("?", $fb_my_url); |
010 | $fb_my_url = $fb_my_url_split[0]; |
012 | $fb_code = $_GET["code"]; |
013 | $fb_user_id = $_SESSION["fb_user_id"]; |
015 | if(empty($fb_code) && empty($fb_user_id)) { |
016 | $fb_get_userdata = "0"; |
017 | }elseif(!empty($fb_user_id)){ |
018 | $fb_get_userdata = "1"; |
019 | }elseif(!empty($fb_code)){ |
022 | $fb_token_url = "https://graph.facebook.com/oauth/access_token?" |
023 | ."client_id=".$fb_app_id |
024 | ."&redirect_uri=".urlencode($fb_my_url) |
025 | ."&client_secret=".$fb_app_secret |
027 | $fb_access_token = file_get_contents($fb_token_url); |
030 | $fb_graph_url = "https://graph.facebook.com/me?".$fb_access_token; |
031 | $fb_user = json_decode(file_get_contents($fb_graph_url)); |
034 | $fb_get_userdata = "0"; |
036 | $fb_get_userdata = "1"; |
037 | $fb_user_id = $fb_user->id; |
038 | $_SESSION["fb_user_id"] = $fb_user_id; |
046 | if(file_exists("csv/rating.csv")){ |
047 | $fp = fopen("csv/rating.csv", "r"); |
048 | while ($data = fgets($fp)) { |
049 | $data = rtrim($data); |
050 | $data_split = explode(",", $data); |
051 | if($data_split[1] == $fb_my_url){ |
053 | if($data_split[2] == "1"){ |
063 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
064 | <html xmlns="http://www.w3.org/1999/xhtml"> |
066 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
067 | <title>レーティング機能と「いいね！」を連動させる【Facebook】</title> |
069 | <script type="text/javascript" src="js/jquery.min.js"></script> |
071 | <script type="text/javascript"> |
073 | if (window.attachEvent) { |
074 | window.attachEvent("onload", watchRating); |
076 | window.addEventListener("load", watchRating, false); |
079 | function watchRating(){ |
080 | if($("#rating_button") != ""){ |
081 | timerID = setInterval(function () { |
082 | if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) { |
084 | clearInterval(timerID); |
090 | function ratingSave(select_vote){ |
091 | var php_url = "rating_save.php"; |
092 | var fb_my_url = "<?php echo $fb_my_url; ?>"; |
093 | var fb_user_id = "<?php echo $fb_user_id; ?>"; |
095 | if(select_vote == "1"){ |
096 | $('#rating_button').html("「いいね！」に投票されました。"); |
097 | }else if(select_vote == "0"){ |
098 | $('#rating_button').html("「だめだね！」に投票されました。"); |
103 | {"select_vote":select_vote, "fb_my_url":fb_my_url, "fb_user_id":fb_user_id}, |
104 | function(message, status) { |
105 | if ('error' != status){ |
106 | message_split = message.split("/"); |
107 | $('#like_vote_id').html(message_split[0]); |
108 | $('#count_vote_id').html(message_split[1]); |
122 | if($fb_get_userdata == "1"): |
125 | <div id="rating_button"> |
126 | <p>以下のリンクをどちらかクリックしてください。（※いいね！を押すとFacebookに反映されます。）</p> |
128 | <div id="fb-root"></div> |
129 | <script src="http://connect.facebook.net/ja_JP/all.js#appId=225227424196030&xfbml=1"></script> |
130 | <fb:like href="<?php echo $fb_my_url; ?>" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like> |
132 | <a href="javascript:void(0);" onclick="ratingSave('0')">だめだね！</a> |
140 | $fb_dialog_url = "http://www.facebook.com/dialog/oauth?" |
141 | ."client_id=".$fb_app_id |
142 | ."&redirect_uri=".urlencode($fb_my_url); |
145 | <p>レーティングに参加するにはFacebookのアカウントが必要です。<br /> |
146 | またFacebook用アプリの「（アプリ名）」を許可する必要があります。</p> |
147 | <p style="margin:5px 0px;"><a href="http://www.facebook.com/index.php" target="_blank">Facebookアカウントを取得する</a> | <a href="<?php echo $fb_dialog_url; ?>">アプリを許可する</a></p> |
151 | <p><span id="count_vote_id"><?php echo $fb_count_vote; ?></span>人中、<span id="like_vote_id"><?php echo $fb_like_vote; ?></span>人がいいね！と言っています。</p> |
■追加部分
72～87行目：いいね！ボタンに変化がないかを監視。ボタンが押されたら、ratingSaveを実行。
127～129行目：3-1で取得した「いいね！」ボタンを貼り付ける。fb:likeタグのhrefには、開いているページのURLが入るようにする。
131行目の「だめだね！」ボタンはSTEP2から変更する必要はありません。
※今度のサンプルコードの実行例はFacebookに反映されるのでご注意ください。
※この段階では、まだ「だめだね！」ボタンが無限に押せてしまいます。
サンプルコードの実行例
STEP1へ｜STEP2へ｜STEP3へ｜STEP4へ
コメントする
※メールアドレスが公開されることはありません。