Create an Facebook event using JQuery and the graph api programmatically

Question

Is there a way to using a JQuery function to programmatically create an event to a users Facebook page? I have created an app that asks the user for the create_event permissions through:

<input type="button" value="Add to Facebook" onclick="document.location='http://www.facebook.com/dialog/oauth?client_id=<AppID>&redirect_uri=<redirecturi>&scope=create_event,offline_access,manage_pages&response_type=token'">

Which returns correctly to the redirect page with the parameters access_token and expires_in. The page uses the following code to parse out the data (less elegant, but I'm just trying to get this to work as a test)

<script>

$(document).ready(function(){
    var url = window.location.href;
    var fbParameters = url.substring(url.indexOf('#')+1,url.length);
    var accesstoken;    

    if(fbParameters.indexOf("access_token=")>=0){
        accesstoken = fbParameters.substring(fbParameters.indexOf("access_token=")+("access_token=").length,fbParameters.length);
        accesstoken=accesstoken.substring(0,accesstoken.indexOf('&'));
        console.log(accesstoken);
    }

    var params = {'access_token':accesstoken,'name':'test','location':'someplace','start_time':'1322719200'}

    $.getJSON('https://graph.facebook.com/me/events?callback=?',params,function(data){console.log(data)});

});

</script>

I have also tried using the JQuery $.post and also manually entered in the URL to attempt to create this test event. This returns:

XMLHttpRequest cannot load https://graph.facebook.com/me/events?. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

I have also tried modifying the URL to /User ID/events instead of /me/events. Facebook keeps returning:

({
    "data": [

    ]
});

If I remove "events" from the URL, it accesses the user information as expected. Does anyone know if what I'm trying to do it actually possible? I feel like I am missing something obvious.

Answer 1

Calling the Graph API REST functions doesn't really work well with pure JQuery because of the same origin policy (http://en.wikipedia.org/wiki/Same_origin_policy).

It's a better idea to use the JavaScript SDK which Facebook provide, it creates a hidden iframe to execute tasks on the facebook domain and passes the events back to your page quite nicely dealing with all of the authentication and event passing issues for you.

You can find code samples, documentation and snippets on the facebook developer website (http://developers.facebook.com/docs/reference/javascript/) and here (http://developers.facebook.com/tools/console/)

For example creating an event looks like:

var event = {  
    name: 'Name of your event', 
    description: 'Description of your event',
    location: 'Location of event',                        
    start_time: Math.round(new Date().getTime()/1000.0), // Example Start Date
    end_time: Math.round(new Date().getTime()/1000.0)+86400 // Example End Date
};

FB.api('/me/events', 'post', event, function (result) {
    console.log(result); 
});