I am trying to start with facebook development, following this link: https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale=en_GB
so I pasted this code inside the body tag:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '12323432423',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I added this as mentioned in the walkthrough:
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
My question is, is the appId the same as page Id? I am trying to deal with my page on facebook, and to get people to like it or post to iT. Am I going the right way?
This code is not working, I am getting nothing on my page.
No, App ID is an App ID, you need to create one here: https://developers.facebook.com/apps
Btw, dont forget to add the data-href parameter with your Page URL in the Like Button div.
Related
Has anyone had success using the Facebook SDK in your react web (not native) project? There doesn't seem to be any good documentation on it.
Specifically. Where to I call the init function?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
If I add it on every page, FB.AppEvents.logPageView() does not load/register back to Facebook ( I don't see it when debugging events). If I add the init code on my main app.js, and then just add FB.AppEvents.logPageView() on individual pages I sometimes get an console error that FB.AppEvents can't be found.
What is the best practice for integrating the Facebook SDK in a react web app?
Did you have app-id and set it in your code?
https://developers.facebook.com/apps/
There may be many approaches, I am currently using that approach to do this:
Add the Facebook SDK for JavaScript in index.html page where you are placing your whole app component. Also add <div id="fb-root"></div> after the start of body tag in the same index.html file.
<body><div id="fb-root"></div><div id="root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script></body>
The above snippet initialises the window.FB variable once your app component mounted. You can use this variable to do window.FB.AppEvents.logPageView() and any other stuff such as accessing graph API.
There is one issue that can be arises and that is when the component is mounted, things works fine, but once, its un-mounted and you can come back to this component, things may not work fine such as fb comments or like plugin. To tackle this issue you have to put the following line: if (window.FB) {window.FB.XFBML.parse();} in ComponentDidMount() life cycle method of every component in which you are accessing facebook stuff. It will re-parse the dom after mounting your component.
I want to show facebook like button. When a user clicks on the button it should make a callback after a user successfully likes that page.
Here is my code:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<div id="fb-root"></div>
<script>(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '510679165797120',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
</script>
But it is not working. When you click on the like button it shows an error.
Can someone please tell me how to solve this issue?
It could be worth changing the js.src line. To me I see it as though this line is looking for a local file.
js.src = "https://connect.facebook.net/en_US/sdk.js";
I previously used the following line, but I'm not sure of the difference to be truthful:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1"
You can get the code to like a Facebook page built for you directly by Facebook at this site --> https://developers.facebook.com/docs/plugins/like-button
That way you avoid deprecation issues, etc.
Just go there, enter the pertinent info, grab the code they spit out and place it on your site.
good luck!
demo : http://so.devilmaycode.it/facebook-like-button-showing-error-when-clicked/
The error happen because you are on localhost or not in the same domain you specidied in the app settings
also in order to work, your callback function should be at the top like below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '#############',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I set up Facebook comments on a staging site we have, however can't get the Moderation Link to show up:
http://telegram_com.wtstage.sx.atl.publicus.com/article/20150426/NEWS/304269695?nocache=1
I have confirmed that I'm an administrator on the Facebook app account.
I have this in the header:
<meta property="fb:app_id" content="1393680337622798" />
I have this in the body:
<div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&version=v2.3&appId=1393680337622798";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://telegram.com/article/20150426/NEWS/304269695/101116" data-numposts="25" data-version="v2.3" data-colorscheme="light"></div>
I have tried using the live telegram.com url as well as the staging url.
If I swap the url (data-href) for another site I am an administrator on, the Facebook comment moderation link shows up in the comment widget. However if I use any url that is the telegram.com's, the Moderation link does not show up.
Is there a setting or something in Facebook's backend that I could be missing? It seems to me the code would be correct, if it works when I use the same app id, but a different data-href url.
Any suggestions?
I seem to have the same issue using the data-href attribute, however, switching to the init version of the comments plugin sorted my issue.
So now, I'm using the following towards the top of the page:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '516991728450336',
xfbml: true,
version: 'v2.3',
num_posts: 5,
width: '100%'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And I've got a
<div class="fb-comments"></div>
Further down the page. This way, I don't even need the <meta property="fb:app_id"... either, as that only overrides the appId in the FB.init script.
You can specify the href attribute in the script to modify the URL, but if you don't, it'll just default to your page URL. Further parameters here
I hope it helps.
I recently did a mini game that i added in "my application" in facebook.
I wanted to add a share/like button, but even if i follow the docs steps, i havn't found how to make a share/like button for my app.
i did the following code
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
status : true,
xfbml : true
});
};
(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/fr_FR/all.js#xfbml=1&appId=390850244392735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and added that :
but nothing happened... so i tryed that
<div class="fb-like" data-href=myweblink" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
That one worked but i have a like for the webpage and not the app... I searched for the app link to add into the data-send but there is nothing on the page...
Can someone help me pls? maybe is because is 4'o'clock but i really don't understand ....
This should work :
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
Share on Facebook
</a>
Reference here:
Facebook Docs share button
I added Facebook Comment Box to my site manually. I created an app and pasted the code on my template files.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '730627806953221', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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>
Then I added this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="430" style="max-width: 100%;"></div>
It seems to work, when a user comments it displays correctly. However when I try to reply to someone who left a comment it doesn´t stay there. I´m trying to reply as a brand not as myself.
Why could this be?