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 <head>...</head> du gabarit *}
{if isset($SocialScripts)}{$SocialScripts}{/if}
 {* Code à insérer dans la partie <body>...</body> du gabarit *}
{global_content name='SocialSharing'}

 

Toutes les catégories

Rechercher dans les ressources

Dans la même catégorie...

Les différentes résolutions d'écrans pour le web

Avec l'apparition des smartphones modernes, des tablettes tactiles et même de l'internet sur la télévision, 2011 a été vraiment[...]

Centrer une image (horizontalement et verticalement) dans un bloc

Centrage horizontal Le centrage horizontal d'une image dans un un conteneur de type bloc, une  <div> par[...]

Comment rendre cliquable une &lt;div&gt;?

Quelle utilité ? Prenons par exemple le sommaire d'un blog dont le code HTML pourrait ressembler à ça[...]

Compte à rebours ou différence entre 2 dates

"Ne ratez pas l'ouverture du site dans 50 jours!" Bien entendu, dans cet exemple, il est hors de[...]

Configurer le paiement avec Paypal

Installer une passerelle de paiement Paypal sur un site CMS Made Simple est sans doute la solution la plus[...]