I'm working on a project site that allows people to share stories of events, places and people. I'm still fleshing it out, but I got the idea that I wanted to integrate it closely with Facebook. Vistitors will be able to log in with their Facebook account and have access to all their FB photos and videos to share on my site. Needless to say, a FB sign on would eliminate a visitor's need to create and remember one more account on another site.
FB makes it pretty easy using PHP, but I've never liked PHP. That discussion is for another post...let's just say Coldfusion is more fun. I'm not a CF expert. I might still place myself in the beginner level. However, with just a little more than an hour of translating their PHP code to Coldfusion I was able to get a working example. It was pretty cool to display Facebook stuff on my page. I'm still working on my localhost so I can't show an example, but I'll post the code below.
As I said, this is a project site and I'm still in that "let's see if I can do this" stage. I think mostly developers use info provided by FB for advertising purposes. That doesn't really interest me. So, other than that and what I've mentioned, I'm not sure what else I could do with the info from FB. I'm sure more research will be done.
On to the code:
I created two pages. The first page allows the visitor to sign into Facebook if they aren't already. Place the following attribute in the html tag. This allows your page to use the Facebook Markup Language (FBML).
xmlns:fb="http://www.facebook.com/2008/fbml"
Anywhere in the body, place this FBML tag. This displays the Facebook login/logout button. When logged in, FB stores a cookie for that user containing their UID and some other stuff.
<fb:login-button autologoutlink="true"></fb:login-button>
Finally for this page is the code that allows your page to use Facebook's JavaScript SDK. Place this code block right above the closing body tag. Replace 999999999999999 with your app id.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '999999999999999', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
The second page is where I retrieve the FB cookie and display some Facebook stuff. Again on this page, put the XFBML link in the HTML tag. First, I check for Facebook's cookie:
<cfif isDefined("cookie.FBS_999999999999999")>
Facebook encloses their cookie in quotes. So, with this code I remove the first and last quote:
<cfset fbc = #Right(cookie.fbs_999999999999999, len(cookie.fbs_999999999999999) - 1)#>
<cfset fbc = #Left(fbc, len(fbc) - 1)#>
The Facebook cookie contains several elements formed much like a querystring. I broke it up into an array like this:
<cfset myArrayList = ListToArray(fbc,"&")>
This next code block is the meat and potatoes. It creates the string to verify the link between your app and Facebook and stores the visitor's UID in its own cookie. Replace the 0's with your app secret.
<cfset strHash = "">
<cfloop array="#myArrayList#" index="ck">
<cfif findnocase("sig=", ck) eq 0>
<cfset strHash = "#strHash##ck#">
<cfif findnocase("expires=", ck) eq 0>
<cfset myArray = ListToArray(ck,"=")>
<cfcookie name="#myArray[1]#" value="#myArray[2]#">
</cfif>
<cfelse>
<cfset strSig = replacenocase(#ck#, "sig=", "")><br>
</cfif>
</cfloop>
<cfset strHash = "#strHash#00000000000000000000000000000000">
Essentially, what I'm doing in the above code is removing the sig value pair, creating a long string from the remaining pairs and also setting each of those pairs to it's own cookie. When the loop finds the sig pair, I record the value in a variable. At the end, I create the value to be hashed by appending my app secret to the end of the string I created in the loop (strHash, which isn't actually a hash yet).
With this conditional, I'm comparing the sig value to the hash of my long string I just created above.
<cfif #strSig# eq #Hash(strHash)#>
If that condition checks out, then you're golden. You can use http calls like the one below to request JSON responses from Facebook. This will get you basic information about "me", the current user.
<cfhttp url="https://graph.facebook.com/me?access_token=#cookie.access_token#" >
Here are the 2 pages in their entirety:
login.cfm:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>localhost:8500</title>
</head>
<body>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '999999999999999', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
info.cfm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>localhost:8500</title>
</head>
<body>
<cfoutput>
<cfif isDefined("cookie.FBS_9999999999999999")>
<cfset fbc = #Right(cookie.fbs_99999999999999999, len(cookie.fbs_999999999999999) - 1)#>
<cfset fbc = #Left(fbc, len(fbc) - 1)#>
<cfset myArrayList = ListToArray(fbc,"&")>
<cfset strHash = "">
<cfloop array="#myArrayList#" index="ck">
<cfif findnocase("sig=", ck) eq 0>
<cfset strHash = "#strHash##ck#">
<cfif findnocase("expires=", ck) eq 0>
<cfset myArray = ListToArray(ck,"=")>
<cfcookie name="#myArray[1]#" value="#myArray[2]#">
</cfif>
<cfelse>
<cfset strSig = replacenocase(#ck#, "sig=", "")><br>
</cfif>
</cfloop>
<cfset strHash = "#strHash#00000000000000000000000000000000">
<cfif #strSig# eq #Hash(strHash)#>
#cookie.uid#<br>
</cfif>
</cfif><!---if isDefined(FBS_999999999999999)--->
<cfif isDefined("cookie.FBS_9999999999999999")>
<cfhttp url="https://graph.facebook.com/me?access_token=#cookie.access_token#" >
</cfhttp>
<cfimage action="writetobrowser" source="http://graph.facebook.com/#cookie.uid#/picture?type=large">
<cfset xd = "#DeserializeJSON(cfhttp.FileContent)#">
<cfdump var="#xd#"><br>
</cfif>
</cfoutput>
<br>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '999999999999999', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
There are probably a dozen ways to make this code more efficient, but this will get you running. Visit
Faccebook's docs to learn the many ways you can use this.
shoreline on our way back from 
