7

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.

Kara
  • 6,115
  • 16
  • 50
  • 57
Sam Johnson
  • 943
  • 1
  • 13
  • 19

2 Answers2

6

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); 
});
CameraSchoolDropout
  • 883
  • 7
  • 16
  • You cannot create events via the Graph API. see https://developers.facebook.com/docs/graph-api/reference/event – Meekohi Jul 25 '17 at 21:53
0

Well after looking into your code I found that in params variable you are using "accesstoken" which should be "access_token". Also use $.post to create event on Facebook. Also use standard date/time format for "start_time". Let me know if it works.

Rohit Singh Sengar
  • 1,001
  • 8
  • 13
  • The access token was a typo I had copied over when messing around with different ways of fixing it, I actually had it correct most of the time. Also, facebook will accept a variety of start/end time entries and will convert them correctly. In my post, I described how I tried using both post and getJSON to no avail. The issue is actually that you must post a form to Facebook, and it has issues with the same origin as described by the answer above. – Sam Johnson Jun 09 '11 at 00:20