With the Facebook Connect API comes javascript functionality. This means no server-side scripting needed. You can create your application on Facebook and connect to it from your website thought javascript. Use the API Key and Secret Key to connect to you application. Make sure your callback URL is set on Facebook to be the URL of the page you are connecting from.
Create your customized Facebook Connect login button through this wizard. Paste in the code into your site.
Enabling calls to the javascript API on Facebook:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/sv_SE" type="text/javascript"></script>
Generating the login button on your site:
<fb:login-button v="2" size="medium" onlogin="window.location.reload(true);">Log in to Facebook Connect</fb:login-button>
The Facebook Connect login will appear in a pop-up window. When successfully logged in, the window closes and your main page reloads.
The output
In the Javascript function FB.ensureInit you can then put in your API calls and generate your HTML from that. Below is an example of showing selected information from a user’s profile.
<script type="text/javascript">
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function () {
FB.Facebook.get_sessionState().waitUntilReady(function() {
var session = FB.Facebook.apiClient.get_session();
FB.Facebook.apiClient.users_getInfo([session.uid], ["about_me","books","interests","movies","music",
"religion","tv","quotes","education_history","political","sex","meeting_for"],
function(result) {
var markup = "";
for(var o in result[0]) {
markup += "<br>" + o + " : " + result[0][o];
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
});
});
});
</script>
Share on Facebook
