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
  • ...

Pour connaitre la liste complète des réseaux
https://git.spip.net/spip-contrib-extensions/sociaux/src/branch/master/sociaux_pipelines.php#L35

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

<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 ».

Vous pouvez alors :

  1. ordonner les icônes depuis le menu de configuration d’un Menu
  2. ajouter un lien social dans une barre de menu.

Dans ce dernier 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

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 :

#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

Discussion

12 discussions

  • 1
    Jean-Christophe Sekinger

    bonjour
    ma question est sans doute sottissime mais voilà : quelles sont les adresses de partage à indiquer ? je ne comprends pas. je voudrais au moins permettre le partage par courriel, sur fb et sur twitter (x)
    … et diasporaj* surtout ! mais il n’est pas dans la liste.
    merci de votre aide

    Jean-Christophe

    • Bonjour,
      Comme indiqué en haut :

      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.

      La question revient souvent.

    Répondre à ce message

  • APSAD93

    Bonjour, est il prévu une montée de version pour la compatibilité avec SPIP 4.1 ? merci

    Répondre à ce message

  • 1

    désolé de poser la question ici, mais je cherche de l’info sur le plugin reseauxsociaux... pour savoir si c’est une alternative à socialtags, mais reseauxsociaux n’est pas documenté et je ne le trouve pas dans contrib...
    comme il est cité dans cette page... je me permets de poser la question !

    bon confinement à tous
    pam

    Répondre à ce message

  • 4

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

    Répondre à ce 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 :

      .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

    Répondre à ce message

  • 1
    Jaseur Boréal

    Bonjour,

    C’est sympa d’avoir ajouté les dits-réseaux sociaux phoniques
    21 viber
    22 whatsapp
    23 skype

    Dans la liste des réseaux téléphoniques il y a Linphone sip sécurisé & GNU qui pourrait aussi être ajouté comme réseau social vidéo-phonique français très pratique et sécurisé :

    Linphone.org lancé en 2001, héberge un service SIP gratuit permettant aux utilisateurs de passer des appels audio et vidéo IP. C’était la toute première application open source utilisant le logiciel SIP distribué sous Licence Publique Générale GNU / Linux. Linphone est porté sur les principales plateformes de bureau, mobiles et web sous Windows, iOS, Android, Windows Phone, Blackberry, Linux.

    Ce serait super.
    Merci

    • Bonjour,

      Nous utilisons une librairie d’icônes dans ce plugin : Socicon. De ce fait, nous n’avons pas la main « directe » sur les icônes ajoutées.

      Toutefois, depuis le site, il est possible de demander l’ajout d’une icône par email (qui est indiqué sur ledit site de la librairie). C’est ce qui a été fait par erational pour que SPIP puisse figurer parmi les logos.

      Amicalement,

    Répondre à ce message

  • j’ai fait un modèle avec affichage vertical ( dans squelettes/modele) à partir du modèle donné dans le plugin.
    si j’insere le modele dans l’espace privé, je vais dans la partie visualisation ( petits carrés apres voir) c’est ok .
    par contre si j’enregistre et que je reviens dans la page « modifier cet article » ... je vois les icones en vertical dans l’espace prive, hors du contenu de l’article, sans css socicon.
    est-ce parce que j’ai mis le modèle dans squelettes ?

    Dans l’espace public c’est nikel .... c’est le principal

    Répondre à ce message

  • 2

    Bonjour,
    Lorsque j’utilise ce plugins avec Spip, il affiche une photo qui n’a rien à voir avec l’article.
    S’agit-il d’un bug ou y a t’il une logique que je n’ai pas saisie

    Voir les deux documents joints.
    Y a t’il un moyen de choisir la photo ou de ne pas prendre de photo tout simplement.

    Je suis sous spip 3.2.0 et Escal V3 4.0.22

    • Bonjour,

      Je crois que tu t’es trompé de forum :-D. Le plugin que tu utilises sur ton site est le plugin Socialtags et non « Liens vers les réseaux sociaux ».

      Toutefois, voici une piste pour régler ton souci de partage Facebook (et autres). Ton site n’utilise pas les tags open graph. Pour y remédier, tu peux utiliser le plugin Métas +. Je t’invite à lire la documentation de ce plugin.

      Amicalement,

    • Merci,
      Désolé de la méprise.

      André

    Répondre à ce message

  • 2

    Bonjour,
    Serait-il envisageable que les liens de type e-mail soient automatiquement préfixés par le protocole mailto: ? Idéalement si et seulement si le paramètre saisi ne précise pas encore ce protocole.
    Merci d’avance

    • Bonne idée !
      C’est ajouté au modèle fourni par le plugin (version 2.1.3)
      Spipement :)

    • Super, merci beaucoup ! Quelle réactivité, c’est impressionnant !

    Répondre à ce message

  • Bonjour,
    bravo pour ce plugin qui pourrait être natif dans Spip ! si, si.

    comment renseigner la balise « title » du lien ?
    Pour avoir au survol :
    « Découvrez notre page FB » ou G+ ....

    Cordialement, Alain

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom