I have included the code i needed to be able to show the facebook login button on my page. But the button does not show up, could you please read my code and tell me if you see any problems with it? Thank you
<!DOCTYPE html>
<html>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
vappId : '486506335043368',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
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>
<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.10&appId=486506335043368";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="large" data- button-type="continue_with" data-show-faces="false" data-auto-logout- link="false" data-use-continue-as="false"></div>
</body>
</html>
I think there are 2 possible problems:
1)You need to change js.src assignment to: js.src="https://connect.facebook.net/en_US/all.js";
2)I think Facebook does not support calls from a local file, the script has to be run on a file with an http:// or https:// URI.
See this answer.
Related
I have problem with adding a chat to the website. The code below works on one page, but doesn't work on another. The domain is added to the whitelist. Does anyone have any idea why this could happen?
Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v4.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 = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="********"
theme_color="#000000"
logged_in_greeting="Lorem Ipsum"
logged_out_greeting="Lorem Ipsum"></div>
I have been having issues with the way in which my facebook send button works on my website, you can see an example at http://mysocialrewards.com.au/hellofresh-discount-code/
I was wondering if anyone could help me figure out why it's not displaying correctly, I've tried everything I can, code is below:
<div class="fb-send" data-href="https://www.hellofresh.com.au/food-boxes/classic-box/?c=FRESH118" data-size="large"></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_GB/sdk.js#xfbml=1&version=v2.7&appId=433230226813254";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I've read the previous problems for other people in this situation but none of them rectify my issue.
Nothing shows up at all on my website when trying to implement this facebook like/stream to a website.. any ideas?
<html>
<head>
<title><hi></title></head>
<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 = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Aberliquidscreed" data-width="250px" data-height="400px" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</body>
</htm>
Your missing your facebook SDK and facebook API call FB.init
Step one: (put this inside your header html tag and update the appid_goes_here with your id)
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID_goes_here',
xfbml : true,
version : 'v2.2'
});
};
(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>
Step Two: (anywhere in content replace appid_goes_here with your api key)
<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&appId=appid_goes_here&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I've added the code that has worked in the past to add a facebook "like" button to my latest site yet, although it does display the Tweet button, it does not display the facebook button.
Is it because facebook doesn't recognize and/or support azure web sites?
Here is my HTML/Javascript:
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div style="display:inline-block;vertical-align:top">
Tweet
<script>
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
</script>
</div>
<div style="display:inline-block;vertical-align:top" class="fb-like" data-href="http:/usamaporama.azurewebsites.net" data-send="false" data-width="450" data-show-faces="false" data-font="segoe ui"></div>
UPDATE
The Chrome Dev Tools console says: "FB.getLoginStatus() called before calling FB.init()." but I don't grok that, as searching my code for "getLoginStatus" finds nothing, nor does searching for "FB.init".
Check your browser's JavaScript console.
Invalid App Id: Must be a number or numeric string representing the application id.
Below script will downlaod the facebook sdk to generate the code to create the like button
(function() {
var scrFaceBook = document.createElement('script');
scrFaceBook.type = 'text/javascript';
scrFaceBook.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
scrFaceBook.async = true;
document.getElementById('fb-root').appendChild(scrFaceBook);
})();
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true" data-font="arial"></div>
I am doing like this to add the FaceBook like button. When I run my application and see I get "object does not support this property or method, all.js, uri: https://connect.facebook.net/en_US/all.js"
Can some one suggest me how do I fix this? Thanks in advance.
You forgot to add the <div id="fb-root"></div> to the body of the HTML.
Also you seem to have forgotten the APP ID
<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/all.js#xfbml=1&appId=127211380649475";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
You need to make sure the dom element is declared above the script tag. Otherwise it might not load:
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true" data-font="arial"></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/all.js#xfbml=1&appId=127211380649475";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
are your broswer support html5? maybe the error is here "scrFaceBook.async = true;"