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