I'm working on including a list of events posted to a Facebook Page on my website. The catch is that I'm trying to find a purely client-side JavaScript way of doing it. I am unable to use PHP. I may be able to use ASP.NET but I am struggling with the Facebook C# SDK's severe lack of documentation. I have nearly a perfect implementation of what I want to do in JavaScript, however:
(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/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).ready(function(){
FB.init({
appId: 'MY_APP_ID',cookie: true,xfbml: true,status: true });
var token;
FB.getLoginStatus(function (response) {
if (response.authResponse) {
token = response.authResponse.accessToken;
// Get and parse list of upcoming events
$.getJSON("https://graph.facebook.com/mypagename/events?access_token="+token+"&callback=?",function(json){
for (item in json.data) {
$("#eventsFromFacebook").append('<h3><a href="https://www.facebook.com/events/' +json.data[item].id +'/">' +json.data[item].name + '</a></h3>');
$("#eventsFromFacebook").append('<strong>' +json.data[item].start_time +'</strong>');
getItemDescription(json.data[item].id);
$("#eventsFromFacebook").append("<div id='event"+json.data[item].id+"'></div>");
}
});
// Get and parse event descriptions. This is a separate call for each event.
function getItemDescription(id) {
$.getJSON("https://graph.facebook.com/"+id+"?access_token="+token+"&callback=?",function(jsonItem) {
$("#event"+id).html('<p>' +jsonItem.description+'</p>');
});
}
} else {
// not logged in
$("#eventsFromFacebook").append("Not getting access to Facebook :(");
}
});
});
(This requires FB JS SDK, jQuery and the following HTML:)
<div id="eventsFromFacebook"></div>
As is, this code successfully pulls the events posted on a specific Page I admin and posts them on my website, under the condition that I am logged into Facebook using the account connected to both the App and Page. However, if I am not logged in as a person that has authenticated with my App, I can't get the right access to be able to do this.
Is there a purely JavaScript way to allow me to get the access token I need to get event information from a Page when I am not logged in? I don't want to require users to authenticate with my App on my website to be able to see the information. Ideally, I would like them to be able to see the events list without being logged into any Facebook account. Is this possible?
If this isn't possible, as a fallback option, would there be a way to allow users who have liked the Page (without authenticating with the App) to at least see events? That way, at least I can throw a link to my Facebook page in the event that someone isn't logged into Facebook (or give them an incentive to like the Page).
Thanks.
Is there a purely JavaScript way to allow me to get the access token I need to get event information from a Page when I am not logged in? I don't want to require users to authenticate with my App on my website to be able to see the information. Ideally, I would like them to be able to see the events list without being logged into any Facebook account. Is this possible?
Yes, it will be possible, HOWEVER not recommended as you will expose a page access token client-side.
What you do is first get you admin user's user access token. Then extend it to the 60 day variety. Then HTTP Get to me/accounts/PAGEID?fields=access_token&access_token=60DayUserAccessToken and grab that access token (should be a 60 day variety, if not, call to extend it). Use this access token client-side (ewe!! not good to expose this!!) to grab the page's events using me/events?access_token=60DayPageAccessToken. Then every 59 days or so, you will have to generate a new 60 day access token to be included in your JavaScript (please, please don't do this as exposing your acccess token is really really bad).