Vision du web. La réponse collaborative.

Gagner des Bitcoins.

Obtenir des Bitcoins Gratuitement !
Le HackerSpace Vision du web.
La réponse collaborative.
Le glider des Hackers.
Un symbole de rassemblement.
QWERTY.
Du clavier au terminal.
GNU / Linux Debian.
La distribution universelle.
GNU / Linux Ubuntu.
Linux pour les êtres humains.
GNU / Linux Arch.
Un Linux léger et flexible.
Nom de code Linux.
Documentaire FR.

Le montant des donations pour Vision du web est de 0.0038596616035225 Monero.

Please disable Adblock!

Un simple clic permet de miner de la monnaie numérique Monero avec les ressources de votre machine.
Soutenir Vision du Web sans rien dépenser, sans changer de page, sans publicité à consulter.

Vous n´êtes pas identifié(e).

Nous sommes le jeudi 19 octobre 2017. Il est .

Nous avons 125 invités et aucun membre en ligne

 
HackerSpace !
× Description précise du problème, URL de la page, message d'erreur éventuel, capture d'écran si nécessaire.

[Résolu] Le badge Google Plus n'est pas responsive

Plus d'informations
il y a 2 ans 1 semaine - il y a 2 ans 1 semaine #941 par hacki
hacki a créé le sujet : [Résolu] Le badge Google Plus n'est pas responsive
Le badge Google Plus affiché dans l'entête n'est pas responsive !

Dernière édition: il y a 2 ans 1 semaine par VisionDuWeb.
Les utilisateur(s) suivant ont remercié: VisionDuWeb, Zer00CooL
Plus d'informations
il y a 2 ans 1 semaine - il y a 2 ans 6 jours #942 par VisionDuWeb
VisionDuWeb a répondu au sujet : Le badge Google Plus n'est pas responsive
Merci d'avoir remonté le bogue visuel.
Il faut trouver une solution technique pour résoudre la question.

1 On crée autant de badges que de résolution clef du template. Par exemple un badge de 300px pour les dektop, un badge de 236px pour les tablettes en portrait etc…)

2 On met tous ces badges dans des div avec des classes spécifiques. Donc si votre design prévoit 4 styles différents pour 4 largeurs clef (desktop, tablettes portrait, mobile paysage et mobile portrait qui est assez classique par exemple) vous aurez 4 badges G+ à la suite
<div id="google-badge-desktop" style="width: 100%" class="badge-gplus-desktop">
<!-- Une balise pour la taille de base. -->
<div class="g-page" data-href="//plus.google.com/u/0/107319662328343705294" data-theme="dark" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>
</div>
 
<div id="google-badge-tablets-portrait" style="width: 100%" class="badge-gplus-tablets-portrait">
<!-- Une balise pour les tablettes portrait. -->
<div class="g-page" data-width="236" data-href="//plus.google.com/u/0/107319662328343705294" data-theme="dark" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>
</div>
 
<div id="google-badge-mobiles-landscape" style="width: 100%" class="badge-gplus-mobiles-landscape">
<!-- Une balise pour les mobiles paysage. -->
<div class="g-page" data-href="//plus.google.com/u/0/107319662328343705294" data-theme="dark" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>
</div>
 
<div id="google-badge-mobiles-portrait" style="width: 100%" class="badge-gplus-mobiles-portrait">
<!-- Une balise pour les mobiles portrait. -->
<div class="g-page" data-href="//plus.google.com/u/0/107319662328343705294" data-theme="dark" data-layout="landscape" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>
</div>
 
<div id="google-badge-script" style="width: 100%">
<!-- Placez cette ballise après la dernière balise widget. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'fr'};
 
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>


3 Et dans notre feuille de style gérant le responsive on règle pour n’afficher que le badge qu’il faut en fonction de la résolution
EX : style du badge 1 shown en desktop mais hide en tablette portrait, mobile paysage… ; style du badge 2 hide en desktop, shown en tablette portrait, hide en mobile paysage…

/* #Base 960 Grid
================================================== */
	/* Badges G+*/
	.badge-gplus-desktop				{ display: inline; }
	.badge-gplus-tablets-portrait		{ display: none; }
	.badge-gplus-mobiles-landscape		{ display: none; }
	.badge-gplus-mobiles-portrait		{ display: none; }
 
