TYPO3 7.6: add code after body tag for Facebook called by a fluid template

0
votes

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">
        <a href="{facebook}">{facebook}</a>
    </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 ...

2
facebooktyposcriptfluidtypo3-7.6.x

2 Answers

2
votes

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.

0
votes

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>
)