TLDR:- JS amateur here. Call to Graph API, FB.INIT() did not work from my local machine. But worked from my Github static website. Why?
Detail:
I am learning (or trying to learn) web app development on my own, after going thru some tutorials thought of creating webpage with JS which calls FB graph API.
Copied FB provided code to load SDK and logic to show like buttons.
Nothing happened when i opened HTML thru browser, but when I pushed it on GitHub it worked! Not sure why?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx',
xfbml : true,
version : 'v2.6'
});
};
(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>
-----------------------------------------
**Code to show like/share buttons:-**
<div
class="fb-like"
data-share="true"
data-width="45"
data-show-faces="true">
</div>
_____________________________________-
Thank you for taking time reading thru this.
It is because the url that you have specified for you Facebook app as callback url is that of github. You can change it for a while and test and see, it will work for "localhost" but not for "127.0.0.1".
Or you can create two apps.
Related
at the bottom of this page (https://go.microgreensfarmer.com/video1) you will see I added the Facebook comments plugin. Well I would love to get rid of the date/time that is listed along with each comment. Is this possible?
Here is the Javascript SDK I have in the body:
<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>
And here is the HTML I have on the page:
<div class="fb-comments" data-href="http://microgreensfarmer.com" data-width="100%" data-numposts="5" order_by="reverse_time"></div>
Any way to edit these so date/time is not displayed alongside comment?
Unfortunately for you, this is not possible using Facebook's comments plugin. This is probably because Facebook wants to show its own identity. For full details of the plugin and the options you have, you can take a look here (If you haven't already)
https://developers.facebook.com/docs/plugins/comments
Sorry!
I implemented facebook login in my website using 'react-facebook-login' module
and I used this code in CompentDidMount
`// Facebook Authentication
window.fbAsyncInit = function() {
FB.init({
appId : '***********',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : false, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
}.bind(this);
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));`
In render function my code is
` <FacebookLogin
appId="344596562557645"
autoLoad={true}
fields="name,email,picture.height(2048)"
scope="public_profile, email"
callback={this.responseFacebook.bind(this)}
cssClass="fbbutton"
icon="fa-facebook"
textButton=" FACEBOOK"
redirectUri={window.location.href}
/>`
Now login with facebook is perfectly working in desktop but not working in mobile browsers (both android and ios).In mobile browsers the callback function is not called because the the page is reloaded while in mobile. Please help me fix it , how to get data from that callback function.
I was able to fixed this issue. Added isMobile={false}
are you using the redirect or the popup method? On mobile sometimes I've only had luck with the popup method. maybe that will help? not sure.
I fixed this by using this module - react-facebook-login-component
I cut and paste the code generated by FB into my app as directed.
</head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyId',
xfbml : true,
version : 'v2.5'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href={{webAddress}} data-layout="button_count"></div>
<div class="fb-comments" data-href={{webAddress}} data-numposts="10"></div>
I tried putting the JS in the head as well as in different parts of my index.html but the share button and comments would appear without an additional refresh.
I had a similar problem with my LinkedIn button not showing up until after a refresh and I switched
<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to
<script>
delete IN;
$.getScript("https://platform.linkedin.com/in.js")
</script>
and the problem is solved. Would a similar thing work for FB? If so how do I implement it?
I looked at this post, http://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically
focused on FB.XFBML.parse() but given the info on
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I don't know how to implement it and I don't think it's what will fix my problem because no information is coming from my server.
The code generated from the Twitter and FB share buttons belongs in the index.js file at the top of the <body> in an Angular Fullstack application. Then in the appropriate controller.js file put:
angular.element(document).ready(function() {
twttr.widgets.load();
FB.XFBML.parse();
});
I have django app and I need to show the number of followers of its facebook page.
In my base.html I have hardcoded the number of FB followers, but this is not a feasible longterm solution.
I've been experimenting with inline javascript, and this is the state of my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'NumOfMyId',
xfbml : true,
version : 'v2.4'
});
FB.api(
'/MyWebSite',
'GET',
{"fields":"likes"},
function(response) {
console.log(response);
//here should go something so that the number of people liking the page gets appended to an html element by id;
});
};
(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 need the facebook api to give me the number of followers, which is not a problem in the graph api explorer, but I have no clue how to accomplish it in my tag.
Any example/advice or redirecting to similar solved questions/issues/github project would be super appreciated!
~good vibes to y'all
If you're using jQuery on your page, you can do something like this:
<p>The total number of likes in my page is <span id="number-of-likes"></span>.</p>
function(response) {
console.log(response);
$('#number-of-liles').html(response.NUMBER_OF_LIKES_FIELD);
});
Where response.NUMBER_OF_LIKES_FIELD is the correct field name that has the number of likes.
This may be a dumb question but i'm not such a hacker (yet! hehehe)...
I have successfully developed a Facebook App to display my website in a Facebook tab inserting the following code right after the "body" tag to an HTML site:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID_NUMBER',
xfbml : true,
version : 'v2.4'
});
};
(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>
You can see it here: https://www.facebook.com/jogojogomx/app_1096645967031976
You can see the original HTML site at jogojogo.mx
BUT NOW, I want to do the same with a Wordpress themed website. I have tried to put it in different .php files of the theme with no success...
See this link: https://www.facebook.com/Cochinita.YUKTK/app_1024054777627795
Can anyone help?
Thanks in advance!