DéveloppementsBac à sable

Définir une largeur variable pour les modules Google+


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
Description Network Gadget Version Template Version
Définir automatiquement la largeur d'un module Google+ en employant la méthode gapi.*.render.
Google+
1
1
2
Pour installer un module Google+ (par exemple un badge), il faut souvent mentionner une largeur fixe en pixels. Dans la plupart des cas, on s'arrange souvent pour le placer dans une colonne dont la largeur est également fixe. Dans le cas où il faut placer le module dans une colonne qui varie selon la résolution de l'écran (définie en pourcentage), l'emploi du code courant en html5 ne convient plus.

Pour que le module Google+ s'adapte automatiquement, il faut utiliser la propriété javascript offsetWidth qui va permettre de calculer la valeur réelle de la largeur. Ensuite, l'emploi de la méthode GAPI.*.render permettra de reconstituer le module.

Exemple de mise en œuvre avec le badge Google+ :

<div id="modulegoogle"></div>
<script type="text/javascript">
  var largeurmodule;
  var largeurcontaineur = document.getElementById("modulegoogle");
  if(largeurcontaineur.offsetWidth) {
    largeurmodule = largeurcontaineur.offsetWidth;
  }
  gapi.page.render (
    "modulegoogle", {
      "href": "https://plus.google.com/117378856874529913224",
      "layout": "portrait",
      "theme": "dark",
      "width": largeurmodule,
      "showcoverphoto": "true",
      "showtagline": "true"
    }
  );
</script>
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Populaire
DéveloppementsFichiers XML
Populaire
DéveloppementsMulti-versions
Twitter : Bouton Tweeter [Tweeter button]
Populaire
ThéorieFiches techniquesInclusions universelles
Balises de l'entête HTML des thèmes [all-head-content]
Populaire
DéveloppementsMulti-versions
Facebook : Boîte de commentaires [Comments Box]
Populaire