[FaceBook] Создание приложения в Facebook

alexxus · 24.04.2014, 05:08

Необходимо портировать flash as3 приложение в facebook
Если я правильно понимаю, это будет также iframe приложение с flash контейнером, инициализация и работа с АПИ на JS и обмен данными с flash посредством ExternalInterface
что-то типа этого
http://www.flasher.ru/forum/showthre...light=Facebook

Не могу разобраться как это сделать, запоролся в самом начале.
Создал приложение, добавил платформу "Приложение на Facebook"
прописал адреса...
Следовал этой инструкции (актуальнее ничего не нашел),
http://www.cleverscript.ru/social-ne...l#.U1hKiPl_sfE

Проблема в том, что не отображается даже php "Hellow Word", (по прямой ссылке работает, по ссылке приложения в FB - контейнер пуст.)
Что я делаю не так?
В документации ничего толкового не нашел, примеров "под ключ" тоже в сети не найти, а те, что есть, как минимум описываются по устаревшим интерфейсам.
Не кидайте говнами, но реально в тупике, пару лет назад кое-как разобрался с этим вопросом, а сейчас никак.

caseyryan · 24.04.2014, 08:08

Цитата:

В документации ничего толкового не нашел

Кто ищет, тот найдет.

Цитата:

примеров "под ключ" тоже в сети не найти, а те, что есть, как минимум описываются по устаревшим интерфейсам.

Есть очень даже неплохие. На самом фейсбуке. Тут про canvas приложение, но суть от этого не меняется. Тут даже интерфейс фейсбука в примере практически самый актуальный. С момента выпуска этого тутора они его лишь слегка обновили.

П.с. чтобы это работало, то нужно обязательно иметь сервер, к которому фейсбук может обращаться. С локалки, без внешнего доступа работать не будет!
Если есть возможность открыть доступ к апачи на своем компе с внешки, то это будет идеальный вариант. Если такой возможности нет, то можно хостингом обзавестись. У heroku есть хороший бесплатный план. Как раз для разработки.
И так же нужен доступ по https. Если iFrame отдается по http, а в фейсбуке открыто через https, то будет кидаться ошибками, и работать не будет

morgenshtern · 24.04.2014, 10:37

alexxus

Цитата:

Создал приложение, добавил платформу "Приложение на Facebook"
прописал адреса..

Там только 2 урла указать, с http и https (обязательно ваш сервак должен отдавать по https), и уже ваш ифрейм с флешкой и js будет доступен.

На as3 + iFrame там вообще все просто, в чем то даже поудобнее вконтактика у них апи. Все аналогично вк - через FB.api получаем себя /me, получаем друзей /me/friends. Через FB.ui открываем диалоги на уведомления, платежи, посты в ленту.

alexxus · 24.04.2014, 12:00

Сервер есть свой. Но нужно настроить https, наверное в этом дело.

caseyryan · 24.04.2014, 12:32

Цитата:

Сервер есть свой. Но нужно настроить https, наверное в этом дело.

Скорее всего. Но для начала всегда стоит проверить какие ошибки валятся в консоль. В хроме по умолчанию есть такая фича

п.с. https сейчас вообще маст хэв. По-любому надо настраивать

alexxus · 08.05.2014, 01:41

Настроил https, подключил использование SSL.
Тестовое приложение заработало FRIENDS MASH из примера на FB.

Цитата:

Сообщение от morgenshtern

alexxus
На as3 + iFrame там вообще все просто, в чем то даже поудобнее вконтактика у них апи. Все аналогично вк - через FB.api получаем себя /me, получаем друзей /me/friends. Через FB.ui открываем диалоги на уведомления, платежи, посты в ленту.

Вот с этим я так и не понял. В вк я iframe приложения не делал, но например в ок я просто передавал параметры из страницы во флэш и там уже подключался, используя as3 ok api.
В случае с FB,

- инициализация и работа будет прописана на стартовой странице на JS, и мне нужно будет написать механизм вызова JS методов (работающих с FB АПИ) из флэш и передавать результаты этих вызовов назад во флэш?
или:
- также передавать параметры во flash а там использовать библиотеку (нашел в сети GraphAPI_Desktop_1_8_1.swc).

caseyryan · 08.05.2014, 10:05

Там можно вообще с серверной стороны организовать запросы

alexxus · 08.05.2014, 10:08

Цитата:

Сообщение от caseyryan

Там можно вообще с серверной стороны организовать запросы

Я так понимаю, это на php? C ним я знаком в меньшей степени.

morgenshtern · 08.05.2014, 11:33

Цитата:

Там можно вообще с серверной стороны организовать запросы

только не нужно, разве что в приложении 5 человек, либо серверные мощности девать некуда.

alexxus
как-то так. Делал давно, почистил от лишнего, может чего нужно зацепил) Элементарно все, по доке на фб делается. Да и примерно полно в гугле.

