i'm having a problem with creating "invite your friends to this page"- button. I'm using static html iframe- application and i'd like to implement a button, which users can click and invite their friends to that same iframe tab. So, how can i implement such a button? i've tried alot of things, but can't seem to get this one work. Thanks in advance for the answers : )
i've tried things like the following:
window.fbAsyncInit = function() {
FB.init({
appId: "YOUR_APP_ID",
status: true,
cookie: true
});
// 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));
function invite() {
FB.ui({
method: "apprequests",
message: "Check out my great app"
}, inviteCallback);
}
function inviteCallback(response) {
console.log(response);
}
and i've tried to use the page id as app id but it's not working. Is there a way to use url instead of app id?
The error you mentioned in the comments indicates that you did not set up a platform in the App settings. Open the "Settings" tab in your App settings and click on the "Add Platform" button to add a platform (most likely "Website"). Enter the URL of your App in the "Site URL" input field.
Related
I have two apps on my webisite
Customer Chat plugin (taken from Facebook Fan Page)
Facebook login app
Fist one loads
js.src = '//connect.facebook.net/en_EN/sdk/xfbml.customerchat.js';
Second one loads
js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&version=v3.3&appId=MYFACEBOOKID";
Both apps won't work together - if one work tne other dont.
So if Faecbook login SDK will load as first then Customer chat throw's that console notice:
The CustomerChat plugin is no longer part of the main Facebook SDK.
To continue using it please use the correct SDK URL,
meaning replace sdk.js with sdk/xfbml.customerchat.js.
For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
Otherwise if only Customer chat is loaded then
FB.login() called before FB.init().
occur...
Ideas?
That piece of code is from Customer Chat plugin (generated by FB in Fan Page settings).
I have added one part of FB.init from Facebook login plugin inside as below:
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
// added part START
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', // Facebook login
cookie : true,
xfbml : true,
version : 'v3.3'
});
};
// added part END
(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/lt_LT/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Both plugins started to work.
I'm using the JS SDK to post something on the user's timeline. My website is hosted using site44 and so has a url of the type http://domainname.site44.com. This is the code I'm using:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{*********}', // APP ID
channelURL : 'http://domainname.site44.com/channel.html',
xfbml : true,
version : 'v2.0'
});
};
(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 = "http://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function share(){
FB.ui({
method: 'feed',
name: 'something',
caption: 'something',
description: (
'something'
),
link: 'http://domainname.site44.com',
picture: 'imageLinkInsertedHere'
});
}
</script>
In the channel.html file I have this code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
and I trigger the share() function when a user clicks on a button using javascript's onclick="share()".
I tested this on fbrell and it works perfectly. However when I use it on my site the pop up gives an error saying An error occurred. Please try later. I've gone through other similar questions on Stack Overflow and none of them helped. I also have the correct domain added in my APP settings. What am I doing wrong?
The appId must not include the curly braces {/}. Rest of the code seems fine.
But another thing that you should know is that the Feed Dialog is now deprecated. You should now use the modern Share Dialog instead. Here's the example for the same.
Having spent hours trawling the web I have found many posts related to this but none seem to work, even some 'working' examples on jsfiddle appear not to work!
I want to register when a user clicks 'like' on my web page.
The 'like' link appears and indeed it pops up a new window for you to log into facebook. But I cannot subscribe to the 'edge.create' event. I know the sdk is loading ok because I can subscribe to the 'xfbml.render' event.
Some posts say that you must have an appId for this to work [I do] but others claim that it works without.
Here is my code:
One point to note is that I am currently running this under //localhost:57477, so I have set the like href to google.com. I did note that one of the posts indentified a recent facebook bug where this event didn't fire if the href domain didn't match that of the web page, but this is now marked as 'fixed'.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
//console.log('window.fbAsyncInit');
FB.init({
appId: 'myappid',
status: false,
cookie: false,
xfbml: true
});
//Additional initialization code here
FB.Event.subscribe('edge.create',
function (response) {
//console.log('edge.create');
alert('edge.create');
}
);
FB.Event.subscribe('xfbml.render',
function (response) {
//console.log('xfbml.render');
alert('xfbml.render');
}
);
};
// 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 href="http://google.com" class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="verdana"></div>
I know this is old thread, but i came here with the same problem.
The thing that worked for me is that Facebook AppID must belong to a domain (set it in Facebook App settings) in which your site stands - localhost won't work then.
Your code looks good to me, I think the problem is in the FB.init() options.
This is what I use:
{
appId: 'myappid',
authResponse: false,
channelUrl: "http://url-to-my-channel-url.com",
cookie: true,
oauth: true,
status: true,
xbfml: true
}
With these init options, I am able to use edge.create to track when someone clicks the Like button.
When attempting to use the Facebook JS SDK, I keep running into the error FB undefined.
When I watch it through the JavaScript debugger on IE it runs through correctly during the page load, then at the end it is just undefined and no events that are subscribed to fire.
The goal: to make a page tab refresh the top most level page, to get past the fan gate.
Any ideas on what I am missing here?
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId : 'APP CODE INSERTED HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'URL to Channel .ASPX'
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'Page to refreshed inserted here';
});
};
(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>
Your JavaScript to load the SDK Asynchronously doesn't match what the Facebook SDK documentation currently shows. See below:
// 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));
Both blocks of JavaScript to load the SDK are very similar. Your JavaScript uses:
d.getElementsByTagName('head')[0].appendChild(js);
To load the SDK. The most current version as documented by FB uses:
ref = d.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(js, ref);
Your version adds the source reference to load the FB JavaScript by appending to the HEAD HTML tag. The most current version does this by finding the first SCRIPT reference and inserting the FB reference before that reference.
Perhaps your issue is caused by the subtle differences between these two methods.
One way to rule this out would be to temporarily hard code the loading of the FB JavaScript synchronously by placing the following HTML into your page's header:
<head>
<script type="text/javascript" src="http://connect.facebook.net/en_us/all.js"></script>
.
.
.
</head>
I use the following code to initialize Facebook. After I changed many many things in a separate Javascript file that is loaded by the HTML page, I get an Uncaught Syntax Error inside the Facebook script (which is embedded in the HTML page in the following form), but I do not know the reason for this error and what causes it.
fbAsyncInitDone = false;
window.fbAsyncInit = function() {
FB.init({
appId : '{{app_id}}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//fillinFriends();
fbAsyncInitDone = true;
};
(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));
How can I make all.js work again? I think this error is related to Chromium, because Firefox still works. I badly need a working Facebook Javascript, because it is used by several Facebook elements on the page.