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.
