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?
Related
Am trying to implement Facebook customer chat plugin(which is generated by facebook) in JSF project, but when I insert the code snippet ... I don't get anything, no errors, no chat bubble, yet I can see a generated div with it's data
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
(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/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="#44bec7"
logged_in_greeting="Hello, speak with us"
logged_out_greeting="Hello, speak with us">
</div>
it should be noted that I had to add double quotes for setup_tool as JSF was throwing error attribution="setup_tool"
It's working after adding
appId: '*****',
autoLogAppEvents : true
to FB.init
Here's a code that I got from facebook chat plugin messenger.
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
(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/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="my-page-ID">
</div>
Google Tag manager send me an alert, that this code is invalid.
What should I do with this?
How can I add this code with Google tag manager?
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.
I have a couple of facebook buttons and they appear as plain text. I have no clue why. It happened all of a sudden, I didn't change the code. All browsers show it as plain text.
My code is:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '<?php echo AppInfo::appID(); ?>', // App ID from the app dashboard
channelUrl : '//<?php echo $_SERVER["HTTP_HOST"]; ?>/channel.html', // Channel file for x-domain comms
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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<ul>
<li><fb:login-button scope="user_map" id="get_map" onclick="self.location=http://localhost:8080/savefunctions.php?runFunction=getLikes">Get Map</fb:login-button></li>
<li><fb:login-button scope="user_groups" id="get_acc" onclick="self.location=http://localhost:8080/savefunctions.php?runFunction=getLikes">Get your account info</fb:login-button>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Gica</div></li>
<li><fb:login-button scope="user_apps" id="like_acc" onclick="self.location=http://localhost:8080/savefunctions.php?runFunction=getLikes">Get apps</fb:login-button></li>
<li><fb:login-button scope="user_groups" id="get_all" onclick="http://localhost:8080/savefunctions.php?runFunction=getLikes">Get All</fb:login-button></li>
</ul>
Please ignore things in onClick.
Please notice that I tried both <fb:login-button> and <div class="fb-login-button">. They both appear as plain text.
I've added a facebook comment box on my website, but its only loading around 40% of the time. The other 60% nothing happens. I've tried to do some troubleshooting and came up with that, the times its not loading the height of the box is set to 0px, but when its loading it says 160px, as its supposed to.
Here is all the code related to the commentbox.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
The following is right after the body tag.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '389788207743820', // App ID
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</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/sv_SE/all.js#xfbml=1&appId=389788207743820";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and this is placed where I want my box
<div class="fb-comments" data-href="http://www.stadskoll.nu/restaurang/harrys.php" data-num-posts="2" data-width="565px" data-height="160"></div>
Thanks in advance
If that's the code you're actually using, there are a few things you need to change:
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\channel.html', // Channel File
This has to be on a public URL, just move the file somewhere on the server where it can be accessed by anybody.
Next, you have to and you're including the JS SDK two times? You might want to double check that: https://developers.facebook.com/docs/reference/javascript/