PHP код:


			
<!DOCTYPE html>
<html lang="ru" xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="swfobject.js"></script>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: #000000; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>
        <link rel="stylesheet" type="text/css" href="custom_facebook.css" />         
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        
        <script type="text/javascript">
        var app;
        var flashvars = {};
        var xiSwfUrlStr = "playerProductInstall.swf";
        var AppID = 'AppID';
        var AppSecret = 'AppSecret';
        flashvars.appid = AppID;
        flashvars.appsecret = AppSecret;
        
        
        window.fbAsyncInit = function() {
            FB.init({
                appId      : AppID, // App ID from the App Dashboard
                status     : true, // check the login status upon init?
                cookie     : true, // set sessions cookies to allow your server to access the session?
                xfbml      : true  // parse XFBML tags on this page?
            });
            
            FB.login(function(response) {
                if (response.authResponse) {
                    FB.api('/me/?fields=name,id', function(response) {
                        flashvars.viewer_id = response.id;
                        flashvars.viewer_name = response.name;
                        boot();
                    });
                } else {
                    alert('Вам нужно авторизоваться прежде чем...');
                }
            });
        };
        (function(d, debug){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
            ref.parentNode.insertBefore(js, ref);
        }(document, /*debug*/ false));
        
        function boot() {
            function processIncomingRequest() {
                
            }
            
            
            flashvars.token = 'token';
            flashvars.acces_token = 'acces_token';
            
            
            var params = {};
            params.quality = "high";
            params.bgcolor = "#000000";
            params.allowscriptaccess = "*";
            params.allowfullscreen = "true";
            params.wmode = "opaque";
            params.menu = "false";
            
            var attributes = {};
            attributes.id = "swf";
            attributes.name = "swf";
            attributes.align = "middle";
            
            swfobject.embedSWF("swf.swf", "alt-content", "760", "760", "10.0.0", false, flashvars, params, attributes, function(e) {
                app = e.ref;
            });
        }
        
        
        function getFriends() {
            FB.api('/me/friends?fields=name,id,installed', function(friendResponse) {
                app.onGetFriends(friendResponse);
            });
        }
        
        function getRatingUsersInfo(names) {
            if(!names || names.length == 0){
                return;
            }
            
            var qr = 'SELECT name,uid  FROM user WHERE ';
            var names_arr = names.split(',');
            for (var i = 0; i < names_arr.length; i++) {
                if (i == 0){
                    qr += 'uid=' + names_arr[i];
                }else {
                    qr += ' OR uid=' + names_arr[i];
                }
            }
            
            FB.api({
                method: 'fql.query',
                query: qr
                },
                function(data) {
                    app.onGetRatingInfo(data);
                }
            );
            
        }
    
       
        function SendInviteRequest(data) {
            
            if(data){
                FB.ui({method: 'apprequests', 
                    message: data.message',
                    to: data});
            }else{
                FB.ui({method: 'apprequests', 
                    message: 'Поймай удачу за хвост!'});
            }    
        }
        
         function SendGiftRequest(data) {
            FB.ui({method: 'apprequests', 
                message: data.text, 
                to: data.selected_uids, 
                title: 'Попросите подарок у друзей!',
                data: {"friend_id" : data.selected_uids}});
        }
        
        
        function showOrderBox(data) {
        
            FB.ui({
                method: 'pay',
                action: 'purchaseitem',
                item_id: data.item,
                product: 'урл до описания продукта'
            },
                function (d) {
                    if (d.status == 'completed'){
                        app.event("onOrderSuccess", true);
                        
                    } else if (d.error_code){
                        if( d.error_code == 1383010){
                            app.event("onOrderCancel", true);
                        }else{
                            app.event("onOrderFail", true);
                        }
                    }
                }
            );
        }

        function postToFeed(data) {
            var obj = {
                method: 'feed',
                link: 'https://apps.facebook.com/swf/',
                caption: '',
                picture: '',
                name: '',
                description: 'Try to test YOUR luck in this game!'
            };
            FB.ui(obj);
        }
        
        
        function refreshIFrame() {
            document.location.reload(true);
        }

</script>
</head>
<body>    
    <table width="760"  align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td >
                <div class="fb-like" data-href="https://www.facebook.com/funpage" data-width="542" data-height="35" data-colorscheme="dark" data-layout="standard" data-action="like" data-show-faces="false" data-send="false"></div>        
            
                <a class="uibutton confirm" href="#" onclick="
                    window.open(
                      'https://www.facebook.com/sharer/sharer.php?u=https://apps.facebook.com/swf', 
                      'facebook-share-dialog', 
                      'width=626,height=436'); 
                    return false;">
                  Share on Facebook
                </a>
                <a href="https://www.facebook.com/funpage" class="uibutton" target="blank">Fan Page</a>
            </td>
        </tr>
        <tr height="100%"><td align="left">        
            <div id="fb-root"></div>
            <div id="alt-content" style="">
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </div>
        </td></tr>
        
        </table>    
</body>
</html>

Есть ли у фб as3 сдк для запросов из флешки - не знаю. Если есть, там все еще проще наверняка) Мне js удобнее, т.к. одно приложение на все соцсети, только ифрейм разный.

GraphAPI_Desktop_1_8_1.swc - это для аир, оно вам не нужно. Да и реквесты там не пашут уже несколько лет)

alexxus · 08.05.2014, 23:08

alexxus
как-то так. Делал давно, почистил от лишнего, может чего нужно зацепил) Элементарно все, по доке на фб делается. Да и примерно полно в гугле.

Да. такие примеры видел. Может быть я что-то не так понимаю, но мне бы увидеть пример as3 кода флэшки, который вызывает эти ф-ии.
Это делается с помощью ExternalInterface?