Friday, August 13, 2010

SalesForce-Facebook Integration


While working with salesfoce-facebook intigration, I faced an issue at the very first step. The problem was fb:login-button was not rendering in IE(7 & 8) while it's rendering perfectly in safari, firefox & chrome.
After spending two days I have got the solution for this issue. Here is the solution..
1-There will be two pages two show login button.
2-In First page (FBLogin) write code to render fb:login-button but notice that in this I am not using any apex control apart from the
in this page below line is important to render login button

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">

3-Now create a second page (ConnectFaceBook) and include page-1 in a iframe.


Now check it in IE..It's working now :)

here is the code of both pages-

here is the code of both pages-

page -1 (FBLogin)
===============================
<apex:page sidebar="false" showHeader="false">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<head><title>FB Login</title>
</head>
<body>
<div id="fConnect">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<div id="user">
<fb:login-button v="2" length="long" autologoutlink="false">Connect</fb:login- button>
</div>
</div>
<div id="fb-root">
</div>

<script>

window.fbAsyncInit =
function() {FB.init({appId: "Your App Id",
xfbml: true,
status: true});
};

(function()
{
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
elem.async = true;
var ctrl = document.getElementById('fb-root');
ctrl.appendChild(elem);
}());
</script>
</div>
</body>
</html>
</apex:Page>





page -2 (ConnectFaceBook)
===========================================
<apex:page controller="ConnectFaceBookController" showHeader="false" sidebar="false" cache="false" id="page1" >

<apex:form id="form1">

<apex:pageBlock id="block1">

<apex:iframe src="/apex/FBLogin" id="frame1">

</apex:iframe>

</apex:pageBlock>

</apex:form>

</apex:page>




Thanks
Kapil Goutam