Tag: facebook

0

If you want to retrieve public data from Facebook (typically a Page) you nowadays will have to use Facebook Graph API and thus provide an access-token. In the old days you could use some of the available feeds (following the RSS-principles) but that was back then.
I’ve seen some strange hacks around, but it’s quite simple to pull public data with a non-expiring access-token. (Impatient ones go here!)

Access-tokens in short

The idea behind access-tokens is that the system you’re communicating with ‘knows something about somebody’; is that somebody a valid logged-in user, what is that user allowed to do, etc. For every request your application makes, on behalf of that user, you pass that access-token to the system.
Access tokens typically expire; to reduce the chance of getting in the wrong hands (Facebook offers appsecret_proof to prevent hijacking). When the user uses the application access-tokens get renewed in the background, when the user doesn’t use the application before the access-token expires, a new login / authorization action will provide a new one.
Facebook Graph API knows short- and long-term access-tokens, where the short-term tokens are used by the application’s client and the long-termed by the application’s server (using an app-secret).

Let the app do the talking

The access-tokens mentioned above are “user access-tokens”. If you just want to pull out some public data, having users logging in and expiring access tokens is probably not what you want. But you can also in make requests to Facebook’s API on behalf of an a Facebook App, in stead of a user, working with an “app access-token”.
When you create an app at Facebook for developers, you have an app-id and an app-secret. In stead of requesting “oauth” for an app access-token, you can construct one yourself  by combining your app-id and app-secret, when requesting from a server (not client!!), like this:

https://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret

Note: using “appsecret_proof” doesn’t make much sense here

Let’s get practical

I needed to display posts from a Facebook Page via Javascript (with Ember.js to be exact). No further Facebook interaction was needed, so user access tokens were not what I was waiting for, I needed an access token that does not expire, and that I’m in control of, not some user. So I opted for using the “app_id|app_secret”-solution with an app access-token, mentioned above. That I had set up as a proxy on my webserver. The flow now is: Client -> Webserver -> FB API -> Webserver -> Client.

Flow proxy fb api permanent access-token

 

Here’s the method I used at the webserver (in PHP) to make calls to Facebook Graph API

/**
* Retrieves response from an call
* to Facebook Graph API
* on behalf of an Facebook app.
*
* Returns a JSON-string when $returnJson is true,
* when false it returns an object of the
* JSON decoded data.
*
* The object-parameter determines which FB object you
* are requesting (posts, photos etc)
*
* The fields-paramater determines which fields
* of that object should be included in your data
*
* Try things out at the FB Graph API explorer tool first:
* https://developers.facebook.com/tools/explorer
*
* @param string $fbUser (id of fb-user to pull from)
* @param string $appId
* @param string $appSecret
* @param string $appApiVersion
* @param string $object (what object to request. Default: posts)
* @param array $fields (what fields of the object to request. Default: message, created_time)
* @param boolean $returnJson (return JSON-string otherwise object. Default: true)
* @return string / object
*/

public function getFacebookPosts(
$fbUser,
$appId, $appSecret, $appApiVersion,
$object='posts',
$fields=array('message','created_time'),
$returnJson=true
)
{
$fieldsString = implode(",", $fields);
$accessToken = sprintf("%s|%s", $appId, $appSecret);

$fbApiUrl = sprintf("https://graph.facebook.com/%s/%s?fields=%s{%s}&access_token=%s", $appApiVersion, $fbUser,$object, $fieldsString, $accessToken);

$json = file_get_contents($fbApiUrl);
return $returnJson ? $json : json_decode($json);
}

Load the Facebook data in Ember.js

For the ones interested in how you easily can work with the requested Facebook data in Ember, stay tuned and I’ll provide a snippet for your serializer.
Of course we’re using Ember Data to handle all this. First of all, model your data by adding a new model. You will at least have to define those attributes corresponding the fields-parameter from your API request.
For example ‘message’,’created_time’. Now setup your adapter, connecting to your ‘proxied webservice’.
When the data comes back to your client and back to Ember, Facebook has a slight different JSON-format than Ember expects, so we have to serialize it a little.
And what Ember expects depends whether you’re using the ‘old’ or ‘new’ adapter for handling JSON.
The previous de facto standard was the Ember Data RESTAdapter, the current de facto standard is the Ember Data v2 JSONAPIAdapter. What do they expect:

  • RESTAdapter: {“modelNamePlural”:[…]}
  • JSONAPIAdapter: {“data”:[…]}

