I use Facebook comments on my website, and it works fine, but count is updated only after add comment. When i tried remove comment, comment removed, but count didn't update.
<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=270227116476622";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="facebook">
<fb:comments-count href='http://floral-style.ru/blog/novogodnie-kompozicii-v-galeree-butikov-Mon-Plaisir-DEKAPT-Ermenegildo-Zegna'></fb:comments-count>
<fb:comments width='850' colorscheme='light' href='http://floral-style.ru/blog/novogodnie-kompozicii-v-galeree-butikov-Mon-Plaisir-DEKAPT-Ermenegildo-Zegna' xid='99' order-by="reverse_time"/>
</div>
Try this:
<div class="fb-comments-count" data-href="http://facebook.com">0</div>
Replace data-href with your URL.
The "0" zero will be replaced after the server respond.
Try this:
HTML - put this after <body> tag:
<span class='comment-count' id='facebook-comment-count'>
<fb:comments-count href='YOUR_URL_HERE'/>
</span>
JQuery/Javascript - put this before </body> tag:
<script type='text/javascript'>
$(window).load(function(){
//UPDATE NUMBER OF COMMENTS
var comment_callback = function(response) {
FB.XFBML.parse(document.getElementById("facebook-comment-count"));
};
//Call comment_callback function when the comments are created.
FB.Event.subscribe('comment.create', comment_callback);
//Call comment_callback function when the comments are removed.
FB.Event.subscribe('comment.remove', comment_callback);
});
</script>
Related
We have a facebook comments plugin in our web code and we want to update the comments section in realtime.
For this we are using FB.XFBML.parse() routine to parse the FB DOM. However when do so we see a huge flicker as the fb-comments DOM is removed and added again.
Is there any way to can auto refresh the comments section without any flicker?
Here is our code
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="social" style="width:550px;height:100px">
<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&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'))
</script>
<div id = parent>
<div id ="mycomments" class="fb-comments" data-href="http://www.example.com/#/home" data-order-by=reverse_time>
</div>
</div>
<script>
function removeElement(elementId) {
try{
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
} catch (e){
}
}
function addElement() {
try{
const div = document.createElement('div');
div.innerHTML = `<div id ="mycomments" class="fb-comments" data-href="http://www.example.com/#/home" data-order-by=reverse_time/>`;
document.getElementById('parent').appendChild(div);
} catch (e){
console.error(e);
}
}
setInterval(function(){
removeElement("mycomments");
addElement();
FB.XFBML.parse();
console.log("added again");
}, 5000)
</script>
</div>
</body>
</html>
Any pointers will be greatly helpful.
Thanks.
I insert a fluid template as Content Element somewhere on the page which contains a facebook plugin (developers.facebook.com) ... this plugin requires the SDK to be loaded once right after the opening <body> tag.
I can include the SDK on every page with the following code:
page {
bodyTagCObject.stdWrap.append = TEXT
bodyTagCObject.stdWrap.append.value (
<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.9";fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
)
}
But I'd like to insert it only when the content element is inserted, maybe with a custom viewhelper, or maybe an existing viewhelper could do the job ...
this is the fluid template (the variable 'facebook' is a constant containg the pertinent url):
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="fb-page"
data-href="{facebook}"
data-tabs="timeline"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<blockquote cite="{facebook}" class="fb-xfbml-parse-ignore">
{facebook}
</blockquote>
</div>
</html>
I tried if the <f:cObject> viewhelper could fill the value for bodyTagCObject.stdWrap.append, maybe it can but I got nothing working ...
My solution would it be to locate
(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.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
in a single file and load it in your template via the Asset Viewhelper of the extension "vhs". Then you can append your div to the body tag:
page {
bodyTagCObject.stdWrap.append = TEXT
bodyTagCObject.stdWrap.append.value (
<div id="fb-root"></div>
)
}
It appears on every page but the script will be inserted just when the content element is inserted. I hope it helps you.
If you have an own body tag like this
page.bodyTagCObject = TEXT
page.bodyTagCObject {
field = uid
wrap = <body data-cms-pid="|">
}
you should do it this way (pay attention to the pipe sign)
page.bodyTagCObject.outerWrap (
|<div id="fb-root"></div>
)
The facebook like plugin counter was working fine until today. Now the plugin shows 0 likes.
<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=708684989223064&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="fb-like" data-href="https://www.facebook.com/edmhuntersofficial" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>
I checked with Facebook's Object Debugger and there don't seem to be any issues.
https://developers.facebook.com/tools/debug/og/object/
My website's URL where it is live is here
It was an issue at Facebook's end. It's solved now.
If you change the canonical tag url that count will back to zero count make sure keep canonical url same and also its case sensitive
I want to include Facebook share button and comment box to my website.
I have a code for share button:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
<a name="fb_share" type="icon" share_url="www.example.com"></a>
For comment box:
<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/all.js#xfbml=1&appId=258471354227171";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="www.example.com" data-num-posts="3" data-width="600"></div>
Separately it works perfect, but when i put it in one page just one of them is working. What is a problem?
I think the solution you need is here:
Facebook Like button sometimes appears sometimes not
Basically you need to add the FB.share script after all.js.
I want use the comments box on my site to comment posts. I paste the code generated in my 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/it_IT/all.js#xfbml=1&appId=IDAPP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="https://facebook.3rdplace.com/zend/ibs_post.php?id=<?=$id_post?>" data-num-posts="2" data-width="470"></div>
If I post a comment, it appears, but it's not saved on Graph.
Where's the problem??
Ensure your data-href URL is accessable externally. Apart from that you could try and debug it using the comment.create event.
Like this:
FB.Event.subscribe('comment.create', function(comment) {
console.log(comment); // looking for comment.commentID - https://graph.facebook.com/<comment_id>
});