I use this for start the SDK of API js of Facebook :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId:'<?php echo $appf['id'];?>',
channelUrl:'<?php echo $appf['url'];?>',
status:true,
cookie:true,
xfbml:true
});
function test() {
alert("okokok");
}
}
</script>
<script>
(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>
Active Alert Test
</body>
</html>
My problem it´s i need insert some functions as login of facebook and if put the code inside of Fb.init , never works as in the example , the functions only works outside of Fb.init
I don´t understand why happend this because some functions as for example :
FB.getLoginStatus(function(response)
Works perfectly inside Fb.init
I like to understand what I did bad for getting this errors because i have a little function for login and inside of Fb.init no works
Scoping, syntax and teh rulez
test() is an illegitimate child of fbAsyncInit() which is a child of the window.
If the idea is to get an alert when clicking an element - if fbAsyncInit() is initialised - you'd be better off testing for the property...
window.foo = function() { var bar = "baz"; };
window.test = function() {
if ( typeof foo === "function" ) {
alert( "whoot!" );
} else {
var oh_nose = true;
}
}
...or similar.
Then call test() - which is a child of the window - when your clicky element gets poked.
Notice that:
Calling alert() - which is a child of the window - works the same way. It can be argued (and often is) that the correct way to call alert() is by calling window.alert( "whatever" );.
An aside
Consider using HTML5 via <!DOCTYPE html>
See
An answer on another question for some more details.
Related
Any guide of how to make something in which when a user logs into my site using Facebook, it automatically can post a status using their Facebook account saying something like "John just joined mysite.com" so all their friends would see. Anything like that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook post</title>
</head>
<body onload="publishWallPost('{{ page.slug }}')">
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'Your Super Cool 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>
<script>
<!--
function publishWallPost(slug) {
var attachment = {'name':'My Super Cool Website','description':'This is a test of the Facebook Broadcast System. If this was real, you would be reading something useful.','media':[{'type':'image','src':'http://MySuperCoolWebsite.com/images/facebook_image.png','href':'http://www.MySuperCoolWebsite.com/' + slug + '/'}]};
FB.ui({
method: 'stream.publish',
message: 'I just found this Super Cool Website!',
attachment: attachment,
user_message_prompt: 'post this to your wall?'
});
}
//-->
</script>
</body>
</html>
I'm creating a fanpage on facebook, when the page loads I m getting error because of FB.getLoginStatus.
b is null [Break On This Error] FB.provide('',{ui:function(f,b){f=FB.c...onent(FB.UIServer._resultToken));}});
b is null
http://connect.facebook.net/en_US/all.js
Line 22
all.js FB.provide('',{ui:function(f,b){f=FB.copy({}.....
I'm really confused why I'm getting b is null, check my current code.
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title><?php echo APP_NAME; ?></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true
});
//FB.UIServer.setLoadedNode = function (a, b){FB.UIServer._loadedNodes[a.id] = b; }
FB.getLoginStatus(function(response) {
if (!response.session) {
FB.login(friendsGet);
}
else
{
friendsGet(response);
}
});
};
(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);
}());
thanks
I get the error as well and as ElbertF writes, it's because the browser blocks the pop up window.
Only way to get over this is to let the user do an action and then call FB.Login. Let him click something - anything.
Why is facebook even using popups?? Totally old school.
/Rune
I've been trying to tackle this since last week and for the life of me I cannot seem to get this working on safari, all other browsers render the popup except Safari.
It seems straight forward enough, load up the javascript-sdk asynchronously, initiate it, and call FB.ui with method 'stream.publish'. The thing is I know this code should work in safari cause the example here does http://fbrell.com/fb.ui/stream.share.
I'm using this P3P header which we use that fixes a problem with IE7:
Response.AddHeader("P3P", "CP=\"NON DSP COR DEVa PSAa IVAo CONo OUR IND UNI PUR NAV DEM LOC\", " + "policyref=\"http://sweepstakes.mars.com/w3c/p3p.xml\"");
I'm hoping someone could offer the magic tip that's gonna get this working. Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function (){
FB.init({ appId: '<%= Common.appID %>', status: true, cookie: true,
xfbml: true
});
var publish = {
method: 'stream.publish',
message: 'test',
display: 'dialog'
};
FB.ui(publish);
};
(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>
</body>
</html>
After many tests and frustrations. A colleague pointed out that 'feed' is the new way of doing 'stream.publish'. This fixed the issue.
Edit: Outdated answer.
I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.
See a video of what I mean here.
My code is pretty standard:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">
...
<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />
...
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
});
};
</script>
...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX', // my app ID is here
status: true,
cookie: true,
xfbml: true
});
if (typeof(fbAsyncInitExt) == 'function') {
fbAsyncInitExt();
}
};
(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>
Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
console.debug(response);
});
FB.Event.subscribe('fb.log', function(response) {
alert('LOG: ' + response);
console.debug(response);
});
};
</script>
After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph
After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.
I've created a facebook connect application, iframe. I'm using it under apps.facebook.com/app-name.
It seems that after a refresh, the setSize() method simply fails. sometimes works, sometimes doesn't... (under latest Firefox and IE) is there a solution for that? would you recommend using the old API instead?
testcase:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<meta name="description" content="test">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXX', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width:760,height:3000 });
};
(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>
<div style="height:2000px;background:blue;width:760px;">
</div>
</body>
</html>
if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720 in my case its connected somehow to jquery $.data
window.fbAsyncInit=function(){
FB.Canvas.setSize = function(b) {
if (typeof b!="object")
b={};
b=b||{};
if (b.width==null||b.height==null)
b=FB.copy(b,FB.Canvas._computeContentSize());
b=FB.copy(b,{frame:'iframe_canvas'});
if (FB.Canvas._lastSize[b.frame]) {
var a=FB.Canvas._lastSize[b.frame].height
if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&& (Math.abs(a-b.height)<=16)))
return false;
}
FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
return true;
}
FB.init({
appId:"<?php echo FB_APP_ID; ?>",
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};