Aligner mes boutons réseaux sociaux

Résolu
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   -  
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour tout le monde,

J'essaie d'intégrer les boutons réseaux sociaux (Facebook, Google+, Twitter et Linkedin) au footer de mon site, mais ils ne veulent pas s'aligner horizontalement sur la même ligne.

Voici mon code:
Après la balise head
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>


A l'endroit désiré
<br><div class="fb-like" data-href="https://www.facebook.com/sosdepannageinformatique" data-width="65" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>

<a href="https://twitter.com/SDI_Depan_info" rel="nofollow noopener noreferrer" target="_blank" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @SDI_Depan_info</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: fr_FR</script>
<script type="IN/Share" data-url="https://www.linkedin.com/in/sosdepannageinformatique/" data-counter="right"></script>

<g:plusone size="tall"></g:plusone>

<br/>

J'ai testé différentes combinaisons: avec ou sans balise inline, en me servant de la feuille de style ou pas rien n'y fait !

Sur un smartphone ça donne ça:
https://img-19.ccm2.net/z2vHQWxeSerSQstPdhzwLuzL7NQ=/53517c5c63584b439e370b357ff1a2c9/ccm-ugc/96843_10214089777858270_1826135153_n.png

Sur un PC ça donne ça:
https://img-19.ccm2.net/rwDRw1MQQotN0VomUoes9OdWPS8=/c14c434b1e3c4e689b2c4834f2a9b585/ccm-ugc/Capture.PNG

Étrange que ça ne donne pas la même chose...

Par ailleurs j'aimerais bien choisir les icônes au lieu de celles par défaut.

Un peu d'aide serait la bienvenue :)

Je vous en remercie d'avance. A+
Olivier






SOS Dépannage Informatique : service de dépannage informatique à domicile

5 réponses

dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonjour,

Au lieu d'utiliser des scripts que tu ne peux pas contrôler, pourquoi ne pas faire tes propres liens avec tes icônes personnelles, dans une <div> avec la "class" de ton choix :

<a href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/sosdepannageinformatique/&t=Service de dépannage informatique sur site accessible à Paris et en région parisienne" rel="nofollow noopener noreferrer" target="_blank"><img src="images/facebook.jpg" width="36" height="36" alt="Facebook"></a>||<a href="http://twitter.com/share?url=https://twitter.com/SDI_Depan_info/&text=Service de dépannage informatique sur site accessible à Paris et en région parisienne" rel="nofollow noopener noreferrer" target="_blank"><img src="images/twitter.jpg" width="36" height="36" alt="Twitter"></a>||<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.linkedin.com/in/sosdepannageinformatique/&title=Service de dépannage informatique sur site accessible à Paris et en région parisienne" rel="nofollow noopener noreferrer" target="_blank"><img src="images/linkedin.jpg" width="36" height="36" alt="Linkedin"></a>


1
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Top merci !!
Je t'ai posé 2 autres questions en bas ;)
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Hello !

Personne n'est inspiré ?

J'ai visité beaucoup de forums sur le sujet mais chaque fois les solutions ne fonctionnent pas...

Merci pour votre aide.
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Merci dugenou, T'es trop fort !

J'ai encore une petite question:

Tu m'as donné le code pour Facebook, Twitter et Linkedin mais pas pour Google+.

Concernant Google+ j'ai mis le code suivant:
<a href="https://plus.google.com/g:plusone=https://plus.google.com/u/0//&t=Service de dépannage informatique sur site accessible à Paris et en région parisienne" rel="nofollow noopener noreferrer" target="_blank"><img src="images/google-plus.png" width="36" height="36" alt="Google+"></a>

Mais ça pointe sur une page d'erreur.... je ne connais pas le lien pour le gplus1

Peux tu m'aider ? Merci encore !

Signature non conforme supprimée par la Modération CCM
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Essaie avec ce lien :

<a href="https://plus.google.com/share?url=https://Adresse ." rel="nofollow noopener noreferrer" target="_blank"><img src="images/googleplus.jpg" width="36" height="36" alt="GooglePlus"></a>
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Merci mais ça pointe vers une page de publication et non de partage ou de suivi...

Aurais tu une autre idée ?

Signature non conforme supprimée par la Modération CCM
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Désolé, mais je n'ai pas d'autre solution et je n'ai pas de compte GooglePlus pour tester.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Pas grave je pense que ça va fonctionner comme ça.

Merci encore dugenou tu m'as beaucoup aidé !

Bonjour,
Que modèle ce téléviseur JVC ?
Il est relié à une antenne râteau ou autre ?
0