Intégrer les boutons des réseaux sociaux sans API/SDK/Javascript externe - Wiki

Dernière mise à jour : 15/02/2017 à 20h00

Table des matières

Avant de commencer
Facebook
1. Intégration
  1. HTML avec JS interne au site
    1. Pour avoir le bouton sur la page de l'article :
Twitter
1. Intégration
  1. HTML avec JS interne au site
    1. Pour avoir le bouton sur la page de l'article :
Google plus
1. Intégration
  1. HTML avec JS interne au site
    1. Pour avoir le bouton sur la page de l'article :

Avant de commencer

Ce tuto est encore en cours de rédaction/tests/affinage, merci d'en tenir compte

Ce tutoriel est une "mise à jour" de celui de babsolune qui est ici (https://www.phpboost.com/wiki/integrer-les-boutons-des-reseaux-sociaux).

Il garde la même mise en forme mais n'utilise pas de JavaScript (JS) et/ou widget présenté/mise à disposition par les réseau sociaux, ce qui dispense (normalement) de l'avertissement sur les cookies comme le prévoit la loi française/européenne.

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 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 5.0

Facebook

Intégration

HTML avec JS interne au site

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 id="utils-icon-share-fb">
<a href="javascript:void(0);" onclick="Javascript:window.open('https://facebook.com/sharer/sharer.php?u='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
<i class="fa fa-facebook-square fa-2x"></i>
</a>
</div>

Twitter

Intégration

HTML avec JS interne au site

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 id="utils-icon-share-twitter">
<a href="javascript:void(0);" onclick="Javascript:window.open('https://twitter.com/intent/tweet?text=Petit%20partage%20%3A&url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
<i class="fa fa-twitter-square fa-2x"></i>
</a>
</div>

Et voici une petite doc pour pousser la personnalisation : https://dev.twitter.com/web/tweet-button/web-intent

Google plus

Intégration

HTML avec JS interne au site

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 id="utils-icon-share-google-plus">
<a href="javascript:void(0);" onclick="Javascript:window.open('https://plus.google.com/share?url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
<i class="fa fa-google-plus-square fa-2x"></i>
</a>
</div>