Can we integrate javascript sdk for facebook with salesforce? - facebook

Question

I am trying to integrate javascript sdk for facebook with salesforce. I followed all instruction given on the link : http://developers.facebook.com/docs/howtos/login/getting-started/
but I am not able to login. I copy pasted same code in facebook developer consol and it works fine. Now I am confused, am I missing out something while integrating with salesforce or salesforce do not support javascript sdk for facebook?

Answer 1

Create a VF page with the below code. Insert your app id in the below page and you should be good to go. I have added the sdk in the static Resource.
<apex:page >
<div id="fb-root"></div>
<script type="text/javascript" src="/resource/jQueryLatest"></script>
<script>
var j$ = jQuery.noConflict();
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'yourappId', // App ID from the App Dashboard
channelUrl : '/resource/alljs', // Channel File for x-domain communication--- added the sdk in static resource.
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
j$(document).ready(function(){
j$("#loginButton").click(function(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name+ '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
});
j$("#getAllFriends").click(function(){
FB.api('me/friends', function(response){
// console.log('the response ' + response.data[]);
for(var i =0; i< response.data.length;i++){
try{
var html = '<div>'+ response.data[i].name +' </div>';
j$("#jsonDiv").append(html);
}catch(e){
console.log('error name ' +response.data[i-1].name);
console.log('error ---' + e);
}
}
});
});
});
</script>
<input type="button" id="loginButton" value="login to FB"></input>
<input type="button" id="getAllFriends" value="Get Friends"></input>
<div id="jsonDiv"></div>
</apex:page>