DéveloppementsBac à sable

Définir une largeur variable pour les modules Google+


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
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>
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums 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éveloppementsFichiers XML
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire