Most people are aware of the benefits of integrating Facebook into their web site. Integrating Facebook Connect makes it easier for users to login and stay connected to your site. Further, the information that Facebook will provide back for someone who is authenticated through Facebook connect is a powerful way to learn about your customers (where they live, how old they are and what they do for work). Finally, integrating sharing functionality can enable cheap, viral marketing for your product.
But how do you get started integrating a Facebook application? I sat down with AgilityFeat’s Allan Naranjo to get his thoughts on how to approach building Facebook application. Allan should know, he’s an award winning developer who also won the Facebook Access Innovation Prize 2012
Considerations for your Application
Before you build your integration with Facebook, you will want to think through the functionality and features that you plan to implement. Determining the level of integration with Facebook can have ripple effects for your overall system in terms of maintenance and performance.
Is your application going to use Facebook as the only datasource and run for a short period of time?
If so, you want to build a highly coupled integration in which the components of your application depend solely on Facebook as a datasource. This will reduce development time but comes with a high risk as any changes Facebook makes may have large repercussions in your system. Only on the rarest of occasions would you want to create a highly coupled integration. This is commonly used in short marketing campaigns such as surveys and contests.
Do you want to tie your application to communicate with other data sources like Twitter or Google?
A highly cohesive integration may be for you. Highly cohesive integrations will create well-defined classes for specific jobs. For example, if you want to allow users to register via multiple sources (Facebook, LinkedIn), you’ll want separate modules. Think of this as creating an integration for each datasource rather than a single, generic integration. The advantage here is that you can remove Facebook as a datasource if you business dictates without having to re-do the rest of your system.
Allan Naranjo
In most cases, however, you will want a hybrid integration that allows users to leverage Facebook for logins and activity sharing but does not rely on Facebook to use the site. Instead, users can log in with a username and password instead of Facebook connect and get value from your site without ever sharing any information from your site with Facebook.
High level overview of integrating a Facebook application with your website using the Facebook Graph API (Javascript SDK)
1. Get your App ID/API Key– The first step to integrating your Facebook application is to obtain your App ID/API Key. This key will be used to validate your application. It ensures that there is a secure connection from you users Facebook activity to your application. Facebook has made this process very simple;
-Log in to Facebook ,
-Go to https://developers.facebook.com
-Create a new Facebook application.
2. Integrate your application– Once the application is created, you will see you App ID/API Key. You will embed this key to make calls to Facebook. By using the following code you’ll be able to start using the Graph API.
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : ‘YOUR_APP_ID’, // App ID from the app dashboard
channelUrl : ‘//WWW.YOUR_DOMAIN.COM/channel.html’, // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>
One important thing to note is that a Facebook application has a “Site URL”, that url is the exact URL that will be using the Facebook application, if the domain does not perfectly match you’ll get a console log like this:
“Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains”
Therefore if you are working in a development environment, you might need to create a separate application and use the App ID/Secret for each environment that you eventually need the application to operate within.
Want to learn more or get help integrating Facebook with your application? Contact us here to get started.
