Ajouter Like, Tweet et +1 avec CMS Made Simple
Pour permettre au visiteur de faire connaitre votre site à ses contacts, il est courant d'ajouter les boutons de partage des principaux réseaux sociaux comme Facebook, Twitter ou Google.
L'opération se passe en 2 étapes : création d'un bloc de contenu global puis insertion dans le gabarit de page.
Le bloc de contenu global
Dans ce bloc, on met tout le code nécessaire au fonctionnement de ces boutons. La première partie permet d'assigner du contenu qui sera placé ensuite dans la partie <head> du gabarit. Pour le bouton Facebook, il faudra renseigner l'URL de la page active.
{* "SocialSharing": bloc de contenu global *}
{* Contenu à insérer avant </head> *}
{capture assign=SocialScripts}
<script type="text/javascript">
{literal}
window.___gcfg = {lang: 'fr'};
(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);
})();
{/literal}
</script>
{/capture}
{* Les boutons de partage *}
{* Facebook buttons *}
<div class="socialBTN fb">
<div id="fb-root"></div>
<script type="text/javascript">/* <![CDATA[ */
{literal}
(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'));
document.write('<div class="fb-like" data-href="http://www.monsite.com/mapage.html" data-send="false" data-layout="button_count" data-width="80" data-show-faces="true"></div>');
{/literal}/* ]]> */</script>
</div>
{* Twitter button *}
<div class="socialBTN tw">
<div>
<script type="text/javascript">/* <![CDATA[ */
document.write('<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="jorisdaudet" data-lang="fr">Tweeter</a>');
/* ]]> */</script>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
</div>
{* +1 button *}
<div class="socialBTN gg">
<script type="text/javascript">/* <![CDATA[ */
document.write('<div class="g-plusone" data-size="medium"></div>');/* ]]> */
</script>
</div>
Ici, l'utilisation de document.write permet de passer les tests de validation W3C.
Insertion dans le gabarit de page
Quand le bloc de contenu global est créé, il n'y a plus qu'à l'appeler depuis le gabarit de page.
{* Code à insérer dans la partie ... du gabarit *}
{if isset($SocialScripts)}{$SocialScripts}{/if}{* Code à insérer dans la partie... du gabarit *}
{global_content name='SocialSharing'}