1-go to http://developers.facebook.com
2-create a new application (Website - Page Tab) (note delete website no needed)
3-warning https required!
4-suppose we have https://x.com/test_fb
5-we create the https://x.com/test_fb/index.php
6-we add the PageTab to page we like via :
app_id
then appear
finally the tab is on our page..
example of index.php
facebook by default doesnt display the PageTab on mobiles..
What we want?
A link to be posted on our company wall, the user even on mobile even on desktop can see the tab!
Solution :
near index.php, create redirector.php where :
then we publish the https://x.com/redirector.php to our wall!
2-create a new application (Website - Page Tab) (note delete website no needed)
3-warning https required!
4-suppose we have https://x.com/test_fb
5-we create the https://x.com/test_fb/index.php
6-we add the PageTab to page we like via :
app_id
JavaScript:
https://www.facebook.com/dialog/pagetab?app_id=1234&redirect_uri=https://x.com/test_fb/then appear
finally the tab is on our page..
example of index.php
JavaScript:
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.min.js']</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap-switch.min.css">
<script type='text/javascript']
var user = null;
var appID = "1234";
function check_if_is_connected()
{
//gets if user accepted the application
FB.getLoginStatus(function(response)
{
if (response.status === 'connected')
// if user accepted the application
{
//alert("isconnected");
getInfo();
}
else
{
ask_for_permissions();
}
});
}
function ask_for_permissions()
{
//pop the login dialog with permissions!
//https://developers.facebook.com/docs/reference/javascript/FB.login/v2.0
FB.login(function(response)
{
if (response.authResponse)
{
//user accept the application
getInfo();
} else {
//User cancelled login or did not fully authorize
alert('You have to accept the application, afterwards you can remove it');
}
},
{
//https://developers.facebook.com/docs/facebook-login/permissions/v2.2
scope: 'email' //needs authorization by Facebook for - 'user_birthday,user_location'
});
}
function getInfo()
{
console.log("getInfo");
FB.api('/me', function(response)
{
console.log(response);
user = response; //store to pubic var
subscribe();
});
}
function subscribe()
{
//read public var
$("#fullname").val(user.name);
$("#email").val(user.email);
$("#gender").val(user.gender);
$("#fb_id").val(user.id);
//html form submit
document.cv.submit();
}
</script>
<script>
//facebook lib reference
window.fbAsyncInit = function()
{
FB.init(
{
appId : appID,
channelUrl : 'http://x.com/channel.php', //custom channel
xfbml : true,
version : 'v2.2',
});
};
(function(d, s, id)
{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
{
return;
}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
function submitform()
{
//ask if user accept our app
check_if_is_connected();
}
$(function() {
//jQuery functions here
});
</script>
</head>
<body background="assets/bg.jpg">
<form id="cv" name="cv" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return checkSize(35097152)">
<input id='dob' name='dob' type="date" min='1979-01-01' max='1996-01-01' class='form-control' placeholder='dob' required autofocus></div>
<input id='city' name='city' type="text" class='form-control' placeholder='city' required>
<input id='telephone' name='telephone' type='tel' class='form-control' placeholder='tel' required>
<input id='portofolio' name='portofolio' type='url' class='form-control' placeholder='portofolio url']
<input class='form-control' type="file" name="cvfile" id="cvfile" size="40" accept="application/pdf,application/msword, application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation,,application/vnd.openxmlformats-officedocument.wordprocessingml.document , text/plain, application/pdf, image/*" required>
<!--hidden fields filled - filled after user is connected to fb_app-->
<input id="fullname" name="fullname" style="display: none;">
<input id="email" name="email" style="display: none;">
<input id="gender" name="gender" style="display: none;">
<input id="fb_id" name="fb_id" style="display: none;">
[url='javascript: submitform()']Υποβολή[/url]
</form>
</body>
</html>facebook by default doesnt display the PageTab on mobiles..
What we want?
A link to be posted on our company wall, the user even on mobile even on desktop can see the tab!
Solution :
near index.php, create redirector.php where :
JavaScript:
//http://mobiledetect.net class
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile())
{
header('Location: index_mobile.php');
exit;
} else {
header('Location: https://www.facebook.com/x/app_1234');
exit;
}
?>
JavaScript:
//index_mobile.php
//unfortunately, I didnt explore web login
I took the form by index.php and merge the 3 fields (which filled after user accepts the application aka fullname / email / gender) and make them visible, so user can fill it!then we publish the https://x.com/redirector.php to our wall!