I’ve been playing with the Facebook SDK over the last few weeks and thought I’d share a little of my frustrations…

Firstly, when working with a page rather than a user it can be very frustrating. Finding the User ID of the page is troublesome in itself – this page helped : http://findmyfacebookid.com.

Firstly, download the Facebook SDK from GitHub and include the facebook.php file – then you will need to register your application to get the App ID and Secret.

 require_once("php-sdk/facebook.php");

 $config = array();
 $config[‘appId’] = 'YOUR_APP_ID';
 $config[‘secret’] = 'YOUR_APP_SECRET';

Once you have these and your access token you can start to write queries. Here’s a query to get a list of events for a particular user (in this case a Facebook Page).

     require_once("php-sdk/facebook.php");

$config = array();
$config[‘appId’] = 'YOUR_APP_ID';
$config[‘secret’] = 'YOUR_APP_SECRET';

$access_token = 'ACESS_TOKEN';

// run fql query
$fql_query_url = 'https://graph.facebook.com/'
. 'fql?q=SELECT+eid,+name,+pic,+start_time,+end_time,+location,+description+FROM+event+WHERE+eid+IN+(+SELECT+eid+FROM+event_member+WHERE+uid=ID_FROM_LINK_ABOVE+)+ORDER+BY+start_time+asc'
. '&access_token=' . $access_token;

$fql_query_result = file_get_contents($fql_query_url);
$fql_query_obj = json_decode($fql_query_result, true);

ff

I’ve recently ditched using the CSS pseudo class :hover.

CSS has a few pseudo classes that existed way before mobile was being considered – how were to know we would have devices without those pesky little mice hovering all over the screen?

The problem I have found is that mobile touch events often ‘activate’ the hover class but do not register the click – but elements without a hover class work just fine. A single click just displayed the hovered element in all its glory but went nowhere – in the best cases a second click took you to the link, in the worst cases the link died altogether! Rendered unclickabbababable by the hover pseudo class.

So what to do?

Well, this is fresh out of my brain so don’t take my advice quite yet but I’ve switched to using javascript to render any hover actions for now. In my javascript (jquery), I identify the device and serve a hover class if it will accept it.

http://detectmobilebrowsers.com

I’ve used the detectmobilebrowsers scripts with great success recently, detecting mobile user agents to serve flash/non-flash content from an old (pre-jquery) site. I even added my own to the list to look for the latest Nexus-7 device.

Once you have identified your device you can choose to serve it a hover effect:

if($mobile){
    $(window).on('hover', '$link', function(){
        $(this).css('background-color' , 'red')
    })
}

It’s clunky looking and long but you get the idea – but more importantly it works. No more dead links.

I’ll probably update this when I create a better, more elegant approach. Probably.