{"id":1223,"date":"2016-08-02T14:51:31","date_gmt":"2016-08-02T12:51:31","guid":{"rendered":"http:\/\/members.loria.fr\/infodoc\/?page_id=1223"},"modified":"2016-08-05T10:28:33","modified_gmt":"2016-08-05T08:28:33","slug":"liens-icones-vers-les-reseaux-sociaux","status":"publish","type":"page","link":"https:\/\/members.loria.fr\/infodoc\/liens-icones-vers-les-reseaux-sociaux\/","title":{"rendered":"Liens (icones) vers les r\u00e9seaux sociaux"},"content":{"rendered":"<h3><a name=\"1\"><\/a>Introduction<\/h3>\n<p>Vous avez sans doute ouvert des comptes sur diverses applications de \u00ab\u00a0r\u00e9seaux sociaux\u00a0\u00bb : LinkedIn, FaceBook, Google+,&#8230;<br \/>\net vous aimeriez pouvoir faire apparaitre simplement, sans avoir \u00e0 construire une \u00ab\u00a0barre d&rsquo;icones\u00a0\u00bb (comme nous l&rsquo;avons fait avec Text-Blocks pour la barre de logos de nos tutelles du bas de page) tous les liens vers ces diff\u00e9rents sites.<\/p>\n<p>Le th\u00e8me Sparkling, choisi pour notre mod\u00e8le de site, poss\u00e8de d\u00e9j\u00e0 cette fonctionnalit\u00e9, qu&rsquo;il suffit d&rsquo;activer et de configurer.<\/p>\n<p>Vous pouvez faire apparaitre votre barre d&rsquo;icones dans 2 slots du th\u00e8me :<\/p>\n<ul>\n<li>dans un slot de type \u00ab\u00a0Menu\u00a0\u00bb (Social Menu), au-dessus du Menus Bas actuel\n<div class=\"encadre\"><img decoding=\"async\" src=\"http:\/\/homepages.loria.fr\/infodoc\/img\/tutoriel\/social-menu-3b.png\" alt=\"Social Menu\" \/><\/div>\n<\/li>\n<li>ou dans un slot de type Widget (le widget Sparkling R\u00e9seaux Sociaux)\n<div class=\"encadre\"><img decoding=\"async\" src=\"http:\/\/homepages.loria.fr\/infodoc\/img\/tutoriel\/social-menu-2.png\" alt=\"Social Menu\" \/><\/div>\n<\/li>\n<\/ul>\n<p>Les icones standards des diff\u00e9rents m\u00e9dias sociaux seront automatiqurment charg\u00e9es en fonction de la <i>valeur du lien<\/i> que vous donnerez \u00e0 l&rsquo;\u00e9l\u00e9ment :<\/p>\n<p>facebook.com : <img decoding=\"async\" src=\"\/infodoc\/files\/img\/tutoriel\/social-menu-facebook.png\" alt=\"FaceBook\" \/> &#8211; twitter.com : <img decoding=\"async\" src=\"\/infodoc\/files\/img\/tutoriel\/social-menu-twitter.png\" alt=\"Twitter\" \/> &#8211; linkedin.com : <img decoding=\"async\" src=\"\/infodoc\/files\/img\/tutoriel\/social-menu-linkedin.png\" alt=\"LinkedIn\" \/> &#8211; github.com : <img decoding=\"async\" src=\"\/infodoc\/files\/img\/tutoriel\/social-menu-github.png\" alt=\"GitHub\" \/> &#8211; plus.google.com : <img decoding=\"async\" src=\"\/infodoc\/files\/img\/tutoriel\/social-menu-google+.png\" alt=\"Google+\" \/> &#8211; &#8230;<\/p>\n<p>Si vous mettez \u00ab\u00a0facebook.fr\u00a0\u00bb, l&rsquo;icone ne sera pas trouv\u00e9e&#8230;<\/p>\n<p><b>Attention :<\/b> c&rsquo;est simple <u>si on fait toutes les op\u00e9rations dans le bon ordre<\/u> ! Alors suivez bien la doc&#8230;<\/p>\n<h3><a name=\"2\"><\/a>Le Social Menu<\/h3>\n<ul>\n<li>dans votre Tableau de Bord, allez sur la page de gestion des menus : Apparence &gt; Menus, onglet Modifier les menus<\/li>\n<li>dans le premier cadre, cliquez sur \u00ab\u00a0cr\u00e9ez un nouveau menu\u00a0\u00bb<\/li>\n<li>dans le bloc de droite, nommez le menu : Social, et cliquez \u00ab\u00a0Cr\u00e9er le menu\u00a0\u00bb<\/li>\n<li>2 nouvelles rubriques \u00e0 compl\u00e9ter apparaissent :\n<ul>\n<li>Structure du menu : va vous permettre d&rsquo;ajouter les diff\u00e9rents \u00e9l\u00e9ments de la barre d&rsquo;icone (voir plus bas)<\/li>\n<li>R\u00e9glages du menu : dans le th\u00e8me Sparkling, nous avions 3 slots pour des menus. Le menu principal (la barre du haut) et les liens de bas de page sont d\u00e9j\u00e0 occup\u00e9s par 2 menus que nous vous avions pr\u00e9d\u00e9finis. Il reste donc le slot \u00ab\u00a0Social Menu\u00a0\u00bb qu&rsquo;il suffit de cocher pour qu&rsquo;il accueille notre nouveau menu \u00ab\u00a0Social\u00a0\u00bb.<\/li>\n<\/ul>\n<\/li>\n<li>Passons maintenant \u00e0 la construction du menu :<\/li>\n<li>Comme nous l&rsquo;avons vu pour la <a href=\"\/infodoc\/tutoriel\/lecon2\/#4\">construction du Menu Principal<\/a>, le bloc de gauche de la page Menus, onglet Modifier les menus, contient tous les objets disponibles pour \u00eatre ajout\u00e9s dans un menu : les Pages, les Articles, les Liens personalis\u00e9s et les Cat\u00e9gories.<\/li>\n<li>Nous voulons cr\u00e9er une barre d&rsquo;icones qui vont pointer les liens externes vers nos sites de r\u00e9seaux sociaux, notre menu va donc contenir des objets de type <b>Liens personnalis\u00e9s<\/b><\/li>\n<li>La feuille de style par d\u00e9faut d\u00e9finit d\u00e9j\u00e0 les bonnes icones de la plupart des r\u00e9seaux sociaux courants : Twitter, FaceBook,&#8230; en se basant sur l&rsquo;URL du lien. Il suffira donc de les d\u00e9signer par le bon <i>Lien<\/i> pour que le mapping se fasse (voir en fin de page comment traiter les cas moins courants&#8230;)<\/li>\n<li>Nous allons donc commencer par mettre 3 liens dans notre menu. Pour chacun, d\u00e9roulez le bloc <b>Liens personnalis\u00e9s<\/b>, compl\u00e9tez par vos donn\u00e9es personnelles, et cliquez <b>Ajouter au menu<\/b> :\n<ul>\n<li><b>Twitter<\/b> :<\/li>\n<li><i>Texte du lien<\/i> : Twitter<\/li>\n<li><i>Adresse web<\/i> : https:\/\/twitter.com\/Loria_Nancy<br \/>\n(ou mon_identiant_Twitter)\n<\/li>\n<\/ul>\n<ul>\n<li><b>LinkedIn<\/b> :<\/li>\n<li><i>Texte du lien<\/i> : LinkedIn<\/li>\n<li><i>Adresse web<\/i> : https:\/\/www.linkedin.com\/in\/mon_identiant_LinkedIn<\/li>\n<\/ul>\n<ul>\n<li><b>GitHub<\/b> :<\/li>\n<li><i>Texte du lien<\/i> : GitHub<\/li>\n<li><i>Adresse web<\/i> : https:\/\/github.com\/mon_identiant_GitHub<\/li>\n<\/ul>\n<\/li>\n<li>Une fois les 3 \u00e9l\u00e9ments ajout\u00e9s, enregistrez le menu.<\/li>\n<\/ul>\n<p>Vous pensez qu&rsquo;\u00e0 ce stade il suffit de cliquer sur <i>Voir le site<\/i> pour voir apparaitre votre nouvelle barre d&rsquo;icones de r\u00e9seaux sociaux ? Eh bien non, la barre est en fait invisible car les couleurs de nos icones n&rsquo;ont pas \u00e9t\u00e9 d\u00e9finies&#8230;<\/p>\n<p>Voici donc la manip \u00e0 ne pas oublier :<\/p>\n<ul>\n<li>Allez dans <i>Apparence<\/i> &gt; <i>Personnaliser<\/i><\/li>\n<li>Cliquez sur <i>Sparkling options<\/i><\/li>\n<li>Cliquez sur <i>Social<\/i><\/li>\n<li>Choisissez la couleur noire pour les icones de r\u00e9seaux sociaux (et ceux de bas de page)<\/li>\n<li>Cochez la case <i>Ic\u00f4nes de r\u00e9seaux sociaux de bas de page<\/i><\/li>\n<li>Cliquez <b>Enregistrer &amp; publier<\/b><\/li>\n<\/ul>\n<p>Fermez le menu de personnalisation, et cliquez sur <b>Aller sur le site<\/b><br \/>\nCa y est : notre barre d&rsquo;icones est visible juste au dessus du menu de bas de page !<\/p>\n<h3><a name=\"3\"><\/a>le widget Sparkling R\u00e9seaux sociaux<\/h3>\n<p>Dans Apparence &gt; Widgets, vous trouverez \u00e9galement dans la liste des widgets disponibles et que vous pouvez ajouter par exemple \u00e0 votre barre lat\u00e9rale, un widget nomm\u00e9 <b>Widget Sparkling R\u00e9seaux sociaux<\/b>.<br \/>\n<b>Attention : <\/b>la barre d&rsquo;icones utilis\u00e9e par ce widget est celle g\u00e9n\u00e9r\u00e9e ci-dessus pour le Social Menu. Il n&rsquo;est donc pas possible d&rsquo;avoir 2 barres diff\u00e9rentes.<\/p>\n<p>Pour activer le widget dans la barre lat\u00e9rale, saisissez le simplement et faites le glisser \u00e0 la position souhait\u00e9e sous <b>Barre lat\u00e9rale<\/b>. La seule option disponible est le titre (que vous pouvez laisser vide). Cliquez sur <b>Enregistrer<\/b> et v\u00e9rifiez que votre barre d&rsquo;icones sociaux apparait sur les pages comportant une barre lat\u00e9rale.<\/p>\n<h3><a name=\"4\"><\/a>ajouter un r\u00e9seau social inconnu par d\u00e9faut<\/h3>\n<p>Dans les exemples cit\u00e9s ci-dessus, l&rsquo;icone du r\u00e9seau \u00e9tait affich\u00e9e automatiquent car un certain nombre de classes de style qui mappent le <i>lien associ\u00e9<\/i> sont d\u00e9finies par d\u00e9faut.<br \/>\nVoir <a href=\"\/infodoc\/css-reseaux-sociaux-par-defaut\/\">toutes les d\u00e9finitions enregistr\u00e9es dans la feuille de style commune<\/a>.<\/p>\n<p>Lorsque vous voulez ajouter un lien moins courant, vous devez cr\u00e9er vous-m\u00eame la classe de style correspondante (voir cette <a href=\"https:\/\/colorlib.com\/wp\/forums\/topic\/social-icons-for-researchgate-and-academia-edu\/\">discussion sur le forum du th\u00e8me<\/a>.<\/p>\n<p>Voici un exemple en d\u00e9tail :<\/p>\n<ul>\n<li>Vous voulez ajouter dans votre barre d&rsquo;icones la r\u00e9f\u00e9rence \u00e0 votre compte sur academia.com<\/li>\n<li>Proc\u00e9dez d&rsquo;abord comme vu plus haut pour rajouter cette r\u00e9f\u00e9rence \u00e0 votre Menu Social :\n<ul>\n<li><b>Academia<\/b> :<\/li>\n<li><i>Texte du lien<\/i> : Academia<\/li>\n<li><i>Adresse web<\/i> : https:\/\/academia.com\/mon_identiant_Academia<\/li>\n<\/ul>\n<\/li>\n<li>Si vous visualisez votre barre d&rsquo;icone \u00e0 ce stade, vous ne verrez qu&rsquo;une icone noire et vide.<\/li>\n<li>Pour ajouter une d\u00e9finition de style consistante avec les icones que nous avons d\u00e9j\u00e0 par d\u00e9faut, il va falloir choisir une icone de la collection <a href=\"http:\/\/fontawesome.io\/icons\/\">Font Awesome<\/a> (par exemple l&rsquo;icone <i>fa-graduation-cap<\/i> me va bien pour cet usage -> cliquez sur l&rsquo;icone pour voir les propri\u00e9t\u00e9s de ce caract\u00e8re de police vectorielle), et rajouter cette d\u00e9finition \u00e0 votre feuille de style personnelle. Pour cela, suivez ces instructions :\n<ul>\n<li>dans le tableau de bord WordPress, aller dans <b>Apparence<\/b> > <b>Personnaliser<\/b><\/li>\n<li>cliquer sur <b>Sparkling Options<\/b><\/li>\n<li>cliquer sur <b>Autres<\/b><\/li>\n<li>le petit cadre qui apparait sous <i>CSS suppl\u00e9mentaires<\/i> permet la saisie de d\u00e9finitions personnalis\u00e9es qui surchagent la CSS globale.<\/li>\n<li>collez-y les 2 lignes suivantes :\n<pre>\r\n#menu-social li a[href*=\"academia.com\"]:hover {background-color: #81b71a !important;}\r\n#menu-social li a[href*=\"academia.com\"] .fa:before{content:\"\\f19d\"}\r\n<\/pre>\n<\/li>\n<li><b>Remarque 1 :<\/b> <i>f19d<\/i> est l&rsquo;Unicode correspondant au caract\u00e8re fa-graduation-cap dans la police Font Awesome.<\/li>\n<li><b>Remarque 2 :<\/b> la premi\u00e8re r\u00e8gle correspond \u00e0 la couleur de contraste lorsque vous passez le pointeur de la souris au-dessus de l&rsquo;icone. \u00c9vitez une couleur trop claire car le caract\u00e8re est blanc par d\u00e9faut, ou pensez \u00e0 inverser les couleurs dans la m\u00eame r\u00e8gle.<br \/>\nLa seconde r\u00e8gle s\u00e9lectionne le caract\u00e8re Font Awesome dont l&rsquo;Unicode est donn\u00e9 via \u00ab\u00a0content\u00a0\u00bb.<\/li>\n<li>enregistrez et voyez le r\u00e9sultat !<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><a name=\"1\"><\/a>Introduction<\/p>\n<p>Vous avez sans doute ouvert des comptes sur diverses applications de \u00ab\u00a0r\u00e9seaux sociaux\u00a0\u00bb : LinkedIn, FaceBook, Google+,&#8230;<br \/>\net vous aimeriez pouvoir faire apparaitre simplement, sans avoir \u00e0 construire une \u00ab\u00a0barre d&rsquo;icones\u00a0\u00bb (comme nous l&rsquo;avons fait avec Text-Blocks pour la barre de logos de nos tutelles du bas de page) tous les liens vers ces diff\u00e9rents sites.<\/p>\n<p>Le th\u00e8me Sparkling, choisi pour notre mod\u00e8le de site, poss\u00e8de d\u00e9j\u00e0 cette fonctionnalit\u00e9, qu&rsquo;il suffit d&rsquo;activer et de configurer.<\/p>\n<p>Vous pouvez faire apparaitre votre barre d&rsquo;icones dans 2 slots du th\u00e8me :<\/p>\n<ul>\n<li>dans un slot de type \u00ab\u00a0Menu\u00a0\u00bb (Social Menu),<\/li>\n<\/ul>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-1223","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/comments?post=1223"}],"version-history":[{"count":26,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1223\/revisions"}],"predecessor-version":[{"id":1260,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1223\/revisions\/1260"}],"wp:attachment":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/media?parent=1223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}