Insérer des boutons de partage vers les réseaux sociaux dans WebAcappella Responsive !

Dans l’optique de se rapprocher toujours plus d’un véritable blog avec WebAcappella Responsive, voici comment insérer des Boutons de partage personnalisable dans WebAcappella Responsive.
Ce qui va suivre doit être réaliser pour chaque article que vous rédigerez, et ce, afin d’optimiser l’extrait qui sera partager par vos visiteurs.

Tout d’abord, voici un exemple de résultat final : Prévisualiser l’exemple

 

Etape 1 : Personnaliser les boutons

Téléchargez le dossiers iconrs et déposez le à la racine de votre serveur.

Les visuels des boutons de partage ne sont ni plus ni moins que des images. Vous pouvez donc créer vos propres images, en respectant les dimensions 32 x 32 pixels.

 

Etape 2 : Insérer le code des boutons de partage.

Voici le code que vous devez copier/coller dans un élément html sur votre page WebAcappella Responsive.

<center>
    <div>
<!-- Facebook -->
       <a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u=https://tontonduweb.com/previews-warc/genieCivil/article1.html" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><img src="plugins/iconrs/facebook_icon.png" alt="Facebook" /></a>
<!-- //Facebook -->

<!-- Twitter -->
        <a target="_blank" title="Twitter" href="https://twitter.com/share?url=https://bit.ly/2sI7H3v" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="plugins/iconrs/twitter_icon.png" alt="Twitter" /></a>
<!-- //Twitter -->

<!-- Google + -->
        <a target="_blank" title="Google +" href="https://plus.google.com/share?url=https://tontonduweb.com/previews-warc/genieCivil/article1.html" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="plugins/iconrs/gplus_icon.png" alt="Google Plus" /></a>
<!-- //Google + -->

<!-- Linkedin -->
        <a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://tontonduweb.com/previews-warc/genieCivil/article1.html" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="plugins/iconrs/linkedin_icon.png" alt="Linkedin" /></a>
<!-- //Linkedin -->

<!-- Email -->
        <a target="_blank" title="Envoyer par mail" href="mailto:?Subject=Regarde ça c'est cool !&amp;Body=regarde%20cet%20article%20c'est%20super !%20 https://tontonduweb.com/previews-warc/genieCivil/article1.html" rel="nofollow"><img src="plugins/iconrs/email_icon.png" alt="email" /></a>
<!-- //Email -->
    </div>
</center>

Pour chaque réseau social il vous faut changer l’url de la page à partager. Dans cet exemple l’url est https://tontonduweb.com/previews-warc/genieCivil/article1.html

Pour Twitter, une petite nuance s’impose. Comme Twitter n’accepte que 140 caractères, si vous en utilisez trop pour l’url à partager, cela laisse peut de place au texte du tweet. Nous allons donc utiliser Bitly.
Bitly vous permet de raccourcir l’url d’une page en créant un lien court

Sur la page d’accueil de Bitly, collez l’url de votre page et cliquez sur “shortten”. Copiez ensuite le lien court et collez le dans votre code html.
Dans cet exemple le code est : https://bit.ly/2sI7H3v

 

Étape 3 : Modifier les informations du partage par email.

Pour le partage par email, il y a quelques petites subtilités. Nous pouvons créer un sujet et un message prédéfini. Bien sûr le visiteur pourra toujours le modifier.
Dans notre exemple le sujet est Regarde ça c’est cool ! et le message prédéfini est : regarde cet article c’est super !

Vous remarquerez des symboles un peu bizarres entre chaque mot, c’est normal, il faut absolument que chaque mot soit séparé par %20

 

Étape 4 : L’image mise en avant

Lorsque vous partager un article via Facebook, celui ci affiche une image. C’est l’image “mise en avant” de l’article. Avec WebAcappella Responsive, l’image que vous aurez mis sur votre page sera détectée et apparaitra dans le post de partage. Pour optimiser cela, il vous faudra tout de même bien renseigner l’info bulle de l’image avec le même texte que le titre de la page.

Il se peut que cela fonctionne également pour Google + et Linkedin mais rien n’est garanti. Alors si ça ne marche pas, ne boude pas Régis 😉

Concernant le titre de la page, un tutoriel sur le SEO est disponible juste ici

 

Si vous paramétrez correctement les boutons de partage, et que vous bénéficiez de beaucoup de partage de la part de vos visiteurs, cela favorisera grandement votre référencement sur le web. Pour quelques minutes d’installation, ce serai dommage de s’en priver.

Voilà les neveux, n’hésitez pas à laisser vos commentaires et à partager ce tutoriel sur les réseaux sociaux 😉