I'm using facebook fanbox instead of likebox because fanbox has css property.
I embedded this js file:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/cs_CZ"></script>
cs_CZ shoud have changed my locale settings, translate my fanbox but nothing happens. Is it somehow possible to change language of my fanbox (I know it's deprecated but whatever...)
Thanks
I know it's deprecated but whatever... ... erm, yeah. That.
It's been replaced with the Like button / box (some time ago) which does take a locale.
If the old, deprecated plugin doesn't work anymore with a locale, they've disabled that feature.
Ok, I got it!
Actually, you have to mix old API with new API (wondering how long this will work ;) )
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'yourPageIdHere', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/cs_CZ/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:fan profile_id="yourPageIdHere" stream="1" connections="0" logobar="0" width="280" css="your.cssfilehere?1"></fb:fan>
Related
I am having a hybrid mobile application(should work in android and ios). In which I need to post on facebook wall from my application. Please note its a hybrib app, so I am not supposed to use any java or c code.
I tried the following method , its working in simulator , but not in actual device. Please help me.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' my appID',
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>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'HyperArts Blog',
link: 'http://hyperarts.com/blog',
picture: 'http://www.hyperarts.com/_img/TabPress-LOGO-Home.png',
caption: 'I love HyperArts tutorials',
description: 'The HyperArts Blog provides tutorials for all things Facebook',
message: ''
});
});
});
</script>
Thanks
I ran into this. your:
document.location.protocol
which is suppose to pull in the FB SDK is actually "file:///" and thats what gets fed into the url for that FB JS library.
Manually specify http:// or https://
This didnt work for me either on safari webView on IOS so i had to hit the endpoints manually using AJAX.
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.
I've developed a simple website using facebook connect, and it has been working fine for the last month or so. Underneath the fb:login-button code is a fb:facepile. It has worked as expected until today, when instead of showing friend's pictures it displays the facebook homepage. Here is a screenshot of the problem http://i.stack.imgur.com/nZsbq.png
Here is the relevant code. It worked at one time, so I'm really confused what happened to cause this weird error. Any help would be greatly appreciated.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $appkey; ?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $base_url.'/facebook/'; ?>";
}
function logout(){
document.location.href = "<?php echo $base_url.'/logout/'; ?>";
}
</script>
I cannot copy the two XFBML tags that follow the javascript. They are fb:login-button and fb:facepile
It is a reported bug but it seems that nobody at Facebook care about it. Very strange and disapointing for such big web company.
http://forum.developers.facebook.net/viewtopic.php?id=90734
You can report this bug by upvoting at the follwoing webpage :
http://bugs.developers.facebook.net/show_bug.cgi?id=15490
It looks like <fb:facepile></fb:facepile> is finally working again. The bug was marked as resolved on the Facebook bugtracker and is currently working as expected on my development server.
I'm trying to fb:login-button work for mobile web, a la: http://developers.facebook.com/docs/guides/mobile/
However, I'm not sure where to add this code: &display=touch
My FBML is the standard:
<fb:login-button autologoutlink='true' perms='user_about_me,email'></fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.login', function() {
location.href = "....";
});
};
(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>
Any ideas?
I'm pretty certain you're not able to use the FBML tags for mobile web applications. At least, they won't accept the display=touch argument.
It means you'll need to use the slightly more complex OAuth implementation that they describe on http://developers.facebook.com/docs/guides/mobile/
It kinda makes sense if you think about it. The FBML tags generally rely on popups or overlays, which you can't really be certain will be compatible with all mobile browsers. The OAuth implementation takes you off to a FB page and returns you back to your host site for authentication and authorisation.
I am working on project, it needs facepile (plugin of facebook) in index page,
how can I do it?
you need to get an appID from facebook developers site. (http://developers.facebook.com/setup/)
then..
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID HERE', 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>
THEN...
place this into your page:
<fb:friendpile width="210"></fb:friendpile>
or whatever feature you need.
try this link for more: http://developers.facebook.com/docs/reference/javascript/
Is this showing the Facepile of a page or the user himself (me)?
I tried your code but it always shows a login frame also if I'm already logged in to Facebook.
My target is to have a list of Fans and posts of a specific page for my website.