How to make fb:dialog pop-up on page Load - facebook

Any suggestion, instead of onClick is it possible to do it onLoad or bodyLoad?
Please give suggestion for both Static FBML and iFrame.
Thanks

Yes , you just need to use
window.fbAsyncInit = function(){
//your method goes here
FB.ui({
.....
});
};
Hope it helps...Use FBML instead of iframe

Related

Facebook comments box loader + size

Fiddle: http://jsfiddle.net/GEzaD/
Why doesn't the loader disappear? And why can't I see the entire comment box? Did I miss something obvious here?
You have to init the Facebook widget:
FB.init({
cookie:true,
status:true,
xfbml:true,
oauth:true
});
Add this FB.init() call just before FB.XFBML.parse();
If you want to link the plugin to an app you can add an appId argument.

Redirect in url after pressing like button

I have a fb application and i when i press the like button i want to refresh page or even redirect it to the same url.
I have this code:
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function(response) {
window.top.location.href = "http://www.myurl.com";
}
</script>
Works perfectly in Firefox not in Chrome..
Any ideas?
Thanks in advance!

logout button in FaceBook SDK

I have this fb-login button on my website and it works pretty okay.
How can I implement an logout button? Below is my code for the login part.
<fb:login-button size="small" onlogin="RedirectLogon();" perms="email,user_birthday" autologoutlink="true">
<%=LanguageManager.Instance.Translate("root/facebook/login")%>
</fb:login-button>
If you want to implement such buttons into one multifunctional button, use this:
<fb:login-button autologoutlink="true"></fb:login-button>
Note that if you add any custom code to the above line, the button won't work.
You can do it by using the following HTML and javascript function.
<script>
function fbLogout() {
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</script>
<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout</span></a></span>

jQTouch bind("pageAnimationEnd") when page is loaded dynamically

In jQTouch I am fetching a page dynamically from the server per the jQT demos per
The Page
It loads the HTML snippet into
<div id="page">
Normally I'd be able to do
$('#page').bind("pageAnimationEnd", ...)
to know when the page had finished loading, but it doesn't seem to work with dynamically loaded content. I've been trying to find a workaround but haven't been able to. I think that this question on SO is asking the same thing, but there didn't seem to be any conclusive answer.
If you have access to the "page", just put the javascript on that page and it will be executed when it is done loading. So in the page html you could just add ...
<script>
$(function() {
do something when im finished
});
</script>
$('#myid').live('pageAnimationStart', function(e, info){
//do something
}).bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
//do something
}
});

Facebook Like Button (<fb:like>) Height Always 80px

Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like
<fb:like style="height:40px">
and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like
The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.
<fb:like show-faces="false"></fb:like>
I fix this problem with css
#fb-bar iframe{min-height:80px !important;}
where #fb-bar is wrapper for < fb:like >. In html
<div id="fb-bar">
<fb:like href="link"></fb:like>
</div>
I finally found the answer for this!!
The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.
window.fbAsyncInit = function() {
FB.init({appId: '**131226520233112**', 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);
}());
See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html
By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!
David,
I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!
From the reference it says
The most important social plugin is
the Like button, which enables users
to post pages from your site back to
their Facebook profile with one click.
You can add a Like button to any page
with an iframe tag:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
There are a number of options for the
Like button, including the option to
include the names and profile pictures
of the user's friends who have also
liked the page. Here is a like button
for the Facebook Developers site...
To me that indicates you should just use the iframe and set the width/height properties in the style tag...
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:300px; height:25px"></iframe>
Go to http://developers.facebook.com/docs/reference/plugins/like
Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.