Server Side Guy

So in my last blog post “Mobile app protocols. Open from your mobile Safari!” I talked about how to construct protocol links for apps. You can essentially link to a Facebook page that will open in your Facebook app.

Upon testing and playing with it I also noticed that the twitter:// protocol opened twitter on my Macbook desktop. I installed the app, so that was especially fun and interesting to play with.

One thing I want to walk through is how to construct your Facebook Protocol page link. Facebook has a very specific schema for it’s protocols and it’s not as straight forward as Twitter is.

First element is of course fb://

Now we need to find the user id of the Facebook page:

1. Go to the Facebook page.
2. Update the url to say something like graph.Facebook.com/(whatever page you are on)
3. You will notice that this just takes you to a page with a bunch of data.
4. Look for the “id” data set. Thats your data.

Ok so now that we have that, simply construct “fb://profile/(your id)”.

You will be all set to trigger mayhem across the board.

I feel this post is useful because you cannot always find your Facebook Profile Id.

So you are developing your mobile site and were asked to open links inside of apps. Maybe you are just feeling ambitious!

Well this is my instructions for linking app protocols while not completely isolating people who don’t have the apps.

Lets start by discussing the main barriers we have. Inside of native apps we have the ability to test “canOpenURL” but this is lost in browsers. Browsers will not accept any protocols such as twitter:// or fb:// . So what really happens when you send those protocols is the phone does a GET, upon the response it sees the protocol is fb:// or twitter:// or any:// and if it is supported on the phone, it will trigger the respective app to open.

The browser will NEVER get a return from the GET it posted. So there is literally no current way to test if protocols are supported on a phone using any type of javascript or PHP that I know of. (NOTE: if YOU do, comment that would be awesome).

First lets set up our element links. Instead of using hrefs we are going to load both a browser link, and an app protocol link as data attributes. It’s mobile browsers so they should all support data attributes.

<a data-link="fb://profile/YOURID" data-browserLink="http://facebook.com/YOURPAGE" class="fbLink" target="_blank"><img src="<?php bloginfo( 'template_url' ); ?>/images/facebook.png"/></a>

So this is the basic link element. data-link is your link for people with the facebook app. data-browserLink is your link for people who don’t have Facebook. Now that you have that lets move onto the execution part of this. Use the class to trigger a click event in javascript/jQuery. We should also make a global variable and you will find out why in a little bit.

$(document).ready(function(){
			 $(".fbLink").click(testLink);
 
		   });
//This should trigger a function that you have named "testLink"
 
var webURL = '';

Now write your function.

What it should essentially do is:

Change your document location to your protocol link, triggering a GET.

Wait for a response and then offer the user the ability to open the link in their mobile browser.

function testLink(){
				//set webURL so that it still has it's definition in the timeout function.
				webURL = $(this).data('browserlink');
 			 document.location = $(this).data('link');
 				 setTimeout(function(){
			    if(confirm('You do not seem to have this app installed. Would you like to view it in your browser')){
 				     window.open(webURL);
 		   }
 			 }, 100);
			}

This is the fix I came up with.

One note: You will probably always get the option to open in browser from the confirm. That’s because the browser never seems to actually receive a response.

Recently for a site I’ve been working on we wanted to have the ability to track a great deal of user activity without them having to go through a “Register User” process. Facebook Connect was a logical choice since almost everyone uses it now especially the target market for our site.  Facebook Connect is very easy to implement however most of the tutorials and beginners guides have you use javascript. If you just want a user to comment or do other simple actions, this works great but we needed more. That’s when I was pleasured to hear they have PHP library too!

require "library/facebook-platform/client/facebook.php";
$facebook = new Facebook("your app key", "your app secret");
$uid = $facebook->get_loggedin_user(); // will return users id if connected and logged in to your app*
$userDetails = $facebook->api_client->users_getInfo($uid, array ("last_name", "first_name", "name", "pic"));
$pic = $userDetails[0]["pic"];

The above will set the user’s Facebook Profile Pic to $pic. Making a class of my own out all these pulled details, I soon had everything I need easily at hand and I could integrate them right into our site almost right away.

I would suggest taking the time to adjust to the PHP library for anyone wanting to implement Facebook Connect. I feel it is much more versatile and you won’t have to rely on the fact your user has javascript enabled.