Tuesday, April 26, 2011

Who "Likes" You Baby

received the following email from zhang na:


Hi, i met a trouble , i want to get the value
The total number of people who have liked your Page
but i try all the function , cannot get the lastest data , i used graph.facebook.com/appid//insights/page_fans/lifetime, but i get the old three days data
can you give me an example code ?



Here is my response:


Hi zhang na,

There is an easier way to get the count of the number of people who have liked your page, simply do a "GET" call to the Graph API with the id of the page. Facebook will return the current number of likes along with other public information. Unlike insights, no access token or permissions are necessary to access public information. The code below assumes you have included the Facebook JavaScript SDK on your web page:

function GetLikeCount() {
 var pageId = "19292868552";
 
 FB.api("/" + pageId, function (data) {
  var count = 0;
 
  if (data && data.likes) {
   count = data.likes;
  }
  alert("Page " + pageId + ", likes = " + count);
 });
}

I am always happy to answer questions, assuming of course, that I know the answer. Please post questions in the comments and I will answer as soon as I am able.

Thursday, April 14, 2011

Facebook's FQL Multi-Query


Introduction

At work, my team is currently developing a social media management application. I am focused now on displaying some data charts and tables. All of the code is client-side JavaScript. To populate the charts, we make calls to Facebook.

Facebook has a SQL like query language, FQL,  which allows you to request various data points about your pages, applications, etc. When you need a single data point like your page's total fans, you make a call to the method, fql.query to get your data. For a single data point this is great, but what if you are building a chart and need more than one data point? Making repeated calls to Facebook, will quickly begin to become tedious and slow. Luckily, Facebook has another method, fql.multi-query, which allows you to submit multiple queries at the same time and receive them back in a single result-set.

Submitting Data
Submitting queries to multi-query is only slightly more complicated than doing a single query. A single query request looks like:

var query = “SELECT metric, value FROM insights WHERE object_id=162705687107157 AND metric='page_fans' AND end_time=end_time_date('2011-04-01') AND period=period('lifetime')”;

FB.api({ access_token:accessToken, method: 'fql.query', query: query }, function (data) { // do something });

A multi-query request looks like:

var queries = {
d20110401:“SELECT metric, value FROM insights WHERE object_id=162705687107157 AND metric='page_fans' AND end_time=end_time_date('2011-04-01') AND period=period('lifetime')”,
d20110404:"SELECT metric, value FROM insights WHERE object_id=162705687107157 AND metric='page_fans' AND end_time=end_time_date('2011-04-04') AND period=period('lifetime')",
d20110407:"SELECT metric, value FROM insights WHERE object_id=162705687107157 AND metric='page_fans' AND end_time=end_time_date('2011-04-07') AND period=period('lifetime')",
d20110410:"SELECT metric, value FROM insights WHERE object_id=162705687107157 AND metric='page_fans' AND end_time=end_time_date('2011-04-10') AND period=period('lifetime')"}

FB.api({ access_token:accessToken, method: 'fql.multiquery', queries: queries }, function (data) { // do something });

The only things that change are the name of the method from fql.query to fql.multiquery and instead of query, we now have queries. Please note: queries is a property and not an array. A property in JavaScript is like a dictionary in other languages. So each entry is a key/value pair. The key of each query is used to identify its data in the result-set.

Retrieving Data
One challenge of using multi-query is in changing the returned result-set into more easily used data. Here is what the result-set looks like for the preceding queries::

resultset = {
[ { "fql_result_set" : [ { "metric" : "page_fans", "value" : "31" } ],
   "name" : "d20110401"
 },
 { "fql_result_set" : [ { "metric" : "page_fans", "value" : "31" } ],
   "name" : "d20110404"
 },
 { "fql_result_set" : [ { "metric" : "page_fans", "value" : "31" } ],
   "name" : "d20110407"
 },
 { "fql_result_set" : [ { "metric" : "page_fans", "value" : "31" } ],
   "name" : "d20110410"
 }
]};


The resultset neatly encapsulates all of the information asked for by the query. Please note: the keys of the request are now identified by the name keys of each fql_result_set. Unfortunately, this data is a bit cumbersome to work with. For displaying charts an array is much easier to use. So I wrote the following general purpose method to change the result-set into an array.

FilterData: function (data, processedData, criteria, name) {
 var prop, ptr, type;
 for (prop in data) {
   ptr = data[prop];
   type = typeof (ptr);
   if (type === "object") {
     // is this the field holding the desired data?
     if (ptr && ptr.metric && ptr.metric === criteria) {
       processedData.push({ metric: ptr.metric, value: ptr.value, name: name });
     } else {
       // search deeper into the object
       this.FilterData(ptr, processedData, criteria, name);
     }
   } else if (type === "string" && prop === "name") {
     // save the name of the current query
     name = ptr;
   }
 }
}


The FilterData method uses recursion to search through the JavaScript property, data. Each time it finds a match to criteria, it pushes a new value onto the array, processedData. The value pushed onto the array is a property consisting of: the name of the query, the name of the metric, and the value of the metric. This design allows the method to be able to search through result-sets which have more than one metric returned.

Summary
It is always a best practice to minimize the number of out of process calls your application makes. Facebook’s multi-query makes it easy to get all of the data you need in one call.

Saturday, April 9, 2011

Dynamic DOM Manipulation Using JavaScript and jQuery

I gave a talk to the Southern California .NET Developers Group on Wednesday, April 6, 2011. It was entitled, "Dynamic DOM Manipulation Using JavaScript and jQuery." I went deep into the subject, but I think I was clear. Through out the presentation, during the break, and afterwards, people asked the kinds of questions which let me know they understood the material. I am hoping to give the talk to another local group after I have tightened it up a bit.

April 6th at SoCal.NET Dev Group

Starting tomorrow, I will begin blogging on actual code development. My first blog will be on efficiently reading HTML input tags in JavaScript.