Mettre en évidence liens réseaux sociaux

**Nullette** · 17 Décembre 2011

Bonjour / bonsoir,

pour faire comme tout le monde, je voudrais mettre en évidence deux ou trois liens vers des liens sociaux avec leur icône.

Sur la page html j'ai mis les codes (javascript), à l'intérieur d'une DIV.

Dans la feuille de style j'ai créé :

#socialButtons {
		float:left;
		padding : 6px 0 6px 0;
text-align : center;
background-color : #ccc;
border-top : 1px solid #666666;
		}

Les deux icônes s'affichent bien, la page est valide pour W3C, mais ce n'est pas en évidence. La couleur du background ne s'affiche pas, ni le border-top et, je crois que je devrais ajouter un margin.

Que me conseillez-vous ?

liens_geeks · 18 Décembre 2011

Salut,

Regarde avec firebig ou l'extension 'web developper' le code generé par le javascript, tu comprendras surement

Ciao

Jérôme

Nicolas · 18 Décembre 2011

C'est firebug :-)

**Nullette** · 18 Décembre 2011

Quel est le rapport avec le code javascript et l'affichage des liens+icônes ?

Mon problème est d'afficher deux ou trois liens avec leurs icônes (Facebook, Twitter, Google+) sur une même ligne horizontale.

Je me perd dans l'utilisation de "inline", float left ou right, etc. dans la feuille de style.

Concernant la "mise en évidence", j'avais voulu mettre un fond coloré et une bordure. Ceci ne s'affichait pas car je m'était trompée dans la page html.

Au lieu de mettre

<div id="socialButtons">

j'avais mis

<div class="socialButtons">

Edit

Au final, j'ai juste mis :

#socialButtons {
padding : 6px;
text-align : center;
		}

et ça s'aligne bien.

**Nullette** · 18 Décembre 2011

Par contre avec trois liens, ce n'est plus correctement aligné.

Entre les deux premiers scripts et le troisième il y a une ligne a href

Si quelqu'un savait m'indiquer comment régler ce petit problème, probablement en ajoutant quelque chose dans la feuille de style.

Au bas de la page

Kulgar · 19 Décembre 2011

Ah ouais, je connais ce soucis des liens réseaux sociaux... Le problème est que le code JavaScript fournit par LinkedIn / Facebook / Twitter, génère également de la mise en forme pour les balises nécessaires à leurs petits boutons. C'est d'ailleurs ULTRA chiant pour ceux qui veulent personnaliser ces boutons, car il faut bien le dire leur code HTML/CSS généré est vraiment moisi, je ne vois pas trop l'intérêt de toutes ces balises qui pour la plupart, ne sont même pas nécessaires (à première vue).

Alors, pour résoudre ce soucis de positionnement, j'ai placé chaque bouton dans son propre <div>, le div ayant une classe ou un ID (id est toujours préférable si possible ). J'ai donc 3 divs différents contenant chacun 1 bouton.

Je joue ensuite sur le CSS de ces 3 divs pour aligner les boutons. Notamment, tu as besoin de "display: inline" sur ces Divs pour qu'ils soient alignés . C'est encore plus simple s'ils sont tous les 3 placés dans un div les contenant. Mais... Comme trop de divs tuent les divs, à toi de voir si c'est vraiment nécessaire.

Ensuite, j'externalise également le CSS que je peux... Ceci afin d'avoir un code HTML aussi épuré que possible tout en ayant un code CSS centralisé, toujours plus simple pour y voir plus clair et donc pour écrire les règles de mises en forme adéquate.

Par exemple, l'iframe de Facebook est livré avec du CSS intégré dans l'attribut "style" de la balise "iframe". C'est moisi... et pas vraiment valide W3C. Je te conseille donc de l'externaliser en récupérant la classe : ".fb_ltr".

Dans cette classe tu y mets tout ce qu'il y a déjà dans la balise iframe (en oubliant pas de le supprimer de la balise) :


border: medium none; 
overflow: hidden; 
height: 20px; 
width: 200px; 
margin-bottom: 3px;

Tu remarqueras que j'ai rajouté un petit "margin-bottom". Cette valeur permet d'aligner parfaitement le bouton Facebook avec les autres boutons.

