我网站上的"Install app"按钮



我有一个Facebook应用程序(画布)托管在Heroku上,比如 xxxx.herokuapp.com/index.php。此外,我在画布之外还有一个网站,比如说 xxxx.herokuapp.com/welcome.php 我鼓励人们了解有关该应用程序的更多信息并安装它。

是否有任何小部件"安装应用程序"将欢迎.php访问者重定向到索引.php,要求登录(如有必要)和安装应用程序的权限?

我目前正在使用"登录按钮",但它只是执行登录步骤。

谢谢

不,没有官方的Install App按钮,但您可以自己创建一个。

创建一个按钮,该按钮将在单击索引.php页面时将访问者重定向到索引页面,并在index.php页面上检查用户是否已登录,如果没有,则将他们重定向到具有应用所需的任何权限的身份验证流,然后返回index.php。

如果你想要一个片段,我可以发布它。

编辑:根据要求,这是代码片段:

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示例:http://jsfiddle.net/9CCcB/

在这个例子中,我使用了Nicolas Gallagher的CSS3社交登录按钮,你可以对按钮使用任何样式。

<!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>​

最新更新