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>
)
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 want to integrate a fb like box in a smarty tpl file. At this time only the iframe solution works fine, but there is no language support and that's why I want to use the new solution for the box.
The following code does not render the box in the tpl:
<div class="fb-page" data-href="https://www.facebook.com/myfbpage"
data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/myfbpage">
My Facebook Page</blockquote>
</div></div>
Is there a solution?
The Language of the Facebook Page Plugin is defined by the version of the Facebook JS-SDK that is loaded on your 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/de_DE/sdk.js#xfbml=1&version=v2.5&appId=119010228291102";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This will render the Page Plugin in German 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/en_US/sdk.js#xfbml=1&version=v2.5&appId=119010228291102";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Will render it in english.
Just replace the locale in the URI to the locale you want to use on this page.
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 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've been trying to figure out why the code for my likebox will not work when I paste it into my page but it will load just fine when the same code is used in an html file. I got the code from the official facebook dev generator. The script code is in header.php and the code with the div that should call the js up is in the body of the message as raw html. Still, I'm getting nothing.
Has anyone else experienced this?
The following code will work when loaded from my computer. Will not work when I upload the same file to (loft3.com/hp.html) or when I try to use the code in header.php and call the second part in my post.
<html>
<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/hp" data-width="800" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false"></div>
</body>
</html>