I have used the below code to implement the Facebook sharing dialog. VERY occasionally, it pops open a share dialog. 97% of the time, it just refreshes the page.
Any help is appreciated.
Share
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({
appId: 'myappID', status: true, cookie: true, xfbml: 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));
function postToFeed(title, desc, url, image){
var obj = {method: 'feed',link: url, picture: 'http://www.url.com/images/'+image,name: title,description: desc};
function callback(response){}
FB.ui(obj, callback);
}
$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});
</script>
Related
I'm trying to make facebook share button with javascript.
Here is my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'my app id',
status: true,
cookie: true,
xfbml: 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));
function postToFeed(title, desc, url, image) {
var obj = {
method: 'feed',
link: url,
picture: image,
name: title,
description: desc
};
function callback(response) {}
FB.ui(obj, callback);
}
var fbShareBtn = document.querySelector('.fb_share'); //my problem start
fbShareBtn.addEventListener('click', function(e) {
e.preventDefault();
var title = fbShareBtn.getAttribute('data-title'),
desc = fbShareBtn.getAttribute('data-desc'),
url = fbShareBtn.getAttribute('href'),
image = fbShareBtn.getAttribute('data-image');
postToFeed(title, desc, url, image);
return false;
});
Here is the HTML:
<div id="fb-root"></div>
Facebook
The problem is the share button only work for post number 1 or top post. I think it's because the javascript no catch the id
Any answer?
You can also get the code from here : https://www.addthis.com/dashboard#gallery/
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
<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 am using "login with facebook" in my application. I want to redirect to home page after hitting the "Login with facebook" button. I dont know how to implement it...
Code is,
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID', // App ID
channelUrl : 'http://www.***.com/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// 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 = "js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
Please help,
Thanks
Use Facebook Event:
FB.Event.subscribe('auth.login', function(){
window.location = 'index.html';
});
new code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID', // App ID
channelUrl : 'http://www.***.com/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(){
window.location.href = 'index.html';
});
// 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 = "js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
change index.html with your homepage url.
if you want to add logout too:
FB.Event.subscribe('auth.logout', function(){
window.location.href = 'index.html';
});
change your login button to
<fb:login-button perms="email,publish_stream" autologoutlink="window.location.href='index.html';"></fb:login-button>
Change index.html to your homepage url
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.