VI. Tutoriels communautaires

Intégrer les boutons des réseaux sociaux

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 27/10/2014 à 00h22
Table des matières
  1. Avant de commencer
  2. Facebook
    1. Créer une appli facebook
    2. Intégration
      1. javascript
      2. Html
        1. Pour avoir le bouton sur la page de l'article:
        2. Pour avoir le bouton sur chaque article de la page d'accueil du module news:
  3. Twitter
    1. Créer un widget twitter
    2. Intégration
      1. javascript
      2. Html
        1. Pour avoir le bouton sur la page de l'article:
        2. Pour avoir le bouton sur chaque article de la page d'accueil du module news:
  4. Google plus
    1. Créer un widget google plus
    2. Intégration
      1. javascript
      2. Html
        1. Pour avoir le bouton sur la page de l'article:
        2. Pour avoir le bouton sur chaque article de la page d'accueil du module news:

Avant de commencer



Ce tutoriel explique comment intégrer les boutons de partage des réseaux sociaux, facebook, twitter et google plus, dans le module news.



Le principe est le même pour tout autre widget ou tout autre module.







si ce n'est pas déjà fait, copier le dossier /news/templates dans /templates/NOMDUTHEME/modules puis le renommer en "news" (s'il n'y a pas de dossier "modules" dans le theme, il faut le créer)







Compatibilité : PHPBoost 4.1











Facebook









Créer une appli facebook









Se rendre sur facebook/developer => lien



Dans le menu haut, cliquer sur "apps" et suivre la procédure pour créer une nouvelle appli facebook => obtention une clée .



Cliquer sur "doc" dans le menu haut, puis sur "sharing" dans le menu latéral et enfin sur "modules sociaux"







Choisir son plugin et remplir les champs en fonction des besoins



Cliquer sur "get code" => code en 2 parties



  • la premiere partie (javascript) est à inclure dans le frame.tpl du theme entre et # INCLUDE JS_BOTTOM # et </body>
  • la deuxieme (html) est inclure dans les pages.tpl du module à l'endroit ou on veut le voir apparaitre, puis modifier le lien cible pour l'adapter à phpboost.











Intégration









javascript









ouvrir /templates/NOMDUTHEME/frame.tpl



trouver



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM # 
    </body>
 




et remplacer par



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #         
 
<!-- facebook share -->
        <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/fr_FR/sdk.js#xfbml=1&appId=NUMERO-IDAPP-FOURNIE-PAR-FB&version=v2.0";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));            
        </script>
    </body>




normalement, "NUMERO-IDAPP-FOURNIE-PAR-FB" et automatiquement rempli si l'application est créée







Html









Pour avoir le bouton sur la page de l'article:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplayNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<div class="fb-share-button" data-href="adresse-du-site{U_LINK}" data-...></div>








Pour avoir le bouton sur chaque article de la page d'accueil du module news:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplaySeveralNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<div class="fb-share-button" data-href="adresse-du-site{news.U_LINK}" data-...></div>








Twitter









Créer un widget twitter









Se rendre sur twitter/ressource => lien







Choisir son plugin (ici: partager un lien) et remplir les champs en fonction des besoins



=> code en 2 parties



  • la première partie (javascript) est à inclure dans le frame.tpl du thème entre et # INCLUDE JS_BOTTOM # et </body>
  • la deuxième (html) est inclure dans les pages.tpl du module à l'endroit ou on veut le voir apparaitre, puis modifier le lien cible et le titre pour l'adapter à phpboost.











Intégration









javascript









ouvrir /templates/NOMDUTHEME/frame.tpl



trouver



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM # 
    </body>
 




et remplacer par



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #         
 
<!-- twitter share -->
        <script type="text/javascript">
            !function(d,s,id)
            {var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
            if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
        </script>
    </body>








Html









Pour avoir le bouton sur la page de l'article:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplayNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="adresse-du-site{U_LINK}" data-text="{NAME}" data-...></div>








Pour avoir le bouton sur chaque article de la page d'accueil du module news:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplaySeveralNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="adresse-du-site{news.U_LINK}" data-text="{news.NAME}" data-...></div>








Google plus









Créer un widget google plus









Se rendre sur google/developer => lien







Choisir son plugin (ici: bouton de partage) et remplir les champs en fonction des besoins



=> code en 2 parties



  • la première partie (javascript), Je conseil d'utiliser le JavaScript asynchrone (plus bas sur la page google) plutôt que celui fourni par le formulaire, est à inclure dans le frame.tpl du thème entre et # INCLUDE JS_BOTTOM # et </body>
  • la deuxième (html) est inclure dans les pages.tpl du module à l'endroit ou on veut le voir apparaitre, puis modifier le lien cible pour l'adapter à phpboost.











Intégration









javascript









ouvrir /templates/NOMDUTHEME/frame.tpl



trouver



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM # 
    </body>
 




et remplacer par



Code HTML : 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
 
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #         
 
<!-- google share -->
        <script type="text/javascript">
            (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>
    </body>








Html









Pour avoir le bouton sur la page de l'article:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplayNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<div class="g-plus" data-href="adresse-du-site{U_LINK}" data-...></div>








Pour avoir le bouton sur chaque article de la page d'accueil du module news:








ouvrir /templates/NOMDUTHEME/modules/news/NewsDisplaySeveralNewsController.tpl



ajouter à l'endroit où on veut voir le bouton



Code HTML : 
<div class="g-plus" data-href="adresse-du-site{news.U_LINK}" data-...></div>