Liens vers les réseaux sociaux

Déclarez vos réseaux sociaux et affichez-les sur le site public.

Ce plugin permet de déclarer les comptes des réseaux sociaux associés à votre site et d’en afficher facilement les liens sur le site public, pour que les internautes puissent les suivre.

Attention : il ne s’agit pas d’afficher des boutons de partage vers les réseaux sociaux — dans ce cas, utilisez plutôt Social tags — mais bien d’afficher les liens vers vos comptes.

Configuration

Une fois installé, vous pouvez renseigner les adresses des réseaux sociaux que vous souhaitez associer à votre site.

Pour l’instant le plugin gère les liens vers :

  • Facebook
  • Twitter
  • Instagram
  • Pinterest
  • Linkedin
  • Youtube
  • Blogger
  • RSS
  • Email

Le plugin propose une option pour habiller les liens avec un jeu d’icônes reposant sur la police de caractères Socicon.

Utilisation simple dans un squelette

Pour ajouter cette barre de liens à votre squelette, ajoutez le code suivant

  1. <INCLURE{fond=inclure/sociaux}>

Voici le rendu dans l’espace public (si on n’active pas l’option habillage) :

Voici le rendu dans l’espace public (si on active l’option habillage) :

Un modèle est aussi disponible pour les rédacteurs. Il suffit d’insérer le code <sociaux1> dans le texte de leurs articles.

Utilisation avec le plugin Menus

Si vous utilisez le plugin Menus, vous trouverez une nouvelle entrée “Lien vers un réseau social”.

Cela demande un peu plus de clics, mais présente aussi les intérêts suivants

  1. vous pouvez classer les icons dans l’ordre que vous voulez. En effet, le plugin Menu propose d’ordonner les items.
  2. vous pouvez ajouter un lien vers un réseau social dans une barre de menu.

Dans ce cas, nul besoin de modifier vos squelettes si vous avez déjà intégré les balises nécessaires au plugin Menus.

Exemple d'intégration dans une barre de navigation
Exemple d’intégration dans une barre de navigation

Il vous suffit alors de rentrer dans le champ Nom du réseau, le nom correspondant à vos souhaits.

Liste complète des réseaux sociaux (et autres) disponibles

Personnaliser l’habillage

La personnalisation se fait via CSS.

Si vous n’activez pas l’option d’habillage, le plugin fournit uniquement le marquage HTML grâce au squelette inclure/sociaux.html.

Si vous activez l’option habillage, le plugin charge une feuille de style basée sur la police Socicon dont les caractères reprennent les icônes des réseaux sociaux.

Vous pouvez facilement personnaliser graphiquement la barre (taille des icônes, couleurs, fonds…) en ajoutant votre propre feuille de style.

Exemple de rendus possibles:

Pour en savoir plus, consulter la documentation de la police Socicon

Utilisation pour les concepteurs de squelettes

En plus du modèle fourni, vous pouvez récupérer les liens par la syntaxe suivante:

  1. #CONFIG{sociaux/nom_site}

Par exemple:

[<a href="(#CONFIG{sociaux/facebook})">
  Aller sur notre page facebook
</a>]

Vous pouvez donc facilement créer une barre selon vos besoins.

Étendre le plugin

Le plugin est sur la zone, n’hésitez à l’étendre selon vos besoins.

Alternative

Le plugin rezosocios permet aussi de gérer les liens
http://zone.spip.org/trac/spip-zone/browser/_plugins_/rezosocios/trunk

updated on 2 October 2019

Discussion

2 discussions

  • 4

    Bonjour,
    Peut-on personnaliser les icônes depuis l’outil d’administration et en ajouter des nouveaux ?
    Merci.

    Reply to this message

  • 12

    Bonjour, lorsque j’indique les liens sociaux sur mon footer via la page de gestion du plugin, j’obtiens un rendu avec une petite flèche indiquant que le lien est externe... comme sur l’image adjointe... Est-ce qu’il y aurait un remède à cela ?
    Merci.

    • Essaie en ajoutant ceci dans tes CSS personnalisées :

      1. .sociaux a.external:after { content: none; }

      (Pour que ça n’arrive pas à d’autre, ce serait pas mal que ce soit mis par défaut dans les CSS du plug-in, voire en supprimant la classe external du squelette du plug-in.)

    • Merci 1138 !
      J’ai essayé ce bout de code... dans ma page perso.css
      Toujours pareil... J’ai beau vider le cache et réactualiser.

      Une autre idée ?
      Encore merci

    • Désolé, en fait ça fonctionne, il fallait du temps apparemment pour que le changement soit pris en compte !
      En espérant que cela serve pour d’autres dans le même cas que moi.
      Merci encore :)

    • Bonjour,
      Le fait d’avoir ajouté la classe spip_out en plus de la classe external dans la révision version 2.1.9 fait du coup réapparaître la petite flèche.
      Yann

    • Ajouter une classe spip_out pour ensuite ajouter 5 lignes css pour effacer l’affichage de la dist me semble un peu absurde.
      Mieux faut ne rien mettre du tout non ?

    • Salut,

      @yann45 : merci pour le retour.

      Étrange, chez moi, .sociaux a.external::after { content: none; } supprime la flèche. Tu as un lien ?

      @erational : La classe spip_out est la classe générique de SPIP qui permet de cibler les liens externes, il parait donc logique de l’ajouter dans tout lien externe, même issu d’un plugin. C’est par exemple cette classe qu’utilise Liens spip_out ouvrants pour fonctionner.

    • Bonjour,

      J’ai résolu le problème en retirant la classe spip_out dans le fichier sociaux.html donc je n’ai plus le souci, mais cela provient peut-être de la lame du couteau suisse “Spip et les liens externes”. Peut-être que ces 2 plugins se mordent la queue.

      Yann

    • Dans ce cas précis, il ne faut pas modifier (ou surcharger) les fichiers du plugin mais plutôt ajouter une règle à ta feuille de style si besoin, c’est plus pérenne.

      Je viens de faire la modif, dis moi si c’est bon (sinon, donne moi un lien que je regarde) : https://zone.spip.net/trac/spip-zone/changeset/115908/spip-zone

    • Bonjour,
      ça ne fonctionne pas. https://alls-judo.fr

      Yann

    • C’est lié à Escal on dirait (voir config.css.html), car depuis SPIP 3.1, la dist utilise bien a.spip_out::after et a.external::after pour ajouter la flèche (voir links.css) alors que ton thème a une image de fond.

      Essaye d’ajouter .sociaux a.spip_out { padding-right:0; background:none; } à ta css perso.

    • Super ! c’est nickel.

      Merci beaucoup.

      Yann

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom