VI. Tutoriels communautaires

Intégrer les boutons des réseaux sociaux

Dernière mise à jour : 14/02/2017 à 09h44
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 <script></script><script></script></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 <script></script><script></script></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-...></a>




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-...></a>




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 <script></script><script></script></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>
Cette page a été vue 11874 fois