How to get (in object) Facebook data?

Question

I’m creating a Feed (dynamic content list) with the content of a Facebook group’s wall. I know there are some features that Facebook itself provides, such as the Social Plugin - Like Box. After a few tests, I saw some difficulties in handling the CSS of Plugin. In the future I will adapt the Feed to receive from Twitter also then I would like to differentiate the posts of each with the logo of the same. Seeing that this purpose is very specific not only in functionalities, but also comes into question the Design already be ready, I thought it best to just grab the objects (think with JS) and with JS display them in my Feed which is already ready. Any idea?

Answer 1

As I understand your question, you need to make use of the Facebook API to collect data and/or feed of a particular user receiving them in the form of an object.

If you make a HTTP Get to the address graph.facebook.com with parameters appropriate to what you want and a valid Access Token, you will receive back a JSON object with the information you want.

There are three types of data that fall within what are called feed, which leads you to use the appropriate link for what you want to collect, in order to make a HTTP Get and collect information:

• Status updates ^{status updates}

   http://graph.facebook.com/IdUtilizador/statuses?access_token=TokenDeAcessoValido
  

• List of user wall entries ^{Wall stream}

   http://graph.facebook.com/IdUtilizador/wall?access_token=TokenDeAcessoValido
  

• List of items in the user’s home ^{home feed}

   http://graph.facebook.com/IdUtilizador/home?access_token=TokenDeAcessoValido
  

The Facebook documentation for this subject can be found here ^(English).

The information received is a JSON that is an object thus addressing your problem.

Example in Jsfiddle

Below is an example of the data format we receive:

{
   "id": "220439",
   "name": "Bret Taylor",
   "first_name": "Bret",
   "last_name": "Taylor",
   "link": "http://www.facebook.com/btaylor",
   "gender": "male",
   "locale": "en_US",
   "username": "btaylor"
}

The use is relatively simple:

var endereco = "http://graph.facebook.com/btaylor";
$.getJSON(endereco, function(data) {
    var name = data["name"];
    $("#meuElemento").append("<h3>"+name+"</h3>"); 
});

There are also other examples of information that can be collected in the form of objects. On this page ^(English), among many are those I mentioned above.

---

Facebook Query Language (FQL)

Using the Facebook query language, you can perform identical SQL queries and collect the data in a more practical way and without "garbage":

On the page of Overview ^(English), they have a number of examples, but we go by collecting the name as illustrated above:

var endereco = "http://graph.facebook.com/";
var consulta = "fql?q=SELECT name FROM user WHERE uid = me()";
var tokenAcesso = "&access_token=XXXX";

$.getJSON(endereco+consulta+tokenAcesso, function(data) {
    var name = data["name"];
    $("#meuElemento").append("<h3>"+name+"</h3>"); 
});

Queries can be tested on Graph Explorer ^(English).

Answer 2

You will have difficulty changing the plugin’s css because the content will be within an iframe.

You would have to use the Facebook Javascript SDK

Reading content from a fanpage:

FB.api('/113124472034820', function(response) {
  console.log(response);
});

Picking up user data:

FB.api('/me', {fields: 'last_name'}, function(response) {
  console.log(response);
});

Posting content:

var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
  if (!response || response.error) {
    console.log('Error');
  } else {
    console.log('Post ID: ' + response.id);
  }
});