Question

我有一个在Heroku上托管的Facebook应用程序（画布），比如xxxx.herokuapp.com/index.php。我还有一个画布以外的网站，比如xxxx.herokuapp.com/welcome.php，我鼓励人们更多地了解该应用并安装它。

是否有任何小部件“安装应用”将welcome.php上的访问者重定向到index.php，要求登录（如有必要）和安装应用的权限？

我现在正在使用“登录按钮”，但它只是登录步骤。

由于

Answer 1

不，没有正式的Install App按钮，但您可以自己创建一个。

创建一个按钮，将访问者重定向到index.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>

我的网站上的“安装应用”按钮

1 个答案: