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

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>