i have fb app and a tab, as the contents grows, scrolls appears with the iframe but i want to no scrolls for the iframes but i want scrolls for the whole page instead of the i frames
You also need to start the timer to call autoresize code. In your applications HTML do:
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: "xxxxxxxxxxxxxxx",
status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement("script");
e.async = true;
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
document.getElementById("fb-root").appendChild(e);
}());
//]]>
</script>
Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(50);
};
If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
You can even pass the desired size as parameter
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 600 });
}
The easiest way to hide the scroll bars is to use
FB.Canvas.setAutoResize()
Please refer to the following article/tutorial for further information.
http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/
Related
Is there a way to use the Facebook's Video Embed xfbml.ready in a file:// protocol?
I haven't been able to use this code using that protocol, and I need to see if that is possible, since I'm developing a PhoneGap and currently is not working for me.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{APP-KEY}',
xfbml : true
});
FB.init(config);
FB.Event.subscribe('xfbml.ready', function (msg) {
console.log('READY');
};
(function() {
var e = document.createElement('script');
e.src = 'https://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
i have two Facebook plugins(like and comment box) on my page.
when i login with on plugin it not logins another plugin automatically until i refresh page.
for example : when i login by clicking on like button,my comment box remains in logout state until i refresh page.
please suggest me something good for that problem
my code is as follow
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My app ID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
//alert('edge.create');
setTimeout(aaa, 500);
});
FB.Canvas.setDoneLoading(function () {
alert("Done loading");
});
FB.Event.subscribe('comment.remove', function (response) {
alert('The status of the session is: ' + response.status);
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
function aaa() {
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: false
}
});
}
</script>
<div class="fb-like" data-send="false" data-href="http://www.facebook.com /AiLiveCaptions" data-width="298" data-show-faces="true">
</div>
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num- posts="8" order_by="reverse_time" data-width="280"></div>
You can use
FB.XFBML.parse();
to render XFBML markup in a document on the fly.
FB Documentation
I'm developing an app for a Facebook page with the 'timeline' layout, and I want the height of the app to scale with the content, but the height of the app is fixed at 800px.
The current app settings show that the height is set to 'fluid,' but I have also tried fixing the height to random values and witnessed no change.
How to I get the height of my app to scale to it's content? Thanks for any responses.
Update:
So appending this to my body tag worked.
<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
But I have zero idea why it worked, so I guess I'll change my question to 'what does the above code do?' so I can actually understand what steps to take next time. I'll put this as an answer for now to close off the question though.
This is the proper way to set things up, I just had to stare at it for a while and read the documentation way too many times. Putting the following below the fb-root div worked like a champ.
window.fbAsyncInit = function () {
FB.init({
appId: 'YOURAPPID', // App ID
channelUrl: '/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content
};
// Load the SDK Asynchronously
(function (d) {
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.js";
ref.parentNode.insertBefore(js, ref);
} (document));
Embed javascript code to increase height of iframe
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 810, height:1300 });
}
</script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true,
cookie : true,
xfbml : true
});
</script>
The response by Ashish worked well for me.
I also included a body style to prevent the scrollbars from appearing for a second while the page loads:
body {overflow:hidden;}
I need help figuring out how to appropriately use the FB.Canvas.getPageInfo from Facebook's javascript sdk:
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/
I'm able to get the info and log/alert the data:
function getFbCanvasInfo() {
FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
console.log(fbCanvasInfoObject);
});
}
$("a.GetScrollTest").live( "click", function() {
getFbCanvasInfo();
return false;
});
But I can't figure out how to set that data and then apply it to other elements or functions (i.e. like something below):
$("a#test-link").each(function() {
var fbPosition = getFbCanvasInfo().scrollTop;
$(this).append("<em>The scroll top value is " + fbPosition + "px");
}
I know its not right and I'm missing something here.
BTW these functions are all below my async init and FB root, which appears like so:
<div id="fb-root"></div>
<script type="text/javascript">//<!--
window.fbAsyncInit = function()
{
FB.init({
appId: '223615011031939',
status: true,
cookie: true,
xfbml: true,
oauth:true,
channelUrl: '[MY PROJECTS CHANNEL URL]'
});
var isLoaded = true;FB.Canvas.setSize();FB.Canvas.setAutoGrow(500);
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
;(function($){
$(document).ready(function($){
[THE JQUERY FROM ABOVE HERE]
});
})(jQuery);
//--></script>
Much appreciation to anyone who has advice/expertise! Thanks!
The getPageInfo returns a readonly object. To "set" things, you would need to use the provided setter functions listed in the documentation. One of them to set the size of the canvas is setSize see https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
Also you should cleanup your javascript so the async nature of working with their API is good.
$("a.GetScrollTest").live( "click", function() {
FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
var fbPosition = fbCanvasInfoObject.scrollTop;
$(this).append("<em>The scroll top value is " + fbPosition + "px");
});
return false;
});
So I've been scouring the internet for solutions to remove the scroll bar from my custom tab page on my company's facebook page. Granted, I'm not programmer and figured out how to build this thing yesterday, but would really like fix to this. It seems like there are a ton of solutions to the old format the FB app developer but nothing with the new version.\
I've been attempted to implement a bunch of the canvas size scripts that I have found but either they don't or my page refuses to load.
jsteid
Here is a sample of how i resize my tabs using OAuth 2.0 and new javascript sdk.
http://www.facebook.com/anotherfeed?sk=app_135669679827333
If you are using % to set with they need to be under 100% at about 98% - 96% because of a margin in the frame.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
//FB.Canvas.setAutoResize(); depreceated
FB.Canvas.setAutoGrow(1000);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
to fix the height issue, load the js sdk and set the canvas size
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123456789',
status : false, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setSize({ width: 500, height: 1000 });
</script>
test and see what values fit your need
I think there is a bug with FB.Canvas's size methods on iframe tabs. Height is set properly but scrolls are still there. Only workaround in my case is combination of FB.Canvas.SetAutoResize() + styling 'body' with overflow: hidden.
You need to do this:
Go to your app (https://developers.facebook.com/apps/)
Click 'Edit Settings' on the app in question.
Go to: Settings -> Advanced -> Canvas Settings -> Canvas Height -> select 'Auto-Resize'.
If you still get problems the other suggestions here should help by doing something like...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '12345', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 1000);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Here I set your page height to 1000 -> change this to your page height and I set your app ID to 12345 -> change this to your app id.
I hope this works for you.