I'm trying to resize the iFrame in my Facebook canvas app with Javascript. I know how to do this in the code- it's working fine.
However, I can't seem to get it to work in the console, for testing purposes. In the console, FB is defined but FB.Canvas is not (the closest is FB.CanvasClient). Why is that? How can I test iFrame resizing in the console?
You have to run the FB.Canvas inside the fbAsyncInit and after FB.init,
always use window.fbAsyncInit to run the init code after the api load.
//initializing API
window.fbAsyncInit = function() {
FB.init({
appId : APP_ID,
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setSize({ width:810, height:850 });
FB.Canvas.setAutoGrow();
};
You can resize your IFrame through developer.facebook.com
From the app you are working on click on advanced. in that page you will see canvas size. make it Fluid.
Related
For a contest page, I use Page Tab within a Facebook App, but I can't set a Share dialog without getting this error.
window.fbAsyncInit = function()
{
FB.init({ appId: '##### (correctly set)',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
}
window.fbAsyncInit = function()
{
FB.ui({
method: 'feed',
name:'name',
link:'https://expertsmo.ca/_fb/concours/1', // https://apps.facebook.com/expertsmo
caption:'test'
});
}
Here is the App conf
I checked many posts on this error code, most of these problems are caused by the URL not being set; in my case, URL is well set and I still get this error. I tried many many things, still not working ( this solution of a similar case doesn't seem to work because I can't find the field "Website With Facebook Login").
I also use PHP sdk to find out if the user likes the page already, or not.
Really, I can't find the solution to this problem ... any idea? Thanks...
You include the JavaScript SDK two times in the code, only one time with an App ID (that is different from the FB.init call). Make sure you are using the latest code from the Facebook docs and clean up old stuff. That error message comes up when the App ID is not correct, the settings should be fine.
https://developers.facebook.com/docs/javascript/quickstart/v2.0
You also use window.fbAsyncInit in a wrong way, this should only be used once when you open the page. FB.ui should get called on user interaction or you will also get problems with popup blockers.
Btw, you should put ALL JavaScript code right before the closing body tag (for many reasons). Not sure why you put the async function after the opening body tag.
I was searching all possible topics but now solution works for me.
There is my code, which works in all browsers except Chrome. There is just window with An error occurred. Please try again later..
It is identical code from FB documentation.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : {$appId},
frictionlessRequests: true
});
function sendRequestViaMultiFriendSelector() {
FB.ui({ method: 'apprequests',
message: '{_"FACEBOOK_INVITE_WINDOW_MESSAGE"}'
}, requestCallback);
}
function requestCallback(response) {
//callback code
}
</script>
<a onclick="sendRequestViaMultiFriendSelector(); return false;">
This might be because your application is still in sandbox mode.
You have to specify the display option for the dialog ('popup, 'iframe'...)
For example:
FB.init({
appId : {$appId},
frictionlessRequests: true,
display: 'popup'
});
You have not stated if your application is on Facebook or not. The reason this is important is because of the canvas_url parameter of your application settings. If you are on apps.facebook.com/app_namespace, then you'll already have this field filled out. However some projects simply do not operate on Facebook itself. In such cases people don't really "need" to fill in this parameter. It is however necessary for app requests to work.
When a user acts on an application request (IE accepts it), they are redirected to the canvas url of that application. Not specifying the canvas url can nullify the request. This might also be the reason for the error.
Try setting your canvas url. You can even have it redirect to your proper URL, it doesn't have to "do" anything else.
I currently have a like button on my app and I need to detect when this is clicked so that I can trigger some javascript.
Currently I use this:
FB.Event.subscribe('edge.create', function(response) {});
In order for this to work you must use the FBML version of the like button. It does not work with the HTML5 version.
I am wondering what the situation will be from Jan 1st when FBML is deprecated?
Thanks
Actually, you can do what you're wanting to do with the HTML5 version. You're Javascript will look something like this:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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
});
// CUSTOM LISTENING CODE, or anything else using FB.something, goes below
// SAMPLE LISTENING CODE
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
FB.Event.subscribe('message.send',
function(response) {
alert('You sent the URL: ' + response);
}
);
// END SAMPLE LISTENING CODE
};
Note that you'll also have to set up a channel file, explained in the Facebook Javascript SDK documentation. But having properly initialized the Javascript SDK, and then remembering to include all FB.something code in the window.fbAsyncInit function, you absolutely can detect when the HTML5 like button is pressed.
FBML and xFBML aren't the same thing.
xFBML is used to add buttons easily to web pages.
FBML was a language used to develop canvas apps.
If FBML is deprecated, xFBML isn't planned to be removed !
Please Note: Our deprecation of FBML does not impact XFBML (eXtended Facebook Markup Language). XFBML is a set of XML elements that can be included in your HTML pages to display Social Plugins. When your page is loaded, any XFBML elements found in the document are processed by the JavaScript SDK, resulting in the appropriate plugin being rendered on your page. The JavaScript SDK will continue to support XFBML after the deprecation of FBML (save for the fb:serverFbml element which is used to execute FBML on our servers).
Source : https://developers.facebook.com/blog/post/568/
I'm using the fbAsyncInit method for an iframe application that lives in a fan page tab
<script>
window.fbAsyncInit = function() {
console.log('fb init');
FB.init({
appId : 12345,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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 when I call a register function to check permissions (this happens when a user clicks a button after the page is loaded)
register = function(){
console.log('starting login');
FB.login(function(response) {
if (response.session) {
console.log(response.session);
} else {
console.log('Did not authorize');
}
}, {perms:'email,publish_stream'});
};
Facebook loads the popup from: http://static.ak.fbcdn.net/connect/xd_proxy.php?version=3#cb={session string variables and other junk here}
Which produces a flash error in IE only:
Error #2044: Unhandled StatusEvent:. level=error, code=
My site has no flash in it
Hitting continue/dismiss may sometimes freeze IE causing me to end process, other times the popup goes away
We found the solution for the Flash problem. Please update FB.init:
FB.init({
appId : 12345,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelURL : 'http://www.YOURDOMAIN.com/channel.html'
});
In your domain root folder create channel.html and put only this code in it:
<script src="https://connect.facebook.net/en_US/all.js"></script>
Now the Flash on Facebook works properly.
Flash 10.2+ when using the Flash/FaceBook API you will get the following error.
SecurityError: Error #2000: No active security context.
Flash 10.3 you get
Error #2044: Unhandled StatusEvent:. level=error, code=
I am calling Facebook.login() from a flash application. The login is successful, however this error seems to disrupt the process. This issue is only affecting IE 8 and no other browsers.
I have tried the channelUrl, but across another domain as I do not have access to where the flash file is being served. I am using Charles to map local. Will this work?
Outside of that I am lost. I'm not sure if the error is being triggered by my SWF or Facebook's proxy SWF. So frustrating. This was working a couple months ago.
The solutions provided above did not work for me. But this did which i found on another topic in stackoverflow (thanks to Sean Kinsey):
See this bug report :
http://bugs.developers.facebook.net/show_bug.cgi?id=15596
IE8, getLoginStatus never completes when flash XD is used - it sounds like it might be what you are experiencing.
In that case, make sure that your fb-root div is not being set to visibility:hidden or display:none as this will cause the XD Flash not to render
(i did add the channelURL as well)
I have a facebook application that can be added to fan pages as a tab. The application requires that users are authenticated in order to use it. This can be accomplished by using requirelogin=1 in a link which is visible only to users who have NOT added the application. This part works fine.
However, after the user has given my application permission from the dhtml pop up that requirelogin opens, I want the tab to reload. In order to do that, I need the full URL to be included in the link as follows:
<a href="http://www.facebook.com/pages/PAGE_NAME/PAGE_ID?v=app_APP_ID" requirelogin=1>Authorize</a>
I cannot figure out how to get the full url or, at least, the PAGE_NAME to build this url dynamically. Seems like the app should be able to know where it is without any special permissions.
When your Tab is loaded, the API passes you a Signed Request that contains, amongst other things, a page array contain id, liked & admin. You can use that to dynamically pull the page id that's currently calling your code.
If you have the PAGE ID and APP ID, this is what you do:
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
For example:
http://www.facebook.com/profile.php?id=282955631557#v=app_278523304881
In the new scheme, the # no long works. One needs to use
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
To carry parameters to the app, it has to be in a parameter called 'app_data'
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID&app_data="..."
To carry multiple parameters, the best strategy is to encode app_data in Json.
All of the above answers will not work (redirect you only to page stream) or are deprecated now. The best solution thou is using JS:
// called when like button, box, etc is rendered
FB.Event.subscribe("xfbml.render", function() {
// assigns click to that thing
FB.Event.subscribe("edge.create", function(response) {
window.location.reload(); // reload frame only
});
});
You'll also have to load and init facebook JS SDK. If you don't know how to do it, use this:
<script>
document.onload = function(){
(function(d){
var js,id='facebook-jssdk';
if(d.getElementById(id)){return;}
js=d.createElement('script');
js.id=id;js.async=true;js.src="//connect.facebook.net/pl_PL/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
window.fbAsyncInit = function(){
FB.init({
appId : <PASTE_YOUR_APP_ID_HERE>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe("xfbml.render", function() {
FB.Event.subscribe("edge.create", function(response) {
window.location.reload();
});
});
}
}
</script>