Skip to content

Instantly share code, notes, and snippets.

@chrisflicker

chrisflicker/apps.facebook.com422278034458715.html

Created May 14, 2012 15:00
Show Gist options
  • Save chrisflicker/2694452 to your computer and use it in GitHub Desktop.
Save chrisflicker/2694452 to your computer and use it in GitHub Desktop.
Download ZIP
fan page app js design
Raw
apps.facebook.com422278034458715.html
<!-- https://apps.facebook.com/422278034458715/ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
if(top.location == location) top.location.href = 'https://apps.facebook.com/422278034458715/';
//-->
</SCRIPT>
<script type="text/javascript" src="../../web/Scripts/swfobject.js"></script>
<script type="text/javascript" src="../../web/Scripts/jquery.js"></script>
<script src="jquery.mask.js"></script>
<style>
body{
font-size:13px;
color:#000000;
}
#divLike{
width:100%;
height:auto;
position:absolute;
text-align:center;
left:0px;
top:0px;
background-image:URL('img/cover.jpg');
background-position:center top;
background-repeat:no-repeat;
background-color:#ffffff;
}
.CW{color:#ffffff;}
.txtInput{
width:250px;
}
a{color:#000000;font-size:12px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isFan = false;
var fbid = 730546088;
var pid = 0; //公主編號
$(document).ready(function() {
saveLog(1); //PageView
$('#divLike').height($(document).height());
if(isFan){
$('#divLike').hide();
}else{
saveLog(2); //non like
}
});
//-->
</SCRIPT>
</head>
<body style="margin:0px;">
<div style="width:100%;margin:auto;position:relative;">
<div style="width:100%;height:78px;">
<div style="margin:12px auto;width:750px;"><img src="img/title.png"></div>
</div>
<div style="width:100%;height:600px;background-color:#ebe6d1">
<div style="width:750px;margin:auto;position:relative;">
<div style="width:363px;height:423px;position:absolute;top:30px;">
<img src="img/list.png" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="6,4,94,92" href="javascript:void(clickit('B','p'));" onmouseover="moveon('B')" />
<area shape="rect" coords="97,5,181,92" href="javascript:void(clickit('C','p'));" onmouseover="moveon('C')"/>
<area shape="rect" coords="184,6,269,92" href="javascript:void(clickit('D','p'));" onmouseover="moveon('D')"/>
<area shape="rect" coords="273,7,357,92" href="javascript:void(clickit('E','p'));" onmouseover="moveon('E')"/>
<area shape="rect" coords="9,104,93,190" href="javascript:void(clickit('F','p'));" onmouseover="moveon('F')"/>
<area shape="rect" coords="96,104,181,189" href="javascript:void(clickit('G','p'));" onmouseover="moveon('G')"/>
<area shape="rect" coords="183,103,270,190" href="javascript:void(clickit('H','p'));" onmouseover="moveon('H')"/>
<area shape="rect" coords="271,105,358,190" href="javascript:void(clickit('I','p'));" onmouseover="moveon('I')"/>
<area shape="rect" coords="7,202,93,288" href="javascript:void(clickit('J','p'));" onmouseover="moveon('J')"/>
<area shape="rect" coords="97,203,182,288" href="javascript:void(clickit('K','p'));" onmouseover="moveon('K')"/>
<area shape="rect" coords="184,203,268,288" href="javascript:void(clickit('L','p'));" onmouseover="moveon('L')"/>
<area shape="rect" coords="272,203,355,287" href="javascript:void(clickit('M','p'));" onmouseover="moveon('M')"/>
<area shape="rect" coords="8,300,93,385" href="javascript:void(clickit('N','p'));" onmouseover="moveon('N')"/>
<area shape="rect" coords="96,301,181,386" href="javascript:void(clickit('O','p'));" onmouseover="moveon('O')"/>
<area shape="rect" coords="184,301,269,386" href="javascript:void(clickit('P','p'));" onmouseover="moveon('P')"/>
<area shape="rect" coords="272,301,357,385" href="javascript:void(clickit('Q','p'));" onmouseover="moveon('Q')"/>
</map>
<input type="checkbox" id="chkB" onclick="return clickit('B')" style="position:absolute;top:73px;left:74px;">
<input type="checkbox" id="chkC" onclick="return clickit('C')" style="position:absolute;top:73px;left:162px;">
<input type="checkbox" id="chkD" onclick="return clickit('D')" style="position:absolute;top:73px;left:250px;">
<input type="checkbox" id="chkE" onclick="return clickit('E')" style="position:absolute;top:73px;left:338px;">
<input type="checkbox" id="chkF" onclick="return clickit('F')" style="position:absolute;top:171px;left:74px;">
<input type="checkbox" id="chkG" onclick="clickit('G')" style="position:absolute;top:171px;left:162px;">
<input type="checkbox" id="chkH" onclick="clickit('H')" style="position:absolute;top:171px;left:250px;">
<input type="checkbox" id="chkI" onclick="clickit('I')" style="position:absolute;top:171px;left:338px;">
<input type="checkbox" id="chkJ" onclick="clickit('J')" style="position:absolute;top:269px;left:74px;">
<input type="checkbox" id="chkK" onclick="clickit('K')" style="position:absolute;top:269px;left:162px;">
<input type="checkbox" id="chkL" onclick="clickit('L')" style="position:absolute;top:269px;left:250px;">
<input type="checkbox" id="chkM" onclick="clickit('M')" style="position:absolute;top:269px;left:338px;">
<input type="checkbox" id="chkN" onclick="clickit('N')" style="position:absolute;top:367px;left:74px;">
<input type="checkbox" id="chkO" onclick="clickit('O')" style="position:absolute;top:367px;left:162px;">
<input type="checkbox" id="chkP" onclick="clickit('P')" style="position:absolute;top:367px;left:250px;">
<input type="checkbox" id="chkQ" onclick="clickit('Q')" style="position:absolute;top:367px;left:338px;">
</div>
<div id="divPic" style="margin:0px 0px 0px 0px;width:350px;height:350px;background-color:#ffffff;border:1px solid #e4e3da;position:absolute;top:64px;left:381px;"></div>
<div style="width:302px;height:49px;position:absolute;top:445px;left:410px;"><a href="javascript:void(countit());"><img src="img/start.png" border=0></a></div>
</div>
</div>
<div id="divLike">
<div class="fb-like-box" data-href="http://www.facebook.com/niusnews" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div>
</div>
<div id="divResult" style="width:100%;height:700px;background-color:#f0efe8;display:none;position:absolute;top:0px;left:0px;">
<div style="width:400px;height:auto;margin:auto;">
<img id="imgResult"><br>
<TABLE border=0 cellpadding=0 cellspacing=0>
<TR>
<TD width=70 style="color:#000000;font-size:15px;">你想說：</TD>
<TD>
<TEXTAREA id="txtTitle" NAME="" ROWS="" COLS="" style="width:325px;height:55px;"></TEXTAREA>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD><a href="javascript:void(fbshare());"><img src="img/btnshare.png" border=0></a></TD>
<TD><a href="javascript:void(fbinvite());"><img src="img/btninvite.png" border=0></a></TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD valign=top width=100%>
<div style="padding-bottom:5px;"><a href="javascript:void(playagain());">再玩一次</a></div>
<div style="margin-bottom:-2px;"><img src="img/relative.png"></a></div>
<a href="javascript:void(clickLink(1));">《復仇者聯盟》最有魅力弟弟系魔王─湯姆希德斯頓 </a><br>
<a href="javascript:void(clickLink(2));">超殺！復仇者聯盟眼妝 </a><br>
<a href="javascript:void(clickLink(3));">《復仇者聯盟》的好歡樂小劇場</a><br>
<a href="javascript:void(clickLink(4));">向《復仇者聯盟》 致敬海報！</a><br>
</TD>
</TR>
</TABLE>
</div>
<div style="color:#c8c7ba;text-align:center;width:100%;margin-top:10px;"></div>
</div>
</div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '422278034458715',
status: true,
cookie: true,
oauth: true, // enable OAuth 2.0
xfbml: true}
);
FB.Canvas.setAutoGrow(91);
FB.Event.subscribe('edge.create',
function(response) {
isFan = true;
$('#divLike').hide();
saveLog(3); //do like
}
);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/zh_TW/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
function fbinvite(exclude_ids) {
//$('#divTop').height(0);
saveLog(4); //click invite
FB.ui(
{method: 'apprequests',
message: '幸運睡姿大調查！看看今晚你該怎麼睡？',
exclude_ids : exclude_ids
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
var to = "";
if(response != null){
for(var i=0;i<response.to.length;i++){
to = to + "," + response.to[i];
}
//寫入request
$.ajax({
url: 'api.php',
data: {action:'saveRequest',request:response.request,to:to},
dataType: 'json',
error: function(xhr) {
alert('Ajax request 發生錯誤');
},
success: function(response) {
alert("邀請已成功送出");
//fbshare();
}
});
}
}
function fbshare(){
saveLog(5); //click share
$(document).mask('分享中，請稍候');
$.ajax({
url: 'api.php',
data: {action:'share',src:$('#imgResult').attr("src"),title:$('#txtTitle').val(),pid:pid},
dataType: 'json',
error: function(xhr) {
alert('Ajax request 發生錯誤');
},
success: function(response) {
//do nothing
alert(response.message);
$(document).unmask();
saveLog(6); //done share
}
});
}
function saveLog(type){
//return false;
$.ajax({
url: 'api.php',
data: {action:'saveLog',type:type},
dataType: 'json',
error: function(xhr) {
//alert('Ajax request 發生錯誤');
},
success: function(response) {
//do nothing
}
});
}
function clickit(type,target){
if(target == "p"){
if($("#chk"+type).attr("checked") == true){
//取消
$("#chk"+type).attr("checked",false);
return true;
}
}
var arr = new Array("B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q");
var c=0;
for(var i=0;i<=15;i++){
//console.log(arr[i]);
if($("#chk"+arr[i]).attr("checked") == true) c++;
}
if(c == 4){
return false;
}
if(target == "p") $("#chk"+type).attr("checked",true);
}
function moveon(type){
$('#divPic').html("<img id='divPicSrc' src='img/"+type+".jpg'>");
$('#divPic').width($('#divPicSrc').width());
$('#divPic').height($('#divPicSrc').height());
}
function countit(){
var arr = new Array("B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q");
var c=0;
var str = "";
for(var i=0;i<=15;i++){
if($("#chk"+arr[i]).attr("checked") == true){
str += arr[i] + ",";
c++;
}
}
//console.log(str + "," + c);
if(c != 4){
alert("請先選好四張圖片");
return false;
}
$(document).mask('計算中，請等待'); //開啟遮罩
saveLog(7); //click count
$.ajax({
url: 'api.php',
data: {action:'countit',input:str,fbid:fbid},
dataType: 'json',
error: function(xhr) {
alert('Ajax request 發生錯誤');
},
success: function(response) {
if(response.status == "false"){
alert(response.message);
return false;
}
//顯示結果
$('#divResult').show();
//console.log(response.data.pic);
$('#imgResult').attr("src",response.data.pic);
pid = response.data.id;
$(document).unmask(); //關閉遮罩
}
});
//console.log(str);
}
function clickLink(type){
switch(type){
case 1:
saveLog(8);
window.open('http://www.niusnews.com/index.php/main/view/886',"_blank");
break;
case 2:
saveLog(9);
window.open('http://www.niusnews.com/index.php/main/view/899',"_blank");
break;
case 3:
saveLog(13);
window.open('http://www.niusnews.com/index.php/main/view/950',"_blank");
break;
case 4:
saveLog(14);
window.open('http://www.niusnews.com/index.php/main/view/951',"_blank");
break;
}
}
function playagain(){
saveLog(12);
top.location.href = 'https://apps.facebook.com/422278034458715/';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment