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.018026365499642 Monero.

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

Chargement du mineur pour soutenir Vision du Web ...
Démarrer le mineur va utiliser les ressources de votre machine pour créer de la monnaie numérique Monero.

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

Nous sommes le samedi 25 novembre 2017. Il est .

Nous avons 400 invités et aucun membre en ligne

 
HackerSpace !

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 2 ans 1 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 2 ans 1 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

Alexa Global Rank : 176533
Alexa France Rank : 4056

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