Vision du web. La réponse collaborative.

Gagner des Bitcoins.

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.
HackerSpace !
Messagerie entre membres connectés.

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

Nous avons 218 invités et aucun membre en ligne

 

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

NOTE: Vous envoyez le message en tant qu' "Invité", vous ne pouvez pas éditer le message ou le supprimer
Merci de Connexion ou S'inscrire pour ignorer cette étape.
X

Historique du sujet: [Résolu] Le badge Google Plus n'est pas responsive

Max. affiche le(s) dernier(s) 4 message(s) - (Dernier message affiché en premier)

  • VisionDuWeb
  • Portrait de VisionDuWeb
il y a 1 an 9 mois
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.

  • hacki
  • Portrait de hacki
il y a 1 an 9 mois
[Résolu] Le badge Google Plus n'est pas responsive

Le badge Google Plus affiché dans l'entête n'est pas responsive !

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

Vision du web :
A Member of The Internet Defense League.

L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.
[Albert Einstein]

Votre hébergement internet avec LWS.