En espérant que tout cela saura t'aider.

Je reste "à l'écoute" si jamais tu as encore des soucis.

Kulgar.

**captain_torche** · 19 Décembre 2011

Dans ton optique Kulgar, pourquoi ne pas mettre ces liens dans une liste ? On peut considérer qu'il s'agit d'une liste de liens, à mon sens.

**Nullette** · 19 Décembre 2011

Merci Kulgar,

tu expliques très bien et je vais imprimer ton post.

Hier soir, j'avais presque réussi à obtenir un bon alignement , mais en fait avec le navigateur Opera c'était l'horreur.

Je m'emmêle complètement dans les float, display:online.

Pour Fb j'ai modifié le code data-width en 200 au lieu de 450, car s'il s'agit de pixels, c'est normal que le lien se positionnait au-dessous des autres.

Actuellement, j'ai créé une classe "encart" :

.encart {
width:auto;
border : 1px solid #cccccc;
padding : 5px;
margin : 5px;
}

et les trois liens sont à l'intérieur de <div class="encart">

Je ne l'ai mis que sur quelques pages, en espérant ne pas avoir fait de bêtise. Cependant sur ma page d'accueil, où il y a moins d'espace, les trois liens s'affichent sur deux lignes.

A propos des DIV, difficile de les réduire, Fb en rajoute !

Dans le code Fb je n'ai pas d'iframe. J'ai un code (script) à mettre juste après "body" et le lien à l'endroit où on veut placer l'icône. !?

**Nullette** · 19 Décembre 2011

Cependant sur ma page d'accueil, où il y a moins d'espace, les trois liens s'affichent sur deux lignes.

J'ai réduit "data-width" à 100 et maintenant tout est sur la même ligne.

x captain_torche :

on peut mettre des scripts dans une liste ?

**captain_torche** · 19 Décembre 2011

Oui, rien ne te l'empêche

**Nullette** · 19 Décembre 2011

Je vais essayer.

Kulgar · 19 Décembre 2011

A propos des DIV, difficile de les réduire, Fb en rajoute !

Dans le code Fb je n'ai pas d'iframe. J'ai un code (script) à mettre juste après "body" et le lien à l'endroit où on veut placer l'icône. !?

Ouaip, c'est ce que je dis les Scripts fournis par FB sont affreux, ils rajoutent trop de choses pour... on ne sait pas trop quoi en fait.

Ah... Oui, au temps pour moi, quand tu récupères le code depuis l'appli Web FaceBook, tu as plusieurs possibilité de code : HTML5, XFBML, IFrame.

En regardant ton code à l'aide de Firebug, j'ai cru que tu avais récupéré directement l'IFrame.

