내 웹 사이트에 "앱 설치"버튼

나는 Heroku에서 호스팅되는 Facebook 앱 (캔버스)을 가지고 있습니다 (예 : xxxx.herokuapp.com/index.php). 캔버스 외부에 웹 사이트가 있습니다. xxxx.herokuapp.com/welcome.php에서 사람들에게 앱에 대해 자세히 알아보고 설치하도록 권장합니다.내 웹 사이트에 "앱 설치"버튼

welcome.php의 방문자를 index.php로 리디렉션하고, 로그인 (필요한 경우) 및 앱 설치 권한을 요청하는 위젯 "설치 앱"이 있습니까?

현재 "로그인 버튼"을 사용하고 있지만 로그인 단계 만 수행하고 있습니다.

감사

출처

2012-10-10 Arturo

아니, 공식 Install App 버튼이 없습니다하지만 당신은 하나를 직접 만들 수 있습니다.

방문자를 onclick으로 리디렉션하는 버튼을 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/

내가 CSS3 사회 사용한 로그인이 예를 들어 Nicolas Gallagher에 의해 버튼 , 버튼에 대해 어떤 스타일이라도 사용할 수 있습니다.

<!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-10 10:39:02

감사합니다. SIR! 스 니펫을 갖는 것이 좋을 것입니다. – Arturo

문제가 없지만 스 니펫으로 답변을 업데이트했습니다. –

매우 도움이됩니다. 감사! – Arturo

내 웹 사이트에 "앱 설치"버튼

답변

관련 문제