Signaler

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

Posez votre question depaninf 68Messages postés mercredi 31 octobre 2007Date d'inscription 10 septembre 2017 Dernière intervention - Dernière réponse le 5 sept. 2017 à 18:13 par depaninf
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:
http://img-19.ccm2.net/z2vHQWxeSerSQstPdhzwLuzL7NQ=/53517c5c63584b439e370b357ff1a2c9/ccm-ugc/96843_10214089777858270_1826135153_n.png

Sur un PC ça donne ça:
http://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






Utile
+1
plus moins
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>


depaninf 68Messages postés mercredi 31 octobre 2007Date d'inscription 10 septembre 2017 Dernière intervention - 5 sept. 2017 à 17:05
Top merci !!
Je t'ai posé 2 autres questions en bas ;)
Répondre
Donnez votre avis
Utile
+0
plus moins
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.
Donnez votre avis
Utile
+0
plus moins
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 !

dugenou 4834Messages postés mercredi 19 janvier 2005Date d'inscription ContributeurStatut 15 septembre 2017 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>
Répondre
Donnez votre avis
Utile
+0
plus moins
Merci mais ça pointe vers une page de publication et non de partage ou de suivi...

Aurais tu une autre idée ?
dugenou 4834Messages postés mercredi 19 janvier 2005Date d'inscription ContributeurStatut 15 septembre 2017 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.
Répondre
Donnez votre avis
Utile
+0
plus moins
Pas grave je pense que ça va fonctionner comme ça.

Merci encore dugenou tu m'as beaucoup aidé !
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !