Wrap content element with social plugins

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.