JavaScript関連

レーティング機能と「いいね!」を連動させる【Facebook】:STEP3

この記事は、『レーティング機能と「いいね!」を連動させる【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
session_start();

$fb_app_id = "App IDをここに入力";
$fb_app_secret = "App Secretをここに入力";

//現在開いているページのURL
$fb_my_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$fb_my_url_split = explode("?", $fb_my_url);
$fb_my_url = $fb_my_url_split[0];

$fb_code = $_GET["code"];
$fb_user_id = $_SESSION["fb_user_id"];

if(empty($fb_code) && empty($fb_user_id)) {
	$fb_get_userdata = "0";
}elseif(!empty($fb_user_id)){
	$fb_get_userdata = "1";
}elseif(!empty($fb_code)){
				
	// Facebook側からトークンを取得
	$fb_token_url = "https://graph.facebook.com/oauth/access_token?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url)
		."&client_secret=".$fb_app_secret
		."&code=".$fb_code;
	$fb_access_token = file_get_contents($fb_token_url);
					
	// トークンを使用して、graph APIから名前を取得
	$fb_graph_url = "https://graph.facebook.com/me?".$fb_access_token;
	$fb_user = json_decode(file_get_contents($fb_graph_url));
				
	if(empty($fb_user)){
		$fb_get_userdata = "0";
	}else{
		$fb_get_userdata = "1";
		$fb_user_id = $fb_user->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);
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>レーティング機能と「いいね!」を連動させる【Facebook】</title>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
	<script type="text/javascript">
	
		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 = "<?php echo $fb_my_url; ?>";
			var fb_user_id = "<?php echo $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"
			);
		}
	</script>
	
</head>

<body>

	<?php
	//ユーザ基本データが取得できた場合。
	if($fb_get_userdata == "1"):
	?>
	
	<div id="rating_button">
		<p>以下のリンクをどちらかクリックしてください。(※いいね!を押すとFacebookに反映されます。)</p>
		
		<div id="fb-root"></div>
		<script src="http://connect.facebook.net/ja_JP/all.js#appId=225227424196030&amp;xfbml=1"></script>
		<fb:like href="<?php echo $fb_my_url; ?>" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like> 
		
		<a href="javascript:void(0);" onclick="ratingSave('0')">だめだね!</a>
		
	</div>
	
	<?php
	//取得できなかった場合。
	else:
		//アプリ許可用のURL
		$fb_dialog_url = "http://www.facebook.com/dialog/oauth?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url);
	?>
	
	<p>レーティングに参加するにはFacebookのアカウントが必要です。<br />
	またFacebook用アプリの「(アプリ名)」を許可する必要があります。</p>
	<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>
	
	<?php endif; ?>
	
	<p><span id="count_vote_id"><?php echo $fb_count_vote; ?></span>人中、<span id="like_vote_id"><?php echo $fb_like_vote; ?></span>人がいいね!と言っています。</p>
	
</body>
</html>

■追加部分

72~87行目:いいね!ボタンに変化がないかを監視。ボタンが押されたら、ratingSaveを実行。

127~129行目:3-1で取得した「いいね!」ボタンを貼り付ける。fb:likeタグのhrefには、開いているページのURLが入るようにする。

131行目の「だめだね!」ボタンはSTEP2から変更する必要はありません。

※今度のサンプルコードの実行例はFacebookに反映されるのでご注意ください。

※この段階では、まだ「だめだね!」ボタンが無限に押せてしまいます。

サンプルコードの実行例

 

STEP1へSTEP2へ|STEP3へ|STEP4へ

レーティング機能と「いいね!」を連動させる【Facebook】:STEP2

この記事は、『レーティング機能と「いいね!」を連動させる【Facebook】:STEP1』の続きの記事です。

STEP2からjqueryを使用しますので、あらかじめこちらのサイトからダウンロードを行ってください

 

2. 「いいね!」「だめだね!」ボタンが押されたとき、そのデータをcsv形式で保存するプログラムを作成。

ボタンが押された際、csv形式でデータを保存するプログラムを作成します。
保存するデータは

  • ボタンを押したユーザのFacebookID
  • ページのURL
  • 「いいね!」「だめだね!」のどちらのボタンを押したか

です。

(さらに…)

レーティング機能と「いいね!」を連動させる【Facebook】:STEP1

ここで言うレーティング機能とは

「80人中、60人がいいね!と言っています。」

という機能の事を指します。

 

