I want to post the value of an HTML id as the message on my Facebook wall. Posting to Facebook works but FB ends up writing undefined as the value pass in for message:. I am using var word = document.getElementById("fb-root").value; to get the value but fb.api is turning the value into undefined.
Please see code below:
<html>
<head>
<title>My Facebook Login Page</title>
<script type="text/javascript">
function postToWall() {
var word = document.getElementById("fb-root").value;
var params = {};
params['message'] = word;
params['name'] = 'test';
params['description'] = 'test';
params['link'] = 'asas.com';
params['picture'] = 'http://3.bp.blogspot.com/--jbgq-gytJQ/URaJHK_93LI/AAAAAAAAAF0/SkyoK7H3r7U/s1600/Simple+Apple.png';
params['caption'] = 'test';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert(word);
}
});
}
</script>
<div id="fb-root">test</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'test',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</head>
<body>
<div id="fb-root">tests</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:<fbapp-id>, cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button perms="publish_stream">Login with Facebook</fb:login-button>
Post To Wall
</body>
</html>
After checking the code (it's messed up) you need to pay attention to these points,
Everything is duplicated
In HTML, you can't have more than one element with an id, here you have 2 elements with id fb-root
<div id="fb-root">test</div>
You're loading the JS-SDK 2 times, once in asynchronous;
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
and other in synchronous (using <script>)
<script src="http://connect.facebook.net/en_US/all.js"></script>
You calling FB.init() twice
You put one of fb-root element in head tag, it's a sin in HTML ;)
<div id="fb-root"></div> is removed from the DOM when you instance the Facebook app, it's like a dummy element but important for Facebook, not you or me, you should always leave it and not use it, instead create a new element with a different id like myWord
<div id="myWord">my word</div> though div are not inline element which makes a bad practice.
Here's your cleaned code;
<html>
<head>
<title>My Facebook Login Page</title>
<script type="text/javascript">
function postToWall() {
var word = document.getElementById("myWord").value;
var params = {};
params['message'] = word;
params['name'] = 'test';
params['description'] = 'test';
params['link'] = 'asas.com';
params['picture'] = 'http://3.bp.blogspot.com/--jbgq-gytJQ/URaJHK_93LI/AAAAAAAAAF0/SkyoK7H3r7U/s1600/Simple+Apple.png';
params['caption'] = 'test';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert(word);
}
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{App_id}',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button perms="publish_stream">Login with Facebook</fb:login-button>
Post To Wall
</body>
</html>
document.getElementById("myWord").value
needs to be changed to
document.getElementById("myWord").innerHTML
Related
<script>
var userId = '1';
var appId = 'MYAPPID';
var appHost = 'https://localhost:44300/';
// Api holder
FBe = {};
// FB JS SDK
window.fbAsyncInit = function () {
FBe = FB;
FBe.init({
appId: appId,
status: true,
cookie: true,
xfbml: true,
frictionlessRequests: true
});
};
(function (d, debug) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<script>
// Test
function fbTest() {
FBe.api('/me', function (response) {
alert('Your name is ' + response.name);
});
}
fbTest();
</script>
my code above gives me this:
TypeError: FBe.api is not a function
Why am i getting this error?
How can i fix it?
You are calling fbTest() too early. You have to wait until after window.fbAsyncInit has been called. The FB API is not yet loaded.
Because you are loading the FB API asynchronously, you can't use it until after window.fbAsyncInit has been called. Any use of the FB API upon page load should be called from window.fbAsyncInit.
I'm trying really hard to learn how to do this but I keep running into problems.
FB.ui works for posting but every time I use FB.api it comes up as undefined and I get a random picture. What am I doing wrong?
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'numbers', // App ID
channelUrl : '/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
You need to call FB.login before making the API call. I guess, thats what you are missing.
For the past week or so, I have been getting sporadic javascript errors when using Facebook's js sdk code.
This is the error:
Here's the line of code:
JavaScript code from Facebook's site:
/*1345677565,173217057*/
if (window.CavalryLogger) { CavalryLogger.start_js(["p0usZ"]); }
if(!Array.isArray)Array.isArray=function(a){return Object.prototype.toString.call(a)=='[object Array]';};
if(!Array.prototype.map)Array.prototype.map=function(a,b){if(typeof a!='function')throw new TypeError();var c,d=this.length,e=new Array(d);for(c=0;c<d;++c)if(c in this)e[c]=a.call(b,this[c],c,this);return e;};if(!Array.prototype.forEach)Array.prototype.forEach=function(a,b){this.map(a,b);};if(!Array.prototype.filter)Array.prototype.filter=function(a,b){if(typeof a!='function')throw new TypeError();var c,d,e=this.length,f=[];for(c=0;c<e;++c)if(c in this){d=this[c];if(a.call(b,d,c,this))f.push(d);}return f;};if(!Array.prototype.every)Array.prototype.every=function(a,b){if(typeof a!='function')throw new TypeError();var c=new Object(this),d=c.length;for(var e=0;e<d;e++)if(e in c)if(!a.call(b,c[e],e,c))return false;return true;};if(!Array.prototype.some)Array.prototype.some=function(a,b){if(typeof a!='function')throw new TypeError();var c=new Object(this),d=c.length;for(var e=0;e<d;e++)if(e in c)if(a.call(b,c[e],e,c))return true;return false;};if(!Array.prototype.indexOf)Array.prototype.indexOf=function(a,b){var c=this.length;b|=0;if(b<0)b+=c;for(;b<c;b++)if(b in this&&this[b]===a)return b;return -1;};
if(!Date.now)Date.now=function(){return new Date().getTime();};
window.__DEV__=window.__DEV__||0;
My code:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxx',
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
My code does not do anything special. It's copied from Facebook's documentation.
Any ideas what's going on and how I can address the issue?
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '307264182690190', // App ID
channelUrl : '//www.gig-links.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
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="bottom" style="float: left; border: 2px solid black; width: 100%;">
<center>
<div class="fb-comments" data-href="http://www.gig-links.com" data-num-posts="2" data-width="470"></div>
</center>
</div>
FB comments don't appear at all. Channel.html exists and I have Facebook connect login working via PHP.
Do I need to require a PHP function of some sort?
You could try adding the xfbml=1 hash option to the asynchronous script loading:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
All,
I have some script tags that are not working in Wordpress. If I have the following code:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<?= 1234?>',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
When I preview this in my browser it looks like this:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '123',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});</p>
<p> FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};</p>
<p> (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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Which I believe is causing the program not to execute what is in the script tags. How can I prevent this from happening?
You need to put that script in the template not in the content editor.
Wordpress converts script tags in the editor to their HTML entity even in HTML mode. Therefore you can't add JavaScript this way.