Faciliter la diffusion des billets

Dans ce tutoriel, je montre comment je m'y prends pour insérer les boutons Facebook, Twitter, Pinterest et Google+ dans le teaser des billets de mon blog. Ces boutons (que j'ai trop négligés par le passé !...) permettent à vos visiteurs de diffuser très facilement le contenu de vos billets sur les principaux réseaux sociaux et, par conséquent, d'augmenter la visibilité de votre site. Vous devez faciliter au maximum la diffusion de votre contenu : c'est un excellent moyen d'augmenter l'audience de votre site.

Aperçu du résultat

En premier lieu, voici un aperçu de ce que vous obtiendrez en suivant ce tutoriel. Juste sous le titre d'un billet du blog, en regard du contenu du billet, s'étagent les 4 boutons de partage des principaux réseaux sociaux. Vous pouvez cependant n'en afficher que 2 ou 3, bien entendu. Gardez cependant à l'esprit que chacun a son "media" de prédilection et qu'il est préférable d'offrir un choix le plus large possible à votre lectorat.

Set de 4 boutons de partage
Set de 4 boutons de partage
Flèche vers le haut

Etape 1 : on écrit un nouveau billet

On commence par écrire un nouveau billet sur le blog :

En mode Admin, on clique sur l'icône Blog > Ecrire nouvel article
En mode Admin, on clique sur l'icône Blog > Ecrire nouvel article
Flèche vers le haut
On crée le nouvel article de blog et on lui donne un titre
On crée le nouvel article de blog et on lui donne un titre

Etape 2 : on ajoute un élément "colonnes"

Ensuite, on ajoute un élément "colonnes" dans le corps du billet :

Une fois le billet créé, on clique sur "Ajouter nouvel élément"
Une fois le billet créé, on clique sur "Ajouter nouvel élément"
On ajoute des colonnes
On ajoute des colonnes
Flèche vers le haut

Etape 3 : on insère les boutons de diffusion

Maintenant, on insère les boutons de diffusion. J'ai mis les 4 plus importants (du moment !), mais à vous de faire votre marché :

Le bouton "Pinterest"

Le bouton "Pint It" officiel comporte un compteur, mais il faut le fabriquer "à la main" pour chaque page du site car ce n'est pas un bouton dynamique. J'ai donc opté pour un autre code qui permet d'insérer un code qui s'actualise à chaque nouveau billet.

Dans la première colonne, on ajoute un Widget/HTML
Dans la première colonne, on ajoute un Widget/HTML

Dans le cadre de saisie, on copie-colle le code fourni par ce site :

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://sd-1.archive-host.com/membres/images/3347790973941088/pinit.png'/></a>

On n'oublie pas d'enregistrer en cliquant sur le bouton du même nom. Et voilà :

Le bouton Pinterest est en place.
Le bouton Pinterest est en place.
Flèche vers le haut

Le bouton "Google Plus"

Commencez par vous rendre sur le site de Google dédié aux développeurs & webmasters. Sur cette page, vous avez un générateur qui vous permet de produire le code du bouton +1. La manipulation est à faire une seule fois. Reproduisez ces réglages :

Ensuite, on fait la même manoeuvre que pour le bouton "Pinterest" :

Agrandissez l'image pour voir les réglages
Agrandissez l'image pour voir les réglages
On ajoute un élément "Widget/HTML"
On ajoute un élément "Widget/HTML"
On copie-colle le code fourni par le générateur de Google
On copie-colle le code fourni par le générateur de Google

N'oubliez pas d'enregistrer et voilà le bouton G+1 en place :

Le bouton +1 est installé.
Le bouton +1 est installé.
Flèche vers le haut

Le bouton "Twitter"

Attaquons-nous au bouton "Twitter". Nous voulons un bouton de partage, donc nous n'allons pas pouvoir utiliser l'élément "Twitter" de Jimdo : en effet, il installe un bouton "Follow" ("Suivre"). Utilisons donc un des générateurs fournis par Twitter. Sur la page, sélectionnez :

Puis, reproduisez ces réglages :

Vous pouvez renseigner votre pseudo au passage.
Vous pouvez renseigner votre pseudo au passage.
Récupérez le code fourni par Twitter.
Récupérez le code fourni par Twitter.
Ajoutez un nouvel élément "Widget / HTML"
Ajoutez un nouvel élément "Widget / HTML"
Collez le code "Twitter" dans le cadre de saisie.
Collez le code "Twitter" dans le cadre de saisie.

Quand vous cliquez sur le bouton "Enregistrer", le bouton apparaît :

Le bouton "Tweeter" est bien là.
Le bouton "Tweeter" est bien là.
Flèche vers le haut

Le bouton "Facebook"