独自でこのレーティング機能を作る上で、「いいね!」ボタンを連動させるには、

  • 「いいね!」に相対するボタン、つまりBADボタンをつける。(ここでは以降BADボタンのことを「だめだね!」ボタンということにします。)
  • 「いいね!」と「だめだね!」ボタンを押した回数を、こちら側が保持する。(※1)
  • 「いいね!」または「だめだね!」ボタンが押されたら、そのユーザはそのページの両ボタンを押せなくする。

の3つが必要となります。

※1:Facebookには「だめだね!」ボタンに該当する機能が有りませんので、誰が押したか、何回ボタンが押されたかのデータはこちらが保持する必要が有ります。
なお、WordpressやMTでレーティング機能を設置したい場合はDISQUSというシステムもあるので、そちらを利用したほうが早いかもしれません^^;

 

作成手順としては

  1. ログインしているユーザのFacebookIDを取得する機能を設置。
    Facebookアカウントをもっていないユーザ、またはFacebookIDを取得するアプリを許可していない場合はボタンを表示しないプログラムを作成。
  2. 「いいね!」「だめだね!」ボタンが押されたとき、そのデータをcsv形式で保存するプログラムを作成。
  3. 「いいね!」と「だめだね!」ボタンを設置。
  4. すでにボタンが押されている場合はボタンを押せなくするプログラムを作成。

 

なお、1.における「FacebookID」というのは、Facebookにログインする際に使用するIDではなく、Facebook登録時に自動的に連番で割り振られる番号のことです。

「FacebookID」をわざわざ取得する必要がある理由は、
『「いいね!」または「だめだね!」ボタンが押されたら、そのユーザはそのページの両ボタンを押せなくする。』
という点を制御するためです。

「いいね!」ボタンはご存知の通り、一度押したらそのページではもう押せなくなります。しかし「だめだね!」はこちらで用意する機能ですので、誰が押しているかを取得する必要が有ります。

もちろんメールアドレスを入力させるとかIPで制限させるなどの手段も有りますが、ここではFacebookIDを元に制限させる仕様として記述していきます。

 

■必要条件

  • PHP5.2以上が動作するサーバ。
  • facebookのアカウントを持っている。
  • facebook ディベロッパー登録が完了している。(ディベロッパー登録をしていない方は、こちらのサイトをご参照ください。)
  • allow_url_fopenがOnになっている。
  • jqueryを使用しますので、あらかじめこちらのサイトからダウンロードを行ってください。

(さらに…)

「いいね!」ボタンが押されたとき、スクリプトを実行させる方法【Facebook・Javascript】

メモ。

「いいね!」ボタンが押された瞬間、こちらが用意しているスクリプト(javascript)を実行させたい!

という案件があったため、ググっていると下記のサイトを見つけました。

Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す - jsdo.it - Share JavaScript, HTML5 and CSS

 

注意点として、「いいね!」ボタンのコードは「XFBML」で記述する必要があります。(iframeじゃ多分ダメ。)「いいね!」ボタンのコード取得はこちら

また、jQueryも読み込んでおく必要が有ります。jQueryのダウンロードはこちら

 

「いいね!」ボタンを設置したページに以下のようなスクリプトを埋め込みます。

■スクリプト(javascript)の例


if (window.attachEvent) {
	window.attachEvent("onload", initFunc);
}else{
	window.addEventListener("load", initFunc, false);
}

function initFunc(){
	timerID = setInterval(function () {
		if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) {
			~実行させたいプログラムをここに記述~
			clearInterval(timerID);
		};
	}, 200);
}

01~04行:ページが読み込まれたら「initFunc()」関数を実行します。

07~14行:setIntervalでインターバルタイマーを設定し、 $('.fb_edge_comment_widget.fb_iframe_widget')に変化がないか見張ります。
(いいね!ボタンの状態が変化すると、$('.fb_edge_comment_widget.fb_iframe_widget')の状態も変化するみたいです。)
変化があったら「~実行させたいプログラムをここに記述~」部分に記述されているスクリプトが実行されます。
最後に、clearIntervalでインターバルタイマーをクリアします。

■注意点

参考にさせていただいたサイトにも書いてありますが、上記の方法では押した瞬間にスクリプトを実行させることは可能ですが、再度ユーザが訪れたとき、そのユーザがすでに「いいね!」ボタンを押しているかどうかは、判断できません。

これを判断するにはFQLを使うか(動作未確認)、「いいね!」ボタンを押してくれたユーザのFacebookIDを取得し、データベースや外部ファイルに蓄積しておく、という方法が考えられます。

ユーザのFacebookIDを取得する方法はこちらのページをご参照ください。

※ここで言うFacebookIDというのはログイン時に使用するIDではなく、登録時に連番で割り当てられる番号のことを指します。

マップ表示用スクリプトをバージョンアップしました[バージョン1.4b2]

マップ表示用スクリプト(GoogleマップAPI v3で地図とマーカー・バルーンを表示するスクリプト)を少しバージョンアップ(version1.4b2)しました。(ダウンロードはこちら

version1.4bからの変更点は内部処理のみなので、差し替えるだけで動作します。

■使い方はこちら:マーカー個別版マーカー複数板

■主な変更箇所

  • マーカー複数版で使用する際、住所1件ごとに「get_coord.php」にアクセスすると効率悪そうなので、まとめてアクセスする仕様に変更しました。
    これにより表示速度が速くなりました。
    比較:v1.4b (旧)v1.4b2 (新) ※ただしすでにキャッシュがとられている場合の比較です。
  • Firefoxでは「nth-child」が意図通りの挙動にならないため、ブラウザごとに動作を分けました。(「アドレス」と「座標」をミックスしている時にFirefoxで不具合が起きていたため)
  • 住所や座標の記述に半角スペースや改行コード、HTMLタグが入っていると不具合起きそうなので、座標取得時は取り除くようにしました。

 

半角スペースを取り除くための関数はこちらのサイトのプログラムを使わせていただきました。

浮浪プログラマの始末書さんのサイト

GoogleマップAPI v3で地図とマーカー・バルーンを表示(個別版) version1.4b

2012.06.30 バージョンアップしました。(version1.4b4)

2011.11.11 バージョンアップしました。(version1.4b3)

2011.08.13 バージョンアップしました。(version1.4b2)


複数版同様、個別版でも、住所から取得した座標はサーバーにキャッシュ(CSV形式)として残す仕様となりました。

スクリプトをダウンロードする

サンプルを見る

 

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定(php.ini)で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

(さらに…)

GoogleマップAPI v3で地図とマーカー・バルーンを表示(複数版) version1.4b

【追記】

2012.06.30 バージョンアップしました。(version1.4b4)

2011.11.11 バージョンアップしました。(version1.4b3)

2011.08.13 バージョンアップしました。(version1.4b2)


ここから本文

バージョン1.3で見つかった、「geocoder.geocodeを使用した住所からの座標取得は、一度に取得できる件数に制限がある」という問題に対して、修正を行ったバージョンをアップロードしました。

スクリプトをダウンロードする

サンプルを見る

 

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定(php.ini)で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

(さらに…)

PHPで座標取得【Google Map API v3】

geocoder.geocodeを使用した住所からの座標取得は、一度に取得できる件数に制限があることが判明し、どうしたもんかな~といろいろ調べていたところ、こんな記事を見つけました。

[googlemap]phpで住所から座標を割り出す

PHPからお手軽に住所の座標を取得できるっぽい。

しかも実験した結果、10件超えても座標を取得できるではないか!

このプログラムをAjax.Requestで呼び出して処理してもらえば行けそうな感じ。

それにどうせPHP使うならファイル出力できるから、一度でも取得した座標データは外部ファイルに書き出して、以降はそれを参照すればいいし。

お~、これはいけそう!

早速作ってみようかな。

nandani | 2011年05月14日 | コメント(0) | トラックバック(0) | JavaScript関連

コメントを投稿できませんでした。エラー: 不正な要求です。【MT】

かなりつまったのでメモ。

最近はコメントフォームを設けるケースが少なかったので、やり方をすっかり忘れてました。

コメントを投稿しても

コメントを投稿できませんでした。エラー: 不正な要求です。

のエラーが続出。

なんでだー!と頭をかいていたら、こちらのサイトに答えが書いていました。

MTで「コメントを投稿できませんでした。エラー: 不正な要求です。」 : WEBクリエイターのメモ帳

答えは「mt.js」

これまでは(コメントを設けるケースが無かったので)特に必要としておらず、大抵の場合は削除しており、今回も疑いなく削除してました・・・

しかし、コメント欄を設ける場合は、かならずサイトのhead内に

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

をつける必要があるので注意しましょう。(※テンプレート名を変えている場合は任意に変更して下さい)

jQueryとprototype.jsを同時に使用する場合

メモ

少々手間ですが、以下のサイトのようにするとうまくいきます。

jQueryとprototype.jsを共存させる方法 | CSS Lecture

nandani | 2011年02月22日 | コメント(0) | トラックバック(0) | JavaScript関連

Copyright(c) 2010 - 2022 ダリの雑記