I am trying to post a sample message on user's wall. But the FB.ui method does not execute and I get a message saying "An error occurred. Please try again later". This is the code inside the body:
<div id="fb-root"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
type="text/javascript"></script>
<script>
window.fbAsyncInit = function() {
alert('hiee');
FB.init({appId: '259494234140448', status: true, cookie: true,
xfbml: true});
};
(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>
<script type="text/javascript">
function publish_to_wall(){
FB.ui({ method: 'stream.publish',
message: 'This is a simple post to appshack.tv' });
}
</script>
}
Publish to your wall
You cannot publish to a user's wall until that user authenticates your app.
I am building a facebook connect website, and the facebook connect is returning everything i need except for the email, even though i have the data-scope saying i want the email.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});
};
(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>
<div id="social-register" class="registration_panel">
<a id="facebook-login" class="fb_button fb_button_medium" data-scope="email,user_checkins" href="home/login">
<span class="fb_button_text">Login with Facebook</span>
</a>
</div>
Can anyone tell me what i could be doing wrong ? thx
Based upon the code you have in your question, I believe you are missing code to call to get user information. After calling FB.getLoginStatus(callBack) and verifying they're logged in, then you can call FB.api('/me?fields=email',callBack);
I'm unable to moderate the comments in the comments box in http://developers.facebook.com/tools/comments
Did I miss something in my code?
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '168365613230111',
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>
<div class="fb-comments" data-href="http://www.facebook.com/" data-num-posts="5" data-width="500"></div>
I struggled with this for ages, try putting this tag in ...
<html xmlns:fb="http://yourwebsite.com">
I have implemented Facebook Open Graph Protocol Full Integration following the Facebook developers site and here http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
I got the Facebook Like Buttons to show here http://giantmango.com/news using
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="200" action="like" colorscheme="light"></fb:like>
On the same domain, I am using the exact code, but on a different theme and the Facebook Like Buttons are not showing here http://giantmango.com/testartwork-2237
Any ideas on how to solve this problem would help very much.
It looks like you are missing your Facebook javascript initialization code.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(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>
Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.
Has anyone else had this issue or come up with a solution?
Thanks!
Erik
Before </body> tag, I have written following code.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo YOUR_APP_ID ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
(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>
And it is working fine for me.
It doesn't matter whether height is Fixed or Fluid in Advanced application settings.
FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.
Expanding on a couple of points noted already:
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
This will allow dynamic changes in the applications height. Also setting an explicit width in your css like so can help as well:
html {
width: 760px;
overflow: hidden;
}
FB.Canvas.setAutoResize will be deprecated and you should use FB.Canvas.setAutoGrow as it does exactly what you want.
Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).
Also, just using the new SDK to adjust the height is super simple:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(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>
Official documentation available here.
Well ... auto-resize is buggy and only sometimes work
you can set it manually like this:
FB.Canvas.setSize({ height: $('body').height() });
If anyone is still having this problem, its because your FB.init() is never being called. In my case, I had it inside my jQuery document.ready function. dont do that!
Put this outside of your jQuery:
$(function() { ... jquery here... });
// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();
Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.
However, here's the code work around for the problem:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(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 type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>