ダリの雑記：WEBプログラム版

SNS関連

mixiページを作る 【新規登録方法】

mixiでも「Facebookページ」のようなページが作れるらしい。

ソーシャルページが作成できる「mixiページ」、ネット全体公開も

ということで、早速作成してみます。

 

まず、「mixiページnavi」というサイトにアクセスします。

http://page.mixi.co.jp/

「mixiページnavi」サイトの右側にある「ページ作成」ボタンをクリックしてください。

 

新規登録画面が開きます。

  • ページ名
  • カテゴリ
  • 友人に共有（共有する場合はチェックを入れる）

を入力し、「同意の上、ページを作成する」ボタンを押します。
（法人登録は結構めんどくさいので、ここでは飛ばします。）

 

確認画面が開きますので、その内容でよければ「作成する」ボタンを押してください。

 

これで新規登録完了です。

完了画面下にある「作成したmixiページへ」リンクをクリックすると、作成されたmixiページが開きます。

 

う～ん、超簡単！

mixiチェックの件もあるので、少し警戒してましたが、あっさり作成できました。

あとは画面右側にある、「管理者向けメニュー」の「ページ編集・管理」から基本情報などを登録してください。

 

■インターネット公開について。

「公開設定」にて「インターネット公開」している場合は、mixiユーザでなくてもそのページを見ることができます。

その際注意点として、

http://page.mixi.jp/public/recent_page_feed.pl?page_id=xxxx

というように「public/」を付けたURLでアクセスするようにしてください。

管理画面からアクセスすると「public/」がつかないから、インターネット公開用のURLが始め分からなかった・・・。どこかに書いてるのかな？

ちなみにpublic抜きのURL

http://page.mixi.jp/recent_page_feed.pl?page_id=xxxx

でもアクセス可能ですが、その場合、mixiにログインする必要があります。

 

■URL設定について。

「公開設定」にてmixiページのURLを、任意の英数字に変更できるようなのですが、それには50人以上にフォローされる必要があるそうです。

ここまでFacebookに合わせなくてもいいのにな～^^;

つか50人て。Facebookの倍じゃん。

 

■メニューについて

「フォト」や「ホワイトボード」など、任意に追加できるメニューは、「インターネット公開」されないみたい。facebookは出来るのになぁ・・・

タグ ：

nandani | 2011年08月31日 | コメント(0) | トラックバック(0) | SNS関連

レーティング機能と「いいね！」を連動させる【Facebook】：STEP4

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

 

すでにボタンが押されている場合はボタンを押せなくするプログラムを作成。

STEP3の「3-2. 「いいね！」ボタンの設置と、それを監視するスクリプトの追加」で作成したサンプルコードに手を加えます。

