Wrap content element with typoscript
Removing the default TYPO3 content div class or replacing that with another one is sometimes crucial in the development process.
The neccesity to edit the class comes when you have to transfer a html & css template to TYPO3. Doing so can be a challange for a new TYPO3 Developer.
But actually it's pretty simple and it's done throw some TypoScript configurations.
Remove the actual TypoScript wrapping
The code below shows how to remove the actual default div wrapping
tt_content.stdWrap.innerWrap >
tt_content{
stdWrap {
innerWrap = <div class="className">|</div>
}
}Wrap content element with social plugins
Producing websites today makes neccesary sharing your content throw different social networks to have more traffic flow to your website and share your thought with the world.
Typo3 has very flexible ways to handle that and to configure your content elements. First thing that you should do is going on different social networks and get your code to share your articles. For example I will do that for facebook,google+ and twitter but I am sure you can do that for every social networks that allow it. These are the links to go to get your share code :
From the facebook you will get to codes one of them is a javascript that you can add directly in the layout of your template directly after the body tag: Like This:
###BODY_PART###
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>The same behavior is also for the G+ and Twitter,so finally you will have something like this:
###BODY_PART###
<div id="fb-root"></div>
<script type='text/javascript'>
// facebook 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'));
// twitter script
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}
(document,"script","twitter-wjs");
// google+ script
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>After you have finished with your layout file then is the time to make the configuration in your Template Configuration adding this code :
tt_content.textpic.stdWrap.dataWrap (
|
<div id='socials'>
<div class="fb-like" data-href="http://domain.com/index.php?id={ field:uid }" data-send="false" data-layout="button_count" data-width="40" data-show-faces="false" data-font="arial">
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://domain.com/index.php?id={ field:uid }">Tweet</a>
<g:plusone size="medium" href="http://domain.com/index.php?id={ field:uid }"></g:plusone>
</div>
)The reason why I have used the data wrap is because that way I can use typoscript in that to get the id of the content element.