I have a Facebook app (canvas) hosted on Heroku, say xxxx.herokuapp.com/index.php. As well I have a website outside the canvas, say xxxx.herokuapp.com/welcome.php where I am encouraging people to learn more about the app and install it.
Is there any widget "install app" that redirects visitor on welcome.php to index.php, asks for login (if necessary) and permissions to install the app?
I am using at the moment the "login button" but it just does the login step.
Thanks
No, There is no official Install App button but you could create one yourself.
Create a button which would redirect visitors onclick to index.php page and on index.php page, check if the user is already logged in or not, if not then redirect them to authentication flow with whatever permissions your app needs and then back to index.php.
If you want a snippet, I can post it.
EDIT: As requested, here's the snippet:
index.php
<?php
# Path to facebook's PHP SDK, Assuming it's in the root.
# Download latest SDK from https://github.com/facebook/facebook-php-sdk
require_once("facebook.php");
# Facebook application config.
$config = array(
'appId' => 'YOUR_APP_ID',
'secret' => 'YOUR_APP_SECRET',
);
# Create a new facebook object.
$facebook = new Facebook($config);
# Current user ID.
$user_id = $facebook->getUser();
# Check to see if we have user ID.
if($user_id) {
# If we have a user ID, it probably means we have a logged in user.
# If not, we'll get an exception, which we handle below.
try {
# Get logged in user's profile info:
$user_info = $facebook->api('/me');
} catch(FacebookApiException $e) {
// If the user is logged out, you can have a
// user ID even though the access token is invalid.
// In this case, we'll get an exception, so we'll just redirect the user to login again here.
$login_url = $facebook->getLoginUrl();
echo ("<script>top.location = '$login_url';</script>");
error_log($e->getType());
error_log($e->getMessage());
}
} else {
# No user, redirect user to login and give the required permissions to perform tasks.
$login_url = $facebook->getLoginUrl();
echo ("<script>top.location = '$login_url';</script>");
}
?>
welcome.php Example: http://jsfiddle.net/9CCcB/
I've used CSS3 Social Sign-in Buttons by Nicolas Gallagher for this example, you could use any style for the buttons.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome</title>
<style>
/*
CSS3 Social Sign-in Buttons by Nicolas Gallagher
Link: http://nicolasgallagher.com/lab/css3-social-signin-buttons/
*/
.btn-auth {
position: relative;
display: inline-block;
height: 22px;
padding: 0 1em;
border: 1px solid #999;
border-radius: 2px;
margin: 0;
text-align: center;
text-decoration: none;
font-size: 14px;
line-height: 22px;
white-space: nowrap;
cursor: pointer;
color: #222;
background: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
/* iOS */
-webkit-appearance: none; /* 1 */
/* IE6/7 hacks */
*overflow: visible; /* 2 */
*display: inline; /* 3 */
*zoom: 1; /* 3 */
}
.btn-auth:hover,
.btn-auth:focus,
.btn-auth:active {
color: #222;
text-decoration: none;
}
.btn-auth:before {
content: "";
float: left;
width: 22px;
height: 22px;
background: url(https://raw.github.com/necolas/css3-social-signin-buttons/master/auth-icons.png) no-repeat 99px 99px;
}
/*
* 36px
*/
.btn-auth.large {
height: 36px;
line-height: 36px;
font-size: 20px;
}
.btn-auth.large:before {
width: 36px;
height: 36px;
}
/*
* Remove excess padding and border in FF3+
*/
.btn-auth::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Facebook (extends .btn-auth)
========================================================================== */
.btn-facebook {
border-color: #29447e;
border-bottom-color: #1a356e;
color: #fff;
background-color: #5872a7;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -webkit-linear-gradient(#637bad, #5872a7);
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -ms-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
-webkit-box-shadow: inset 0 1px 0 #879ac0;
box-shadow: inset 0 1px 0 #879ac0;
}
.btn-facebook:hover,
.btn-facebook:focus {
color: #fff;
background-color: #3b5998;
}
.btn-facebook:active {
color: #fff;
background: #4f6aa3;
-webkit-box-shadow: inset 0 1px 0 #45619d;
box-shadow: inset 0 1px 0 #45619d;
}
/*
* Icon
*/
.btn-facebook:before {
border-right: 1px solid #465f94;
margin: 0 1em 0 -1em;
background-position: 0 0;
}
.btn-facebook.large:before {
background-position: 0 -22px;
}
</style>
</head>
<body>
<center><a class="btn-auth btn-facebook large" href="http://domain.com/">Sign in with <b>Facebook</b></a></center>
</body>
</html>