サンプルコード（step4.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_checked_vote = "";
$fb_count_vote = 0;
$fb_like_vote = 0;
$fb_checked_flag = 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++;
			}
			
			if($data_split[0] == $fb_user_id){
				if($data_split[2] == "1"){
					$fb_checked_vote = "いいね！";
				}else{
					$fb_checked_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"):
	
		//まだボタンが押されていない場合
		if(empty($fb_checked_vote)):
	?>
	
	<div id="rating_button">
		<p>以下のリンクをどちらかクリックしてください。（<b>※いいね！を押すとFacebookに反映されます。</b>）</p>
		<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></p>
	</div>
	
	<?php 
		//すでにボタンが押されている場合
		else: 
	?>
	
	<div>
		<?php echo $fb_checked_vote; ?>に投票済みです。
	</div>
	
	<?php endif; ?>
	
	<?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>

■変更部分

58～64行目：csvデータ取得中にて、FacebookIDとページのURLが一致したものがあれば、どのボタンを押したかを取得する。

133～154行目：ボタンを押したデータがcsvから取得できなければ、ボタンを表示。できればボタンを非表示にし、どのボタンを押したかを表示する。

サンプルコードの実行例

 

以上です。

 

すべて読まれた方はおつかれさまでした^^
長くなってすみません。

 

■追記補足

今回のサンプルでは、レーティングの数字において、ボタンを押したユーザの合計数も「いいね！」の合計数もこちら側が保持しているcsvデータを元に計算しています。

しかしFacebookをお使いの方はご存知かと思いますが、「いいね！」というのはFacebookにて取り消すことが出来ます。

ということはFacebookが保持している「いいね！」が押された回数と、csvデータから算出した数には誤差が起こりえますが、ここではあえてcsvデータの数字を使うことにしました。

もしFacebookが保持している「いいね！」の数を取得したい場合はFQLでデータ取得し、ボタンを押したユーザの合計数などを計算してください。
FQLでのデータ取得方法はこちらのページをご参照ください。

 

このサンプルでは、すでにボタンが押されているかどうかを、FacebookIDから判断させるプログラムにしましたが、STEP1にも書いたとおり、他にも色々と手段はあります。
Facebookアプリを許可させるのが煩わしい場合は、メールアドレスなどを入力させるなどの方法でも大丈夫かと思います。

また、csvでデータを管理する方法も、データベースが使えるサーバの場合はそちらで管理するほうが何かと便利かと思います。
csvでも構わないという場合は、データ管理だけにはご注意ください（csvファイルにアクセスできないよう制限をかけておくなど）。

 

最後にSTEP1～STEP4までに記述したサンプルコードをアップしました。
今更ではありますが「ブログじゃ読みづらい！」って方はこちらからダウンロードしてください。

サンプルダウンロードページへ

 

STEP1へ｜STEP2へ｜STEP3へ｜STEP4へ

nandani | 2011年08月27日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連 | PHP関連 | SNS関連

レーティング機能と「いいね！」を連動させる【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へ

nandani | 2011年08月27日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連 | PHP関連 | SNS関連

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

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

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

 

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

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

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

です。

(さらに…)

nandani | 2011年08月27日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連 | PHP関連 | SNS関連

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

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

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

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

 

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

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

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

※１：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を使用しますので、あらかじめこちらのサイトからダウンロードを行ってください。

(さらに…)

nandani | 2011年08月27日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連 | PHP関連 | SNS関連

PHPを用いてFacebookにログインしているユーザの基本情報を取得する方法【Facebook】

メモ。主に解説サイトの紹介。

なんとなく分かりづらいタイトルですが、自分が今Facebookにログインしているとして、とあるサイトにアクセスしたときに、自分の基本データが収集される・・・あれ？何かすごい恐ろしいこと書いているような・・・＾＾；

まあ何のために取得するかというと、サイト運営者それぞれに理由があると思いますが、信頼できるユーザかどうか（スパムではないかという意味）を調べたり、二重投稿などを防ぐために必要だったりします。

この基本データというのはいわゆる「プロフィール」なので、Facebookにログインしている状態ならば誰でも見れるものではあるのですが、とはいえ勝手に収集されてはかないません。

というわけで、当然ながら勝手に情報を収集できるわけがなく、そのサイトがユーザの基本データを得るには、訪れたユーザに「取得しても別にいいよ」と許可してもらう必要があります。

↓許可画面はこんな感じ

ここで「許可する」ボタンが押されると、そのサイトは許可したユーザの基本データを取得できるようになります。

では、ユーザの基本データを取得するアプリの開発方法を記したサイトのご紹介です。

 

※事前に「アプリケーションID」や「アプリの秘訣」を取得するために、facebook DEVELOPERSページの「アプリ」画面にて、これ専用のアプリを新規作成しておいてください。またアプリを作成するにはディベロッパー登録を行う必要があります。未登録の方はこちらのサイトを参考に登録してください。分かりやすく手順を書いてくださっています。

Facebook 開発者登録 - ネットショップサポート[PBsupport 門戸開放塾]

 

設置時ちょっとはまってしまったこと

設置直後「アプリの許可」画面を開こうとすると以下のようなエラー画面が出てしまいました。

○エラー内容

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: 指定されたURLは、アプリケーションの設定で許可されていません。

これはアプリ作成時にWebsiteを設定していないためです。

１．facebook DEVELOPERSページの「アプリ」画面を開いてください。

２．データ取得で使用するアプリを選択し、「設定」の「Edit Settings」をクリックしてください。

３．「Website」にデータ取得プログラムを設置しているホームページのURLとドメインを入力してください。

これで正常に「アプリの許可」画面が開くようになります。

nandani | 2011年08月20日 | コメント(0) | トラックバック(5) | API関連 | PHP関連 | SNS関連

FQLで特定のページの「いいね！」ボタンが押された回数などを取得する方法【Facebook】

FQLで特定のページの「いいね！」ボタンが押された回数などを取得する方法です。

PHPを用いるとこんな感じ。


$target_url = "http://www.yahoo.co.jp"; //データを取得したいページのURL

$select = 'SELECT like_count, total_count, share_count, click_count FROM link_stat WHERE url="'.$target_url.'"';
$select = urlencode($select);
$fb_url = "http://api.facebook.com/method/fql.query?query=".$select;
$res = file_get_contents($fb_url);
echo $res;

$target_urlの変数にデータを取得したいページのURLを入れてください。

実行結果（XML形式で表示されます。）

■参考サイト

Facebookの「いいね！」ボタンが押された回数を取得する方法 - でぶぬる日記

fql.query - Facebook開発者

nandani | 2011年08月20日 | コメント(0) | トラックバック(2) | API関連 | PHP関連 | SNS関連

「いいね！」ボタンが押されたとき、スクリプトを実行させる方法【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ではなく、登録時に連番で割り当てられる番号のことを指します。

nandani | 2011年08月19日 | コメント(0) | トラックバック(0) | API関連 | JavaScript関連 | SNS関連

Like Boxを設置する【facebook】

【2013/06/18修正】 結構仕様が変わっているので一部修正しました。

メモ

Facebookページ（旧ファンページ）を作成すると、Like Box（いいねボックス）なるウィジェットを自分（自社）のブログやサイトに設置できるようになります。

こんなの↓

 

１．まず、下記のURLにアクセスします。

http://developers.facebook.com/docs/reference/plugins/like-box/

 

２．Boxを調整し、コードを取得します。

WS000033

  • Facebook Page URL：FacebookページのURL
  • Width：Boxの幅
  • Height：Boxの高さ
  • Show Faces：いいねを押してくれているユーザの写真を下のブロックに表示するかどうか（なぜかShow Facesを外すと、Streamまで表示されなくなるので注意）
  • Color Scheme：色（明るいor暗い）
  • Stream：ウォールを表示するかどうか
  • Border Color：外枠の色（例：#FF0000）無くなりました
  • Show Border：外枠を表示するかどうか
  • Header：ヘッド部分の「Find us on Facebook」というブロックを表示するかどうか

上記を調整後、「Get Code」ボタンを押してください。

「Like Boxのプラグインコード:」ウィンドウが開きます。

WS000034

コードは「HTML5」「XFBML」「IFRAME」「URL」の４パターンありますので、お好きなパターンのコードをサイトに張り付けてください。

なおBOXの最小幅は292pxとなっているので注意してください。くわしくはこちらの記事

 

nandani | 2011年07月15日 | コメント(0) | トラックバック(0) | API関連 | SNS関連

mixiイイネ！ボタン

mixiチェックの設置方法の７．まではやり方が同じです。

　

１．イイネ！ボタンを発行する

「登録サービス詳細」になると、新規に追加された「イイネ！ボタンHTMLタグ発行」というフォームが表示されます。

「タグを取得」ボタンを押すと、すぐ下の「タグ」と書かれたテキストフィールドにiframeタグが表示されます。「プロフィール画像表示」にチェックを入れたままだと、かなりボタン領域が大きくなってしまいますので、不要ならばチェックを外しておいてください。

　

２．タグを改良する

出力されるタグは以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fwww.nandani.sakura.ne.jp%2F&service_key=識別キー&show_faces=false&width=140"></iframe>

上記のオレンジで記述された部分は、ページのURLが入るようにしなくてはなりません。

※ただし、URLはURLエンコードする必要があります。

wordpressだと以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<?php echo urlencode(get_permalink()); ?>&service_key=識別キー&show_faces=false&width=140"></iframe>

 さらに赤で記述されている「識別キー」の部分には、１．の「登録サービス詳細」画面に載っている「識別キー」を入れてください。

結果はこのページの下の方（mixiチェックボタンの左横）にボタンがあるので確かめてみてください。

いやー、なんというか、・・・挙動がまんまですねｗ
ここまで似てていいんでしょうか^^;

nandani | 2010年12月15日 | コメント(0) | トラックバック(0) | API関連 | JavaScript関連 | SNS関連

«‹123›»

月別アーカイブ

カテゴリー

新着記事

コメント

タグクラウド

Linux Bing MT便利プラグイン Google+1 Fedora SSL Movable Type EC-CUBE GoogleMapAPI プラグイン IE9 セキュリティ PIE 寺・神社 API suExec cakePHP Wordpressメモ Flash 歴史探訪 LDAP Firefox Ruby on Rails WordPress HTML5 LikeBox apache さくらインターネット Google Facebook htaccess Twitter viewport Canvas IE8 CSS3 News MT target-densitydpi OGP カゴヤ ゾーン Joruri GoogleMap PHP

週間アクセスランキング

  1. viewportの設定に注意 | ダリの雑記：WEBプログラム版 （248アクセス）
  2. Javascriptでプルダウンの選択を変更する（getElementsByTagName） | ダリの雑記：WEBプログラム版 （234アクセス）
  3. PHPを用いてFacebookにログインしているユーザの基本情報を取得する方法【Facebook】 | ダリの雑記：WEBプログラム版 （183アクセス）
  4. GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b | ダリの雑記：WEBプログラム版 （172アクセス）
  5. hal.dll.の破損？【WindowsXPが立ち上がらない】 | ダリの雑記：WEBプログラム版 （164アクセス）
  6. wordpressでカテゴリー一覧を表示する方法２ | ダリの雑記：WEBプログラム版 （158アクセス）
  7. Windows7で突然ネットがつながらなくなった時の対処法メモ | ダリの雑記：WEBプログラム版 （154アクセス）
  8. 「input」タグの「submit」ボタンを画像にかえる方法 | ダリの雑記：WEBプログラム版 （131アクセス）
  9. カスタム投稿（カスタムポスト）ごとにカテゴリーを設定する【Wordpress】 | ダリの雑記：WEBプログラム版 （111アクセス）
  10. IEでもCSS3 その１（ie-css3） | ダリの雑記：WEBプログラム版 （94アクセス）

プロフィール

和歌山でウェブプログラマーをやってます。使える言語はHTML・PHP・Javascriptなど。
Perlも扱えるようになるといいなぁ、と思う今日この頃。

ついでに書くと、漫画・アニメが大好きなオタクです。

最近はアクアリウムにはまり中。

趣味・日常版ブログへ

Twitterへ

フィード

RDF/RSS 1.0 | RSS2.0 | Atom

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