/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
	/* Badges G+*/
		.badge-gplus-desktop				{ display: none; }
		.badge-gplus-tablets-portrait		{ display: inline; }
		.badge-gplus-mobiles-landscape		{ display: none; }
		.badge-gplus-mobiles-portrait		{ display: none; }
    }
 
/*  #Mobile (Portrait)
================================================== */
    /* Note: Design for a width of 320px */
    @media only screen and (max-width: 767px) {
	/* Badges G+*/
		.badge-gplus-desktop				{ display: none; }
		.badge-gplus-tablets-portrait		{ display: none; }
		.badge-gplus-mobiles-landscape		{ display: none; }
		.badge-gplus-mobiles-portrait		{ display: inline; }
 
    }
 
/* #Mobile (Landscape)
================================================== */
    /* Note: Design for a width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
	/* Badges G+*/
		.badge-gplus-desktop				{ display: none; }
		.badge-gplus-tablets-portrait		{ display: none; }
		.badge-gplus-mobiles-landscape		{ display: inline; }
		.badge-gplus-mobiles-portrait		{ display: none; }
    }

Avec ces 3 étapes il est ainsi possible de contourner le problème de taille du badge Google + vs notre design responsive et de préserver l’expérience utilisateur au maximum.

Cette solution peut évidemment être employée pour d’autres éléments ou widgets dont les contraintes ne les rendraient pas compatibles avec les côté responsive de votre site.


###


Solution équivalente

Le code HTML et Javascript
<div class="google-desktop">
<div data-href="https://plus.google.com/ID" data-width="180" data-rel="author" data-layout="portrait" ></div>
</div>
 
<div class="google-tablet">
<div data-href="https://plus.google.com/ID" data-width="430" data-rel="author" data-layout="portrait" ></div>
</div>
 
<div class="google-movil">
<div data-href="https://plus.google.com/ID" data-width="270" data-rel="author" data-layout="portrait" ></div>
</div>
 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

La feuille de style css
.google-desktop {display:block;}
.google-movil, .google-tablet {display:none;}
 
@media only screen and (max-width: 479px) {
.google-tablet {display:block;}
.google-desktop, .google-movil {display:none;}
}
 
@media only screen and (max-width: 320px) {
.google-movil {display:block;}
.google-desktop, .google-tablet {display:none;}
}

###


Résolu
Finalement, je ne vais pas utiliser le badge, mais, simplement le lien de Google Plus.
Voir l'article de Vision du web pour "Lier son site à Google Plus avec rel Publisher".
http://www.visionduweb.fr/editoriaux-strategie-de-communication/146-lier-son-site-a-google-plus-avec-rel-publisher


Bibliographie
Ici, simple proposition d'afficher un layout portrait à la place du layout landscape. Seulement, j'aimerais garder l'affichage en panoramique.
stackoverflow.com/questions/14247643/how-do-i-make-the-google-plus-badge-responsive

Le tutoriel simple et efficace de Tom qui apporte la réponse au problème du badge Google Plus pour qu'il s'adapte à la taille du contenu, en mode portrait.
Il est donc possible de paramétrer le comportement du layout (portrait ou landscape) en fonction de la taille écran.
tom13c.com/programmation/integrer-badge-google-responsive-site-web

Même concept que Tom qui apporte la réponse au problème du badge Google Plus pour qu'il s'adapte à la taille du contenu, en mode portrait.
damasogonzalez.com/como-hacer-responsive-tu-badge-de-google-plus-con-css

En conclusion, oui, il est possible de mettre en place un affichage responsive pour le badge Google Plus, mais, il n'est pas possible de faire en sorte qu'un affichage landscape s'adapte à la dimension de son espace automatiquement. Il faudra passer par la classe portrait, ou, utiliser une image personnalisée et un lien vers Google Plus.

Vision du web. La réponse collaborative.
Dernière édition: il y a 2 ans 6 jours par VisionDuWeb.
Les utilisateur(s) suivant ont remercié: Zer00CooL

REMARQUE ! Ce site utilise des cookies et autres technologies similaires.

Si vous ne changez pas les paramètres de votre navigateur, vous êtes d'accord. En savoir plus

J'ai compris

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de Cookies pour vous proposer un accès membre personnalisé et réaliser des statistiques de visites.

Vision du web sur votre réseau social

La sagesse du futur, celle qui évitera le suicide de l'humanité, ne consistera plus à gagner du temps mais à le remplir, à le vivre, à en prendre toute la mesure.
[Jacques Attali]

Votre hébergement internet avec LWS.