Vision du web. La réponse collaborative.

Gagner des Bitcoins.

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.

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

Soutenir Vision du Web dans son partage de logiciels et de ressources libres

Ce mineur crée de la monnaie numérique Monero pour soutenir Vision du web.
Merci de désactiver votre bloqueur de publicité.
Aucune publicité ne sera affichée.
Le mineur utilise les ressources de votre machine pour créer gratuitement de la monnaie numérique.

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

Nous sommes le jeudi 14 décembre 2017. Il est .

Nous avons 1000 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 2 mois - il y a 2 ans 2 mois #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 2 mois par VisionDuWeb.
Les utilisateur(s) suivant ont remercié: VisionDuWeb, Zer00CooL
Plus d'informations
il y a 2 ans 2 mois - il y a 2 ans 2 mois #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 2 mois 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

Alexa Global Rank : 158790
Alexa France Rank : 7674

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

Dire que l’on s’en fiche du droit à la vie privée sous prétexte qu’on a rien à cacher, c’est comme déclarer que l’on se fiche du droit à la liberté d’expression sous prétexte qu’on a rien à dire.
Edward Snowden

Votre hébergement internet avec LWS.