Ember Data RESTSerializer (using the extractArray method)

export default DS.RESTSerializer.extend({

extractArray: function (store, primaryType, payload) {
const posts = payload.posts.data;
const newPayload = { posts: posts };
return this._super(store, primaryType, newPayload);
}

});

 

Ember Data JSONAPISerializer (using the normalizeArrayResponse method)

export default DS.JSONAPISerializer.extend({

normalizeArrayResponse: function (store, primaryType, payload, id, requestType) {
const posts = payload.posts.data;
const newPayload = { data: posts };
return this._super(store, primaryType, newPayload, id, requestType);
}

});

 

This is the model I’m using
Model

export default DS.Model.extend({

message: DS.attr('string'),
created_time: DS.attr('date'),
status_type: DS.attr('string'),
comment_count: DS.attr('number', {defaultValue: 0}),
like_count: DS.attr('number', {defaultValue: 0}),
share_count: DS.attr('number', {defaultValue: 0}),
link: DS.attr('string'),
picture: DS.attr('string'),
caption: DS.attr('string'),
description: DS.attr('string'),
name: DS.attr('string')

});

The fields comment_count, like_count and share_count do not exist in the response from Facebook, they’re nested in ‘comments’, ‘likes’ and ‘shares’ objects. With the serializer’s normalize method you can make the response-data fit into your model.
Another thing I did here is adjusting the date-format given by Facebook, as Moment.js by default will fail with that input on Safari and IE, when there’s no colon in the time-zone.

Add this method to your serializer (either RESTSerializer or JSONAPISerializer) to get the model straight:

normalize : function (modelClass, resourceHash, prop) {
// likes
if( resourceHash.likes.summary.total_count ) {
resourceHash.like_count = resourceHash.likes.summary.total_count;
}
// comments
if( resourceHash.comments.summary.total_count ) {
resourceHash.comment_count = resourceHash.comments.summary.total_count;
}
// shares
if( resourceHash.shares && resourceHash.shares.count ) {
resourceHash.share_count = resourceHash.shares.count;
}

// dates
// prevent "2016-02-16T12:59:03+0000" from failing in moment.js
// convert them to "2016-02-16T12:59:03+00:00"
// (note colon in milliseconds)
resourceHash.created_time = resourceHash.created_time.replace(/([A-Z0-9:-]\+[0-9]{2})([0-9]{2})/, "$1:$2");

return this._super(modelClass, resourceHash, prop);
}
0

Endnu en ‘socification’ af en begivenhed ved hjælp af produktet Socify.it.
På Lanzarote Running Challenge 2012 har vi postet fotos af løbere ‘in action’ live på Facebook sammen med deres timing-results.

socify.it flow Running Challenge

I detaljer

Opsætning er magen til den fra IronMan Lanzarote 2012 tilbage i maj måned.
Men nu har vi (Rasmus Johnsen og jeg) involveret co-starfisher Stian Eide, for at realisere en ‘kamera-løsning’. Ved hjælp af et IP kamera har vi etableret en løsning der tager billeder af løberne, når de passerer kameraet, som postes direkte til Facebook.

Off-line løsning

Ved udfald af netforbindelse et eller andet sted i netværket, kan løbet ‘genafspilles’ på hvilket som helst tidspunkt. Løsningen er dermed ‘bulletproof’ i uheldige situationer, hvor internetforbindelsen falder ud.

Internet på bjergtoppen

Ved et af løbene havde vi placeret et kamera på en bjergryg. Netværk specialisten Stian Eide havde skaffet internetforbindelse via et link fra Club La Santa komplekset helt op til bjergryggen!! Herfra postede vi billeder live til Facebook!

Resultater på Facebook:

socifyit-running-challenge-2012-10k-road-race

socifyit-running-challenge-2012-Ridge-Run

socifyit-running-challenge-2012-21K-La-Vuelta-de-Tinajo

socifyit-running-challenge-2012-heroes

0

Til Edvard Munch udstillingen på ARoS kunstmuseum, har sejKo (efter idé af co-starfisher Rasmus Johnsen, designet af co-starfisher SuperSchwarz) udviklet en ‘socaik’. Kort sagt er det en social levende mosaik af Munchs udstillede værker.