Donc oublie ce que j'ai dit pour la mise en forme de l'IFrame... (sauf si tu décides de récupérer plutôt le code sous forme d'Iframe ).

Enfin, cela ne t'empêche pas de rajouter des propriétés css à la classe ".fb_ltr"

Je te conseille d'utiliser Firebug et d'étudier de près le code généré par les différents scripts pour les boutons des réseaux sociaux. Ca te permettra de voir les classes/Id des balises générées par ces scripts et de tester des mises en forme pour celles-ci grâce au panneau "Style" de Firebug.

Dans ton optique Kulgar, pourquoi ne pas mettre ces liens dans une liste ? On peut considérer qu'il s'agit d'une liste de liens, à mon sens.

C'est pas faux, mais ça ne passe pas une validation W3C.

Les balises <li> ne sont pas sensées encadrer des balises de type <div> comme celles générées par les scripts des réseaux sociaux. Bon, après, j'avoue que la validation W3C est optionnelle.

Modifié 19 Décembre 2011 par Kulgar

**Nullette** · 19 Décembre 2011

Merci Kulgar.

Ce soir je laisse tomber. Je viens de me farcir des pages et des pages en anglais sur les codes de Fb et leur validité W3C.

C'est très compliqué pour moi.

Je garde la classe css de l'"encart".

Concernant Fb,

j'ai mis un javascript :

fblike valid W3C

Il n'est actuellement que sur ma page d'accueil.

Concernant Firebug...je l'ai installé depuis longtemps et je dois apprendre à m'en servir

Je continuerai ces prochains jours.

Kulgar · 19 Décembre 2011

Au plaisir Nullette.

Pour la validation W3C, moi j'utilise ce site : W3C Markup Validation Service. Très pratique (et très performant) pour valider facilement ses pages à partir d'une URL, d'un fichier uploadé ou d'un code directement inséré.

Je me demande s'il existe d'autres outils meilleurs que celui-ci ?

**captain_torche** · 19 Décembre 2011

Les balises <li> ne sont pas sensées encadrer des balises de type <div> comme celles générées par les scripts des réseaux sociaux. Bon, après, j'avoue que la validation W3C est optionnelle.

Je ne veux pas te décevoir, mais c'est faux

Une balise li peut avoir comme enfants pas mal de balises ...

http://giminik.developpez.com/xhtml/li.html

**Nullette** · 19 Décembre 2011

Pour la validation W3C, moi j'utilise ce site : W3C Markup Validation Service. Très pratique (et très performant) pour valider facilement ses pages à partir d'une URL, d'un fichier uploadé ou d'un code directement inséré.

Je me demande s'il existe d'autres outils meilleurs que celui-ci ?

J'utilise le même. Je suis fana de la validation et me prend la tête pour la moindre erreur

x captain_torche

Je n'ai pas fait le teste de list, car, je ne sais pas ce que ça pourrait donner de mettre des javascripts et des div dans une même liste.

Kulgar · 19 Décembre 2011

Je ne veux pas te décevoir, mais c'est faux

Une balise li peut avoir comme enfants pas mal de balises ...

http://giminik.developpez.com/xhtml/li.html

Ah c'est bizarre ça... Il me semble pourtant que ça ne passait pas la validation de l'outil que j'ai mis en lien justement.

Ou alors j'ai rêvé ? Ou alors j'ai confondu avec une autre balise ?

Bon, je viens de refaire vite fait un test avec l'outil, ça passe les <div> dans les <li>. Mea Culpa.

Enfin, des divs dans des li, ça te fait pas bizarre quand même ?

Nullette : moi j'ai commencé à utiliser ce validateur, car je développe en Ruby On Rails, et il y a pas mal de code HTML remplacé par des fonctions Rails (qui génèrent ensuite le code). Je voulais donc vérifier que mes sites passaient la validation. Ce qui est rassurant c'est que la majorité des erreurs que j'ai eues étaient surtout liées aux... boutons des réseaux sociaux (et à mes listes ul/li, d'où ma confusion de tout à l'heure).

**Nullette** · 20 Décembre 2011

Je ne suis pas du tout pro Kulgar

Je ne sais même pas ce qu'est le ruby sur les rails

Pendant que tu y es dans tes essais, pourrais-tu tester une liste avec <div> ET javascipt (dans la même liste). ?

Kulgar · 20 Décembre 2011

Je ne suis pas du tout pro Kulgar

Je ne sais même pas ce qu'est le ruby sur les rails

Oups, pardon :blushing: à voir la façon dont tu écrivais, j'ai cru que tu étais pro.

Ruby sur les rails, ROR, Ruby On Rails, c'est un framework Web... En très gros, un ensemble de fonctions et fonctionnalités pré-programmées à l'aide du langage Ruby permettant de faciliter grandement la vie du développeur et accélérant le développement de sites Web.

Dans le même style, tu as Zend et Symfony pour PHP (un petit google sur ces mots clés te permettra d'en apprendre plus si tu es intéressée ).

Je vais essayer en incluant du script dans la liste, je te tiens au courant de mes tests.

Mais à priori, ça devrait passer sans soucis. Ou plutôt, je ne vois pas pourquoi javascript ferait échouer le test, mais bon, on sait jamais, tu as raison.

**Nullette** · 21 Décembre 2011

Merci Kulgar. J'en apprends tous les jours.

Connexion

Mettre en évidence liens réseaux sociaux

Sujets conseillés

Nullette

liens_geeks

Nicolas

Nullette

Nullette

Kulgar

captain_torche

Nullette

Nullette

captain_torche

Nullette

Kulgar

Nullette

Kulgar

captain_torche

Nullette

Kulgar

Nullette

Kulgar

Nullette

Veuillez vous connecter pour commenter

Parcourir

Activité