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.
Related
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>
)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Feed Dialog Page</title>
</head>
<body>
//I can trigger the FB.ui with this image here but thatś not what I want. I want to trigger the FB.ui with the test function with the native facebook-share button with the class fb-share-button below.
<img id="share_button" onclick="test();" src="">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.2'
});
};
(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'));
function test(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
}
</script>
<div class="fb-share-button" data-href="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-redirect="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-layout="button_count"></div>
</body>
</html>
That´s not possible, you can only use the image of the share button, but you can´t use the share button plugin to trigger your own custom function.
I embed Facebook like button in my page, but the problem is that, when I login using the like button then the page is liked. But if I already logged in from another page or tab and I clicked the like button a red error is displayed and a message pops up that the message has been blocked by our security system.
My code to embed like button:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Facebook Checker</title>
<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>
</head>
<body >
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.google.com" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<script type="text/javascript">
</script>
</body>
</html>
Facebook Like detect suspecious Activity on Localhost. Make a forward account and forward your localy site and past the above code its Works Fine :)
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Facebook Checker</title>
<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>
</head>
<body >
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.google.com" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<script type="text/javascript">
</script>
</body>
</html>
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>
I have developed a web page as follow, would you please help me why this code does not work?
When i liked the page, alert in FB.Event.subscribe('edge.create' does not display!?
http://www.mandanemedia.com/freelancer/
<div >
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<img src="fbbutton.jpg" style="width:290px; height:88px;"/>
</center>
<fb:like-box href="http://www.facebook.com/pages/MandaneMediacom/275554465891715" width="292" show_faces="true" border_color="#fff" stream="false" header="false"></fb:like-box>
</center>
</div>
</div>
<div id="fb-root"></div>
</body>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId:'275554465891715',
status:true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(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>