I'm having a very bizzare issue with Facebook's scrollTo(). Here's my relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
FB.Canvas.setSize({ width: 810, height: 5000 });
//FB.Canvas.setAutoGrow();
};
(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 scrollToQuestion(top) {
FB.Canvas.scrollTo(0, top);
}
</script>
Here's the bizzare issue, the code on it's own does NOT work. HOWEVER while using firebug and putting a breakpoint right on the FB.Canvas.scrollTo(top, 0); line than the functionality works. What's going on...?!
EDIT: Finally figured it out... for some odd reason top variable was coming in as a string of some sort. I had to change the call to the function like this:
var top = 0;
top = parseInt($('.top'"]').position().top);
scrollToQuestion(top);
This fixed my issue.
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 am attempting to use the Facebook getAuthResponse() function and it is returning the following error:
function () {if(!FB._oauth)throw new Error('getAuthResponse called when OAuth2 support is '+'disabled. Please fix.');return FB._authResponse;}
I am using the following for my initial Facebook Auth:
FB.init({ appId: 'xxxxxxxxxxxxxxx",
status: true,
cookie: true,
xfbml: true,
oauth: true
});
And the following code to load the JavaScript SDK:
(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);
}());
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, 'click', initialize);
If anyone could shed any light on what's going on here I'd greatly appreciate it.
As far as I remember this was a setting in https://developers.facebook.com/apps/XXXX/advanced page. Have you checked that?
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;
});
Is there any way to send apprequests if your application is a website?
I reported a bug on facebook http://developers.facebook.com/bugs/182553325173000 but I do not know if this is possible or not
yes you can do this by adding the JS API,
before <body> add:
<script type="text/javascript">
function inviteFriends(){
var receiverUserIds = FB.ui({
method : 'apprequests',
message: 'YOUR CUSTOM MESSAGE',
},
function(receiverUserIds) {
console.log("IDS : " + receiverUserIds.request_ids);
}
);
}
</script>
after the <body> include the API (asynchronous method):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //enables OAuth 2.0
});
};
(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);
}());
</script>
and call it:
or
You can do that with the Javascript SDK
it is in the documentation:
https://developers.facebook.com/docs/reference/dialogs/requests/
It's possible, as the other answers have shown, but the user will be brought to your canvas app when they accept the requests
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.