Как я могу получить модальное, а не всплывающее окно при использовании http для доступа к моей странице iframe в Facebook? - PullRequest
Новая
       1

Как я могу получить модальное, а не всплывающее окно при использовании http для доступа к моей странице iframe в Facebook?

2 голосов
/ 03 апреля 2012

При использовании размещенных на веб-страницах iframe веб-страниц fb.UI правильное модальное диалоговое окно отображается, но на той же странице через http появляется всплывающее окно

. Вот мой код, в основном со страницы справки диалогов Facebook: 

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>My Feed Dialog Page</title>
  </head>
  <body>
    <p>oh, hello.</p>
    <div id='fb-root'></div>
    <script src='//connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "myappid", status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://www.facebook.com/testapp/app_myappid/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.',

        };

        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }



    </script>
  </body>
</html>

Поэтому, когда я захожу на страницу через https://www.facebook.com/testapp/app_myappid, я получаю правильный модальный диалог, но http://www.facebook.com/testapp/app_myappid дает ужасное всплывающее окно.

1 Ответ

5 голосов
/ 03 апреля 2012

Вы пытались добавить параметр display , например: 

var obj = {
    method: 'feed',
    link: 'http://www.facebook.com/testapp/app_myappid/',
    picture: 'http://fbrell.com/f8.jpg',
    name: 'Facebook Dialogs',
    caption: 'Reference Documentation',
    description: 'Using Dialogs to interact with users.',
    display: 'iframe'
};

...

FB.ui(obj, callback);

Ссылка: https://developers.facebook.com/docs/reference/dialogs/

Редактировать

Как сказано в том же документе, который я опубликовал:

Если вы укажете iframe, у вас должен быть действительный токен доступа.

При просмотре кода вы, похоже, пропустилипроцесс аутентификации.Видите ли, вы не можете просто позвонить FB.init , а затем начать использовать API, вам нужно попросить SDK аутентифицировать пользователя.

Есть несколько способов сделать это,Вы должны проверить документ Аутентификация на стороне клиента для получения дополнительной информации.Вот ваш модифицированный код, я добавил использование метода FB.login SDK, и он утверждает, что:

Вызов FB.login приводит к попытке JS SDKоткройте всплывающее окно.Таким образом, этот метод следует вызывать только после события пользовательского щелчка, в противном случае всплывающее окно будет заблокировано большинством браузеров.

Так что вам может потребоваться авторизовать это всплывающее окно для его работы, вам следуетв действительности используйте другой подход (как обсуждено в этой документации на стороне клиента) или просто вызовите этот метод после того, как пользователь что-то нажал.Это только для того, чтобы подтолкнуть вас в правильном направлении: 

function callback(response) {
    document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    FB.ui(obj, callback);
}

FB.init({
    appId: "myappid", 
    status: true, 
    cookie: true
});

FB.login(function(response) {
    if (response.authResponse) {
        postToFeed();
    }
    else {
        alert("user NOT logged in");
    }
});

2nd Edit

Так как это приложение Canvas, и вы хотели бы избежать всплывающего окна входа в систему, естьдругое решение.

Если вы получаете это сообщение об ошибке, это означает, что вы (возможно) пропускаете аутентификацию на стороне клиента, вы можете передать имеющийся у вас токен доступа со стороны сервера и использовать его на клиенте,или вы можете сделать что-то вроде этого: 

window.fbAsyncInit = function() {
    FB.init({
        appId: "myappid", 
        status: true, 
        cookie: true
    });

    FB.getLoginStatus(function(response) {
        if (response.status === "connected") {
            postToFeed();
        }
        else {
            console.log("not logged in to facebook or hasn't authorized the app");
        }
    };
};

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    function callback(response) {
        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
    }

    FB.ui(obj, callback);
}

Это не откроет всплывающее окно или что-то в этом роде, а просто проверит состояние входа пользователя.Вы можете прочитать больше о методе FB.getLoginStatus .

Также, я рекомендую использовать параметр Channel File при инициализации js sdk.Это не должно иметь никакого значения в этом случае, но это безопаснее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...