Socaik i detaljer

Alle udstillede værker af Edvard Munch er samlet i et fotoalbum på ARoS’ Facebook Page. Socaiken henter via Facebook Graph API det antal ‘likes’ hvert billede har. Alle billeder bliver placeret i en mosaik, og størrelsen og placering bliver bestemt af det antal likes det pågældende billede har fået. Mosaiken opdateres hver 30. sekund.
Denne socaik bliver projekteret på en væg i ARoS, men findes også som HTML side på dette link, og kan også embeddes. Alle fuld-responsive, så det kan vises på en enhver enhed.
For at påvirke socaiken skal man ‘synes godt om’ et af billederne enten ved at besøge Facebook fotoalbumet eller ved at scanne QR koden af et billede når man forlader udstillingen. Billeder af værkene er stillet op på række, med en QR kode under som man kan scanne med sin smartphone, og på denne måde “synes om” et billede.

Edvard Munch Socaik

Evard Munch-socaik

0

I august og september måned har sejKo udvidet produktet “Socify.it” (beskrevet i tidligere indlæg).
Kort sagt er Socify.it i stand at poste data, modtaget fra eksterne ‘sensorer’, på ens vegne, på ens sociale profil.

Integration til TracTrac

Til Eurosaf Youth European Championship 2012 kapsejlads, har vi tilføjet en ny sensor til Socify.it; TracTrac.
TracTrac er verdens førende leverandør indenfor GPS tracking og meget engageret i sejlsporten.
Alle både har en GPS tracker om bord, og TracTrac fortæller Socify.it hvornår de har startet, rundet bestemte mærker og finished, som vi poster på deltagernes Facebook profiler.

Poste billeder

Den seneste feature er at Socify.it kan poste billeder med relateret data på vegne af en bruger.
Til KIA Cold Hawaii Worldcup windsurfing var Socify.it en del af et innovationsprojekt, hvor den nye feature blev taget i brug for første gang. Vi har sat en integration op med iScore, PWAs nye scoring system (sejKo har for to år siden har præsenteret PWA en prototype for sådan et system), som kan fortælle os hvem der har vundet og med hvor mange point (forskel). Et billede af vinderen bliver postet på dens Facebook (Fanpage) timeline, alt styret via integrationen til PWA iScores API.


Eurosaf Youth European Championship 2012


Find de 3 socifications…
Svar: 1) Kenneth Danielsen starter sin heat -højre i timeline. 2) Kenneth Danielsen har vundet sin heat -ventre i timeline. 3) Martin ten Hoeve starter sin heat -øverst i tickeren!

2

SejKo og co-starfisher Rasmus Johnsen er sammen om produktet, Socify.it. ‘Socifying’ er et verbum fra et nyt begæb vi har indført, “socification”, der stammer fra “social notification”. Produktet kan poste på vegne af mennesker på deres sociale media profiler, når de har gang i noget betydningsfuld for dem, men ikke selv er i stand til at poste. Deres livs skrapbog bliver vedligeholdt med deres vigstigste begivenheder.
Data som Socify.it sender ud kommer fra en ‘signal provider’, der har styr på hvad vedkommende præcis har foretaget sig,

Socify.it er en slags ‘middleware’ der kobler sociale profiler og signal providers sammen. Se på Socify.it som en adapter; et enhvert system kan nemt sende data til Socify.it som laver relevante posts på sociale medier.
Til Ironman Lanzarote 2012, har vi koblet deltagerens Facebook profiler sammen men Club La Santas tidtagningssystem: Alle deltagere har en chip på sig. Hver gang en registrede deltager passer en tidtagensport sender systemet data (course, tid brugt, nuværende placering) til Socify.it som poster det ud på vedkommendes Facebook timeline / wall. Famile og venner ‘der hjemme’ hepper løs på Facebook via kommentarer og likes. Deltagerne bliver til helte i deres eget miljø, uanset hvor godt de klarer sig i løbet.
Se Rasmus Johnsens præsentation af “socifying Ironman Lanzarote 2012”.

Her et par screenshots af nogle Facebook profiler, som Socify.it har fyldt op:

Facebook timeline af amatøren Ole Storm

Facebook timeline af pro-løber (og vinderen af dette løb) Michelle Vesterby