Aligner mes boutons réseaux sociaux [Résolu]

depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - 5 sept. 2017 à 02:42 - Dernière réponse : depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention
- 5 sept. 2017 à 18:13
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
Afficher la suite 

8 réponses

Répondre au sujet
dugenou 4923 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 21 janvier 2018 Dernière intervention - 5 sept. 2017 à 15:50
+1
Utile
1
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>


Cette réponse vous a-t-elle aidé ?  
depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - 5 sept. 2017 à 17:05
Top merci !!
Je t'ai posé 2 autres questions en bas ;)
Commenter la réponse de dugenou
depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - 5 sept. 2017 à 13:38
0
Utile
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.
Commenter la réponse de depaninf
depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - Modifié par depaninf le 5/09/2017 à 17:26
0
Utile
1
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 !

SOS Dépannage Informatique : service de dépannage informatique à domicile
dugenou 4923 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 21 janvier 2018 Dernière intervention - 5 sept. 2017 à 17:28
Essaie avec ce lien :

<a href="https://plus.google.com/share?url=https://www.sosdepaninformatique.com" rel="nofollow noopener noreferrer" target="_blank"><img src="images/googleplus.jpg" width="36" height="36" alt="GooglePlus"></a>
Commenter la réponse de depaninf
depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - 5 sept. 2017 à 17:35
0
Utile
1
Merci mais ça pointe vers une page de publication et non de partage ou de suivi...

Aurais tu une autre idée ?
dugenou 4923 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 21 janvier 2018 Dernière intervention - 5 sept. 2017 à 17:42
Désolé, mais je n'ai pas d'autre solution et je n'ai pas de compte GooglePlus pour tester.
Commenter la réponse de depaninf
depaninf 70 Messages postés mercredi 31 octobre 2007Date d'inscription 23 octobre 2017 Dernière intervention - 5 sept. 2017 à 18:13
0
Utile
Pas grave je pense que ça va fonctionner comme ça.

Merci encore dugenou tu m'as beaucoup aidé !
Commenter la réponse de depaninf