Menu
I have used a fb script to increase a size of canvas. Here is the code..
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '171963559525911', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ width: 1500, height: 1500 });
};
(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>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
It is working in all browsers I've tested except IE8. In fact also working in IE9 but not working in IE8.
Please suggest me to solve the issue.
Thanks
312
This is what I use for extending the size of my canvas and it works in all browsers:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function()
{
FB.XdComm.Server.init("/xd_receiver.htm?v=2");
FB.CanvasClient.startTimerToSizeToContent();
});
function onWindowResized(info)
{
var canvasInfoDiv = document.getElementById("CanvasInfo");
var text = String.format("window ({0}, {1}), page ({2}, {3}), canvas({4}, {5}), scrollPos({6}, {7}), canvasPos({8}, {9})",
info.window.w, info.window.h,info.page.w, info.page.h,
info.canvas.w, info.canvas.h,
info.scrollPos.x, info.scrollPos.y,
info.canvasPos.x, info.canvasPos.y);
canvasInfoDiv.innerHTML = text;
}
</script>
You need to have the xd_receiver.htm inside of a publicly accessibly directory as well. Here is the contents of that file:
xd_receiver.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>cross domain receiver page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>
EDIT:
$(document).ready(function(){
FB.init({appId:'your-app-id', status:true, cookie:true, xfbml:true});
$(window).load(function(){
FB.Canvas.setSize({height:1100});
});
});
Obviously set the height to whatever the height of your content is. Before I had:
FB.Canvas.setSize({height:$('html').height()});
But IE seems to not like that. Shouldn't have to explicitly set the height #, but had to in this case.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
