Boutons de partage natifs pour les réseaux sociaux

Où placer les boutons de partages ?

Si la longueur de votre contenu le permet, il est conseillé d'ajouter les boutons de partage juste en dessous du titre de la page et une seconde fois en bas de page.

Si vous respectez la règle d'écriture en pyramide inversée, cela permet aux lecteurs de partager votre contenu dès le début si l'information en synthèse est suffisante pour eux. Et cela permet aussi à ceux qui vont prendre le temps de lire tout votre contenu de partager la page à partir des boutons du bas (sans avoir à remonter).

Quels boutons de partage utiliser ?

Pas besoin d'être présent sur tous les réseaux existants pour ajouter les boutons de partage. En effet, cette fonction permet à l'internaute de partager sur son propre profil (et n'est donc pas lié à votre page Facebook ou compte Twitter).

Il est donc conseillé de mettre les boutons susceptibles d'être utilisés par votre cible / communauté.

Enfin, un débat revient souvent sur l'apparence des boutons de partage. Chez Idewan, nous avons pris le parti pris d'utiliser les boutons natifs fournis par chaque réseau. Pour la simple et bonne raison, que ce sont des points de repère visuels pour l'internaute. En effet, des boutons de partage travaillés pour une charte graphique liée à votre site ont tendance à passer inaperçus...

Qui peut suivre la procédure suivante ?

Pour suivre cette procédure, il est recommandé de connaitre quelques bases de code. Si cela vous donne des boutons ou que vous n'êtes pas motivés pour passer quelques heures à bidouiller pour que cela fonctionne quand même; un conseil : utilisez ShareThis ou autre module tout fait pour les boutons de partage.

Codes pour insérer les boutons de partages dans votre site

Comme on est sympa et qu'on nous les demandes souvent dans nos formations, voici les codes à intégrer dans votre site (que ce soit un WordPress ou autre). Et un petit aperçu :

[pastacode lang="markup" message="Boutons de partage" highlight="" provider="manual" manual="%0A%3Cbr%20%2F%3E%0A%3Cdiv%20class%3D%22social-share%22%3E%0A%20%20%20%20%3C!--%20Facebook%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%20-3px%2020px%200%200%3B%22%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20class%3D%22fb-like%22%20data-layout%3D%22button_count%22%20data-action%3D%22like%22%20data-show-faces%3D%22false%22%20data-share%3D%22false%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20Twitter%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%200%2020px%200%200%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fshare%22%20class%3D%22twitter-share-button%22%20data-lang%3D%22fr%22%20data-via%3D%22idewan%22%3ETweeter%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20Google%2B%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%200%2020px%200%200%3B%22%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20class%3D%22g-plus%22%20data-action%3D%22share%22%20data-annotation%3D%22bubble%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20Scoop.it%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%200%20-8px%200%200%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22http%3A%2F%2Fwww.scoop.it%22%20class%3D%22scoopit-button%22%20scit-position%3D%22horizontal%22%3EScoop.it%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20LinkedIn%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%200%2018px%200%200%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520type%253D%2522IN%252FShare%2522%2520data-counter%253D%2522right%2522%253E%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20Viadeo%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%200%2020px%200%200%3B%22%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20class%3D%22viadeo-share%22%20data-display%3D%22btnlight%22%20data-count%3D%22right%22%20data-partner-id%3D%22nbxlIlizivhnwjEEIcdwDxbVsO%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%20%20%20%20%3C!--%20Pinterest%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22float%3A%20left%3B%20margin%3A%20-3px%2020px%200%200%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%2F%2Fwww.pinterest.com%2Fpin%2Fcreate%2Fbutton%2F%22%20data-pin-do%3D%22buttonBookmark%22%20%3E%3Cimg%20src%3D%22%2F%2Fassets.pinterest.com%2Fimages%2Fpidgets%2Fpinit_fg_en_rect_gray_20.png%22%20%2F%3E%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20style%3D%22clear%3A%20both%3B%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%3C%2Fdiv%3E%0A%3Cp%3E%0A"/]

Script des boutons à ajouter dans le footer de vos pages pour que cela fonctionne

[pastacode lang="markup" message="" highlight="" provider="manual" manual="%3C!--%20Facebook%20--%3E%0A%0A%3Cbr%20%2F%3E%0A%3Cdiv%20id%3D%22fb-root%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%253E(function(d%252C%2520s%252C%2520id)%2520%257B%250A%2520%2520var%2520js%252C%2520fjs%2520%253D%2520d.getElementsByTagName(s)%255B0%255D%253B%250A%2520%2520if%2520(d.getElementById(id))%2520return%253B%250A%2520%2520js%2520%253D%2520d.createElement(s)%253B%2520js.id%2520%253D%2520id%253B%250A%2520%2520js.src%2520%253D%2520%2522%252F%252Fconnect.facebook.net%252Ffr_FR%252Fall.js%2523xfbml%253D1%2526appId%253D264109993765077%2522%253B%250A%2520%2520fjs.parentNode.insertBefore(js%252C%2520fjs)%253B%250A%257D(document%252C%2520'script'%252C%2520'facebook-jssdk'))%253B%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20Twitter%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%253E!function(d%252Cs%252Cid)%257Bvar%2520js%252Cfjs%253Dd.getElementsByTagName(s)%255B0%255D%252Cp%253D%252F%255Ehttp%253A%252F.test(d.location)%253F'http'%253A'https'%253Bif(!d.getElementById(id))%257Bjs%253Dd.createElement(s)%253Bjs.id%253Did%253Bjs.src%253Dp%252B'%253A%252F%252Fplatform.twitter.com%252Fwidgets.js'%253Bfjs.parentNode.insertBefore(js%252Cfjs)%253B%257D%257D(document%252C%2520'script'%252C%2520'twitter-wjs')%253B%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20Google%2B%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253E%250A%2520%2520window.___gcfg%2520%253D%2520%257Blang%253A%2520'fr'%257D%253B%250A%250A%2520%2520(function()%2520%257B%250A%2520%2520%2520%2520var%2520po%2520%253D%2520document.createElement('script')%253B%2520po.type%2520%253D%2520'text%252Fjavascript'%253B%2520po.async%2520%253D%2520true%253B%250A%2520%2520%2520%2520po.src%2520%253D%2520'https%253A%252F%252Fapis.google.com%252Fjs%252Fplatform.js'%253B%250A%2520%2520%2520%2520var%2520s%2520%253D%2520document.getElementsByTagName('script')%255B0%255D%253B%2520s.parentNode.insertBefore(po%252C%2520s)%253B%250A%2520%2520%257D)()%253B%250A%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20Pinterest%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520type%253D%2522text%252Fjavascript%2522%2520async%2520src%253D%2522%252F%252Fassets.pinterest.com%252Fjs%252Fpinit.js%2522%253E%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20Scoop.it%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520type%253D%2522text%252Fjavascript%2522%2520src%253D%2522http%253A%252F%252Fwww.scoop.it%252Fbutton%252Fscit.js%2522%253E%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20LinkedIn%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520src%253D%2522%252F%252Fplatform.linkedin.com%252Fin.js%2522%2520type%253D%2522text%252Fjavascript%2522%253E%250A%2509lang%253A%2520fr_FR%250A%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A%0A%3C!--%20Viadeo%20--%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP%2F%2F%2FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7%22%20data-wp-preserve%3D%22%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253Evar%2520viadeoWidgetsJsUrl%2520%253D%2520document.location.protocol%252B%2522%252F%252Fwidgets.viadeo.com%2522%253B(function()%257Bvar%2520e%2520%253D%2520document.createElement('script')%253B%2520e.type%253D'text%252Fjavascript'%253B%2520e.async%2520%253D%2520true%253Be.src%2520%253D%2520viadeoWidgetsJsUrl%252B'%252Fjs%252Fviadeowidgets.js'%253B%2520var%2520s%2520%253D%2520document.getElementsByTagName('head')%255B0%255D%253B%2520s.appendChild(e)%253B%257D)()%253B%253C%252Fscript%253E%22%20data-mce-resize%3D%22false%22%20data-mce-placeholder%3D%221%22%20class%3D%22mce-object%22%20width%3D%2220%22%20height%3D%2220%22%20alt%3D%22%3Cscript%3E%22%20title%3D%22%3Cscript%3E%22%20%2F%3E%0A"/]

Procédure simplifiée avec WordPress

1) Téléchargez ce dossier ZIP

