VI. Tutoriels

Intégrer les boutons des réseaux sociaux

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 7394 fois