Search code examples
facebook-fql

Connect my webapp to the facebook api and write fql query using jquery


so far I am following the facebook doc to get started to connect webapp to facebook api. but i am lost somewhere.

"<script>"
$(document).ready(function() {
    $.ajaxSetup({
        cache: true
    });
    $.getScript('//connect.facebook.net/en_US/sdk.js', function() {
        FB.init({
            appId: '{app-id}',
            version: 'v2.5' // or v2.0, v2.1, v2.2, v2.3
        });
        $('#loginbutton,#feedbutton').removeAttr('disabled');
        FB.getLoginStatus(updateStatusCallback);
    });
});
"</script>"
  1. where and how should i wright the fql query
  2. what is the access token, does it changes over time for same page.
  3. where should i give the access token to get the data from facebook.

Solution

  • <html>
    <head>
    <meta charset="utf-8"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
    </head>
    <body style="background-color:#cfeae3;">
    <script>
    
    window.fbAsyncInit = function() {
    FB.init({
        appId      : '<your app id>',
        xfbml      : true,
        version    : 'v2.5'
    });
    };  
        (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    function getData(){
        FB.getLoginStatus(function(response) {
        if (response.status == 'connected') {
         city = $('#city').val();    FB.api("<query>",function(responses){
    
        }else if (response.status === 'not_authorized') {
        alert("not auth");
        document.getElementById('response').innerHTML = 'not logged in' ;
        } else {
        alert("not conne");
            document.getElementById('response').innerHTML = 'not connected';
        }
    });
    }
    
    </script>
    <div class="container">
    <div id="tfheader"  align="center">
    <input type="text" class="tftextinput" name="q"   id= "city"/>
    <input id="btn"  class="tfbutton" type="submit"  onclick="getData()" />
    </div>
    </body>
    </html>