2) Décompressez le dossier

3) Déplacez les fichiers "social-share.php" et "social-scripts.php" dans votre dossier thème : /wp-contenu/themes/votretheme

4) Dans le fichier content-single.php ajoutez en dessous du titre et en bas de page :

[pastacode lang="markup" message="" highlight="" provider="manual" manual="%3C%3Fphp%20%2F%2F%20IDEWAN%20%3F%3E%0A%0A%09%3C%3Fphp%20include%20(%20get_stylesheet_directory()%20.%20%22%2Fsocial-share.php%22)%3B%20%3F%3E%0A%0A%3C%3Fphp%20%2F%2F%20IDEWAN%20%3F%3E"/]

5) Toujours dans le fichier content-single.php (ou dans footer.php) ajoutez en en bas de page :

[pastacode lang="markup" message="" highlight="" provider="manual" manual="%3C%3Fphp%20%2F%2F%20IDEWAN%20%3F%3E%0A%20%20%20%20%3C%3Fphp%20include%20(%20get_stylesheet_directory()%20.%20%22%2Fsocial-scripts.php%22)%3B%20%3F%3E%0A%3C%3Fphp%20%2F%2F%20IDEWAN%20%3F%3E"/]

Pas de panique...

A l'impossible, nul n'est tenu ! Si vous n'arrivez pas à suivre cette procédure (ou que vous ne comprenez absolument rien au code), vous pouvez toujours utiliser un module standard de partage sur les réseaux sociaux comme ShareThis !