Pour le coup, l'élément "Facebook" natif de Jimdo va nous servir. Sous les autres boutons, ajoutez un élément "Facebook" :

Ajoutez un élément "Facebook"
Ajoutez un élément "Facebook"
Pour harmoniser ce bouton aux autres, reproduisez ces réglages.
Pour harmoniser ce bouton aux autres, reproduisez ces réglages.

Cliquez sur "Enregistrer" pour appliquer vos choix et... tadam :

Notre 4e bouton de diffusion est en place
Notre 4e bouton de diffusion est en place
Flèche vers le haut

Etape 4 : on ajuste la taille des colonnes

Maintenant que les boutons sont en place, on peut redimensionner les colonnes. En effet, il ne faut pas que l'espace occupé par les boutons soit trop grand. On réduit donc la taille de la première colonne où ils se trouvent en utilisant la poignée centrale :

La première colonne fera entre 14 et 15% de large.
La première colonne fera entre 14 et 15% de large.
Flèche vers le haut

Etape 5 : on rédige l'accroche du billet

Il nous reste enfin à rédiger "l'accroche" du billet du blog dans la seconde colonne.

On clique sur "Ajouter un nouvel élément"
On clique sur "Ajouter un nouvel élément"
On ajoute un élément "texte"
On ajoute un élément "texte"

NB : les images qui suivent sont agrandissables.

Dans le cadre, on rédige le "chapeau" du billet.
Dans le cadre, on rédige le "chapeau" du billet.
On enregistre : le texte doit être à peu près équivalent en longueur à l'espace occupé par les boutons.
On enregistre : le texte doit être à peu près équivalent en longueur à l'espace occupé par les boutons.

Quand on clique sur le bouton "Enregistrer" pour valider l'ensemble, on obtient ceci :

Ensuite, on rédige le reste du billet en ajoutant un nouvel élément "Texte" sous les colonnes :

Flèche vers le haut

Cloner pour s'économiser

La bonne nouvelle, c'est que toutes ces manipulations ne sont à faire qu'une seule fois. Pour vos prochains billets, vous allez vous économiser en recourant à la fonction de Jimdo qui permet de dupliquer les éléments d'une page. "Clonez" donc votre bloc de deux colonnes. Vous n'aurez plus alors qu'à modifier le texte de la deuxième colonne.

On duplique le bloc "colonnes" et on modifie juste la deuxième colonne.
On duplique le bloc "colonnes" et on modifie juste la deuxième colonne.

Tout cela ne représente rien de très sorcier à mettre en place, mais offre de quoi nettement améliorer la visibilité de votre blog en donnant à vos lecteurs tous les outils nécessaires pour "spread the love around" ;)

Rien à déclarer ?

Écrire commentaire

Commentaires : 7
  • #1

    llefevre (vendredi, 31 août 2012 13:09)

    Tout simplement génial! Merci Realia!

  • #2

    Richoult (samedi, 05 janvier 2013 02:00)

    Salut Realia, j'ai remarquer qu'en faite, les chiffres ne définissait pas l'article en question, mais la page ou nous somme.
    C'est a dire, si nous voyons un extrait de l'article sur la page d'acceuil, les chiffres de partages sont pour la page d'acceuil et non pas pour l'article. :S

  • #3

    mab22 (samedi, 23 février 2013 16:50)

    Pour le bouton Tweeter, je n'ai pas réussi. Je n'arrive pas à avoir la fenêtre "Options des boutons"
    Mais pour Pin It, ça été très facile.
    Merci !

  • #4

    favoris (dimanche, 24 février 2013 13:07)

    @mab22 : les "Options des boutons" apparaissent automatiquement sous l'option "Choisir un bouton" quand on clique et sélectionne l'option "Partager un lien" sur cette page : https://twitter.com/about/resources/buttons#tweet (il faut être connecté sur Twitter peut-être ?)

    @Richoult : oui, je m'en suis aperçue aussi, mais ce qui m'importait était la possibilité de pouvoir diffuser (que ce soit le blllet en lui-même ou la page du blog où il se trouve)... L'idéal serait que les compteurs fonctionnent indépendamment, mais en attendant ;)

  • #5

    actionsucces (mardi, 12 mars 2013 18:20)

    Tout est vraiment super, Merci!
    Par contre comme je n'ai pas de compte sur twitter (il va falloir m'y mettre) j'ai garder le bouton de jimdo, car je n'ai pas su quoi mettre dans ' Utiliser l'URL de la page' ...

  • #6

    mathtice31 (vendredi, 12 juillet 2013 07:01)

    merci bcq

  • #7

    joellecm (jeudi, 05 décembre 2013 10:36)

    merci pour le bouton twitter car je ne comprenais pas, maintenant j'ai un bouton qui fonctionne!!

Ruban