facebook application sample

todays_fortune_app.html

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<h1>きょうのうらない</h1>

<div id="account-info"></div>
<p id="result_button" style="display: none;"><button onclick="javascript:show_result()">うらなってみる</button></p>
<p id="result_area"></p>
<p id="post_button" style="display: none;"><button onclick="javascript:post_result('result_area')">ウォールに投稿する</button></p>

<script type="text/javascript">
var isLogin = false;
FB.init({
	appId:'xxxxxxxxxxxxxxx', cookie:true,
	status:true, xfbml:true, oauth:true
});

var birthDate;
var zodiac_text = ['おひつじ座', 'おうし座', 'ふたご座', 'かに座', 'しし座', 'おとめ座',
			'てんびん座', 'さそり座', 'いて座', 'やぎ座', 'みずがめ座', 'うお座'];
var res_text = ['凶', '末吉', '小吉', '中吉', '大吉'];
function show_result() {
	var x = Math.floor(Math.random() * 5);
	var area = document.getElementById('result_area');
	area.textContent = zodiac_text[judgeZodiacNum(birthDate)]
				+"生まれのきょうのあなたの運勢は・・・"+ res_text[x] +"でした";
	var btn = document.getElementById('post_button');
	btn.style.display = 'block';
}
function judgeZodiacNum(mmdd) {
	if(mmdd>='0321' && mmdd<='0419') {
		return 0;
	} else if(mmdd>='0420' && mmdd<='0520') {
		return 1;
	} else if(mmdd>='0521' && mmdd<='0621') {
		return 2;
	} else if(mmdd>='0622' && mmdd<='0722') {
		return 3;
	} else if(mmdd>='0723' && mmdd<='0822') {
		return 4;
	} else if(mmdd>='0823' && mmdd<='0922') {
		return 5;
	} else if(mmdd>='0923' && mmdd<='1023') {
		return 6;
	} else if(mmdd>='1024' && mmdd<='1122') {
		return 7;
	} else if(mmdd>='1123' && mmdd<='1221') {
		return 8;
	} else if((mmdd>='1222' && mmdd<='1231') || (mmdd>='0101' && mmdd<='0120')) {
		return 9;
	} else if(mmdd>='0121' && mmdd<='0218') {
		return 10;
	} else if(mmdd>='0219' && mmdd<='0320') {
		return 11;
	}
}

function post_result(element_id) {
	var area = document.getElementById(element_id);
	FB.api('/me/feed', 'post', {
		message: area.textContent,
	}, function (response) {
		if(!response || response.error) {
			alert('投稿できませんでした');
		} else {
			alert('投稿しました。 Post ID: ' + response.id);
		}
	});
}

/**
 * This assumes the user is logged in and renders their profile picture,
 * name and a logout link.
 */
function showAccountInfo() {
	FB.api(
		{
			method: 'fql.query',
			query: 'SELECT name, pic_square, birthday, birthday_date FROM user WHERE uid='+FB.getUserID()
		},
	function(response) {
		var birthDates = response[0].birthday_date.split('/');
		birthDate = birthDates[0]+birthDates[1];
		document.getElementById('account-info').innerHTML = (
		'<img src="' + response[0].pic_square + '"> ' +
		response[0].name + 
		' <button onclick="FB.logout()">Logout</button>'
      );
    }
  );
}

/**
 * This assumes the user is logged out, and renders a login button.
 */
function showLoginButton() {
  document.getElementById('account-info').innerHTML = (
    '<img onclick="fbLogin()" style="cursor: pointer;"' +
         'src="https://s-static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">'
  );
}
function fbLogin() {
	FB.login(function (res) {
		if(!res.session && !res.authResponse) {
			alert('ログイン失敗');
		}
	},{ scope: 'user_birthday,publish_stream'});
}
function switchResultButton(show) {
	var btn = document.getElementById('result_button');
	if(show) {
		btn.style.display = 'block';
	} else {
		btn.style.display = 'none';
	}	
}
/**
 * This will be called once on page load, and every time the status changes.
 */
function onStatus(response) {
  if (response.status === 'connected') {
    showAccountInfo();
    switchResultButton(true);
  } else {
    showLoginButton();
    switchResultButton(false);
  }
}
FB.getLoginStatus(function(response) {
  onStatus(response); // once on page load
  FB.Event.subscribe('auth.statusChange', onStatus); // every status change
});
</script>