I need to execute javascript code after the facebook comments plugin is properly rendered on the page (basically I need to get the #content's height)
Comments placement somewhere in the content:
<div id="content">
<fb:comments href="http://domain.com/somelink.php" num_posts="25" width="728"></fb:comments>
</div>
Facebook init at the bottom of the page:
<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=<?=MY_FACEBOOK_APP_ID?>&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I tried this:
FB.Event.subscribe("xfbml.render", function(response) {
console.log($('#content').height());
});
...but got this error:
Uncaught ReferenceError: FB is not defined
Any ideas? Thanks!
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 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.
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 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.
I have a like button that works perfectly. But when i try to add callback to the like-box it wont trigger. I read on a stack topic that says its a bug(?) and i tried allot, but i cant find it out.
The code i use:
<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/nb_NO/all.js#xfbml=1&appId=163145893868097";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-height="200" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>
EDIT:
And the callback within the javascript code:
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
You might want to check and track this bug on Facebook Developers:
https://developers.facebook.com/bugs/508219649233845