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/
Related
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.
Some days ago my blog's FB comment box plugin started showing a yellow coloured box beneath the comment writing form, showing the message:
Warning: this comments plugin is operating in compatibility mode, but
has no posts yet. Consider specifying an explicit 'href' as suggested
in the comments plugin documentation to take advantage of all plugin
features.
I changed the value from URL to HREF but this way all URL formatted comments are hidden and not visible anymore, although they still remain in memory and they're visible again just changing again the code.
Is there a way to change the code to fit the new requirements, but keeping all the old comments visible?
I wrote a complete tutorial with a small use of JS to solve this issue.
Visit the tutorial.
What I did was:
Set off the parse for XFBML tags in the JS SDK
Adding a function-call to the JS SDK with a date parameter that you manually set it once with a date that posts published after that date will start using the 'href' version, and posts published until that date will use the migrated version.
Adding another attribute to the fb:comments tag which is 'data-date' and in it's value you place your post date (dynamic code).
Calculating the dates in a JS code, and base on the result it's removing the not wanted attributes, and finally then it's render the XFBML tags using FB.XFBML.parse
I just fixed this issue in one site, but my requirement was different. I wanted to load comment box for each image in a gallery. When we click on an image it will start a slide show, and each image's comment will show on side panel like facebook and g+ did.
Here is the code I gone through: http://codekiku.blogspot.in/2012/03/facebook-comment-box-href-versions.html#!http://codekiku.blogspot.com/2012/03/facebook-comment-box-href-versions.html
var fbUrl="http://" + "www.facebook.com/plugins/comments.php?href=" +encodeURIComponent(URL);
fbTag = $('<iframe scrolling="no" frameborder="0" style="border:none;overflow:hidden; width:300px; height:400px" height="400px" width="300px" allowTransparency="true"></iframe>');
$(fbTag).attr('src',fbUrl);
$("#newfb").html(fbTag); // a div which will load the comment box
if(FB==null){
window.fbAsyncInit = function (){
FB.init({
appId: 'xxxxxxxx',// your app id
status: true, // check login status
cookie: true, /*
enable cookies to allow the server
to access the session*/
xfbml: false // parse XFBML
});
}
}
else{
FB.init({
appId: 'xxxxxxx',
status: true, // check login status
cookie: true, /*
enable cookies to allow the server
to access the session*/
xfbml: false // parse XFBML
});
}
I changed my Facebook App to OAuth 2.0. Now the Login window ignores the user permissions.
The new login button code is as follows:
<fb:login-button show-faces="true" width="400" max-rows="2" scope="read_stream, publish_stream, email"></fb:login-button>
when I use perms instead of scope it works.
I have oauth:true in FB.init(). In the app settings oauth2 is active.
(Everything I did and learned was in an effort to be able to publish to a Facebook Timeline from a 3rd party website. I don't know your motive/goal. It might not be the same as mine.)
I am using JS SDK with javascript commands, not xfbml markup.
I am using the beta version of the JS SDK: set the host to connect.beta.facebook.net instead of connect.facebook.net
I have oauth:true in my FB.init() function.
I have app settings for OAuth 2.0 enabled at developers.facebook.com.
This is my FB.login():
FB.login(
function(response) {
if (response.authResponse) {
// handle a successful login
}
},
{
scope: 'publish_stream' // I need this for publishing to Timeline
}
);
One thing I did to debug this was to check the value of FB._oath. If it is undefined, you have a problem. If it is true, you can proceed to the next challenge.
So after lots of trial and error, I finally got FB._auth===true
I have experience with PHP and JavaScript, but am new to using the FaceBook API. I'm carefully reading through the documentation, but notice thta lot of links within their documentation are broken. For example, the link for http://api.facebook.com/static/xd_receiver.htm is broekn and I need that content to be able to do almost anything with the FB API. Seriously, these guys seem to have really dropped the ball with their documentation. Does anyone know where I can get this file and the rest of the JavaScript SDK? Thanks.
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
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
channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
The contents of the channel.html file should be this single line:
<script src="//connect.facebook.net/en_US/all.js"></script>
You don't necessarily download it yourself so much as load it when you want to use it.
Here's a link to the quickstart
https://developers.facebook.com/docs/javascript/quickstart/v2.0
Here is the documentation that facebook has for their Javascript SDK. There are some areas that are poor (to put it lightly), but most of it is there, or in the comments/forums created by users
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>