Insérer des boutons "réseaux sociaux" dans Jimdo

Jimdo propose plusieurs sortes de boutons "réseaux sociaux". Pourtant, aucune de ces options ne me convenait. Je vous propose donc de voir comment insérer un "simple" set de boutons ouvrant vos pages et profils sur les différents réseaux.

Ne pas confondre "lien" et "partage"

Tous les boutons Facebook ne se valent pas, loin de là ! Dans mon article "Share, like, follow,... quel bouton mettre sur son site", j'explique la différence entre les boutons de partage et ceux qui permettent de suivre votre page ou votre compte.

L'outil de partage de Jimdo

Jimdo propose en standard dans ses éléments un outil pour "partager" des pages ou (plus logiquement) des articles de blog. Il faut, en bas de chaque article, insérer un élément "partager" et sélectionner les réseaux que l'on souhaite mettre en avant. A noter que Zekoolweb a développé pour Jimdo un bouton de partage flottant assez sympa (il faut lui demander le code).

Elément "partage" dans Jimdo
Elément "partage" dans Jimdo
Boutons de partage dans Jimdo
Boutons de partage dans Jimdo

Mais ce qui m'intéresse, moi, c'est d'attirer de nouveaux fans / followers vers mes comptes d'entreprise sur Facebook, Twitter, Google+, LinkedIn, Pinterest, Instagram, etc. Les boutons de partage ne permettent pas cela.

Les modules "réseaux sociaux" standards de Jimdo

Jimdo propose des boutons "Twitter", "Facebook" et même "Google +" qui permettent de s'abonner à vos pages et comptes. Mais quand on les a tous installés sur une page du site (ou, de préférence, dans la colonne latérale), avouez que le résultat n'est pas très esthétique...

Je préfèrerais de loin présenter mes réseaux sous forme de petites icônes cliquables. Mais malheureusement, cette option n'existe pas dans Jimdo, il va falloir un peu de travail pour la paramétrer manuellement.

Télécharger des boutons identiques

Avec une recherche sur "free social media icons", vous pouvez télécharger un kit d'icônes libres de droits, toutes identiques en taille et en style.


Vous trouverez également des icônes de chaque réseau social sur le site iconmonstr, avec l'avantage supplémentaire de pouvoir en personnaliser la couleur (choisir le format PNG).

Insérer les icônes dans un tableau

Sur ce site, j'ai aligné les icônes au moyen d'un élément "colonne" de Jimdo.

  • créer des colonnes (dans votre page ou votre colonne Jimdo) avec autant de colonnes que d'icônes (de réseaux) souhaités
    dans chaque colonne, insérer une image (une icône)
  • derrière chaque petite image, insérer un lien vers :
    • votre page Facebook (pensez à simplifier son URL en allant sur www.facebook.com/username)
    • votre compte Twitter (exemple : http://twitter.com/amaranthe, pas de www)
    • votre page Google+ (très looooong URL avec plein de chiffres)
    • votre page ou votre profil sur LinkedIn (lien racourci sous votre photo dans Profil > Voir le profil)
  • redimensionner les colonnes du tableau pour qu'elles soient de largeur identique.

Inconvénients de cette formule :

  • l'insertion des liens est rendue complexe par la faible largeur disponible. Cela demande donc pas mal de concentration
  • on ne peux pas insérer un élément colonne dans une autre colonne
  • les colonnes de Jimdo ne peuvent pas faire moins de 12 pixels, ce qui crée un espacement minimum entre les icônes.

Utiliser l'élément "texte + image"

Avec l'élément "texte + image" de Jimdo, on peut aligner au plus près l'icône du réseau et son descriptif. Pensez à mettre le même lien derrière l'icône et derrière le texte !

 

Cette présentation est idéale sur votre page "Contact", et peut aussi s'intégrer dans votre "footer", au sein d'un élément colonne, ou dans une colonne latérale (selon le design choisi).


Utiliser le code HTML des images (usage avancé de Jimdo)

Sur son site, Julie du Chemin a inséré les icônes de ses réseaux sociaux sur sa page "contact". Elle a ensuite récupéré le code HTML des images pour l'insérer dans un élément HTML. Attention, il ne faut pas enlever les icônes "de base" pour que ce système fonctionne (on peut éventuellement les placer dans une page cachée).

  • Insérer les icônes dans un élément image de Jimdo (dans la page contact ou dans une page cachée)
  • Passer en mode "affichage visiteur" (le mieux est de se déconnecter)
  • Clic droit pour connaître l'adresse de chaque image (qui ressemble à https://image.jimcdn.com/.../image.png">
  • Dans un éditeur de texte externe (genre bloc-note ou textedit), coller le code de chaque image
  • Remplacer le code en rouge ci-dessous par le code des images
  • Remplacer le code en vert par l'adresse de votre page Facebook, compte Twitter, etc.
  • Répéter l'opération pour chacun de vos réseaux en séparant les blocs de code par    (deux espaces blancs)
  • Revenir en mode éditeur, ajouter un élément HTML et y coller l'entièreté du code.
  • Enregistrer et tester les liens.

<a target="_blank" href="https://www.facebook.com/adresse_de_votre_page_facebook"><img src="https://image.jimcdn.com/.../image.png"></a>&nbsp;&nbsp;

<a target="_blank" href="https://twitter.com/votre_compte_twitter"><img src="https://image.jimcdn.com/.../image.png"></a>

Réutiliser les icônes ailleurs dans le site

Une fonction peu connue de Jimdo va vous faire gagner un temps précieux pour copier / coller l'ensemble des icônes dans d'autres pages :

  1. Dupliquer la zone contenant le tableau (icône juste au-dessus du bouton + sur le côté gauche de votre écran)
  2. Enregistrer le deuxième tableau
  3. Glisser le tableau dans le coin supérieur droit de votre écran. Jimdo le conservera en mémoire. 
  4. Vous pouvez maintenant ouvrir une autre page et y "ramener" le tableau.

Pratique, non ?

Partagez cet article !

Cet article vous a été utile ? N'hésitez pas à le partager !