I am using FB Commentbox on my blog on bloggers, but it never displays. I am using this code
<b:if cond='data:blog.pageType == "item"'>
<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 class="fb-comments" data-href="googleplusblog.info" data-num-posts="10" data-width="500"></div>
</b:if>
And this in Head
<meta property="fb:app_id" content="XXXXXXXXXX98504"/>
<meta property="fb:admins" content="XXXXXXXXXX31342"/>
APP ID is the id which was generated when i created the app (i just created the app for ID, hadn't done any editing to its default settings)
Please tell me what i am doing wrong
You've probably discoved the answer by now, but for anyone else coming across this, you need to add the fb namespace to the page like this:
<html xmlns:fb="http://ogp.me/ns/fb#">
Related
I have Facebook Comments on internal page - you have to login to see it. I configured it according to docs (I believe). Comments widget is displayed. I can add comments from different accounts and I can see them but there is no Moderation Tool button and comments are not shown on https://developers.facebook.com/tools/comments/ I tried 3 configurations. None worked for me. What am I doing wrong?
Configuration 1
In head
<meta property="fb:admins" content="facebook admins"/>
After opening body tag
<div id="fb-root"></div>
<script>
/* <![CDATA[ */
(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/pl_PL/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/* ]]> */
</script>
Later on page
<div class="fb-comments" data-href="url to this specific article" data-width="100%"></div>
Configuration 2
In head
<meta property="fb:app_id" content="facebook app id"/>
After opening body tag
<div id="fb-root"></div>
<script>
/* <![CDATA[ */
(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/pl_PL/sdk.js#xfbml=1&version=v2.6&appId=facebook app id";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/* ]]> */
</script>
Later on page
<div class="fb-comments" data-href="url to this specific article" data-width="100%"></div>
Configuration 3 (mix of both)
In head
<meta property="fb:app_id" content="facebook app id"/>
<meta property="fb:admins" content="facebook admins"/>
After opening body tag
<div id="fb-root"></div>
<script>
/* <![CDATA[ */
(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/pl_PL/sdk.js#xfbml=1&version=v2.6&appId=facebook app id";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/* ]]> */
</script>
Later on page
<div class="fb-comments" data-href="url to this specific article" data-width="100%"></div>
Common app settings
Comments widget on my page when I (admin) am logged in
I had same problem. I also tried all combination.
Go to https://developers.facebook.com/tools/debug/
Paste the url.
The problem will be shown in "Warnings That Should Be Fixed"
I had a problem with app_id.
Also, you can specify either fb:app_id or fb:admins, but not both.
I have project in wordpress with magazine theme. I noticed the facebook comment box was not displaying on single.php page. when I viewed through 'View Page Source' the code was present even space was left for comment box between the article and advertisement. I checked css for display:none or any other thing that might have caused but no solution yet.
I am getting that div as
where data-href is coming as "./" Please help.
Working sample:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title></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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:comments href="http://stackoverflow.com/" numposts="5" colorscheme="light"></fb:comments>
</body>
</html>
I have added a comments box on my page:
http://metallica-gr.net/news/welcome/welcome.html
But when I add a comment even with Post to Facebook checked, that comment is not showing on facebook. Sometimes it worked when I unchecked and rechecked the box. Is it bug or am I doing something wrong?
Your source code shows you have multiple fb-root div tags and no app Id.
Your code:
<div id="fb-root"></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/el_GR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Remove one fb-root div tag and then create a new fb app, get its app id and append it to the connect url, i.e. //connect.facebook.net/el_GR/all.js#xfbml=1
Final code should look like this:
<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/el_GR/all.js#xfbml=1&appId=<YOUR-APP-ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Also why not use HTML5 code for plugin?
<div class="fb-comments" data-href="{YOUR_SITE_URL}" data-num-posts="2" data-width="470"></div>
And your site is missing some of the important OG meta tags, those are og:title, og:url, og:description, og:type and fb:app_id (Optional for moderation of comments).
Also your image referenced by og:image should be at least 200px in both dimensions. Correct it and it should work.
For example:
<meta property="og:title" content="Metallica-gr" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://metallica-gr.net/news/welcome/welcome.html" />
<meta property="og:image" content="{IMAGE_URL}" />
<meta property="og:description" content="{YOUR_SITE_DESCRIPTION}" />
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
Don't forget to lint the url after changes, so fb servers cache new updates.
Let me know if it worked.
How to make Facebook Comments plugin work on Google Chrome? It shows up in IE9 and Opera, but for some reason isn't accessible on Google Chrome.
Thanks in advance!
Codes Used(From Facebook Developers Comments):
<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>
and
<div class="fb-comments" data-href="http://websiteurl....." data-num-posts="1" data-width="500"></div>
Have you added the facebook xmlns attribute in the html header? I had some problems in a webpage with this plugin untill I added it.
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Besides, I use attributes in comments' div without the "data" and it works in all browsers:
<fb:comments href="WEB_URL" num_posts="10" width="500" notify="true"></fb:comments>
I integrated multiple comment boxes to my site.
I have setup:
<meta property="fb:admins" content="xxx"/>
<meta property="fb:app_id" content="xxx"/>
and:
<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/de_DE/all.js#xfbml=1&appId=xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
comment box:
<fb:comments href="http://www.someulr.com" num_posts="2" width="660"></fb:comments>
I also have an App with an AppID.
my second moderator can see all the comments in the comment moderation tool, but he can't delete them? Why that is not possible?
there is a second tab on the moderation tool, Moderateview, this is empty, also with my account.
thx
I don't think you can delete the comments totally. You can only remove them from your site. Moderate --> Hide post