2

xxxx.herokuapp.com/index.php など、Heroku でホストされている Facebook アプリ (キャンバス) があります。同様に、キャンバスの外にある xxxx.herokuapp.com/welcome.php という Web サイトで、アプリについて詳しく知り、インストールするよう人々に勧めています。

Welcome.php の訪問者を index.php にリダイレクトし、ログイン (必要な場合) とアプリのインストール許可を求めるウィジェット「アプリのインストール」はありますか?

現在、「ログインボタン」を使用していますが、ログイン手順を実行するだけです。

ありがとう

4

1 に答える 1

0

いいえ、公式のInstall Appボタンはありませんが、自分で作成できます。

訪問者のオンクリックを index.php ページと index.php ページにリダイレクトするボタンを作成し、ユーザーが既にログインしているかどうかを確認し、ログインしていない場合は、アプリに必要な権限を使用して認証フローにリダイレクトし、インデックスに戻します。 .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 Social Sign-in 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>​
于 2012-10-10T10:39:02.387 に答える