Networks dev.ModulesHTML5

Google+ - Badge

Les paramètres du module

Attribut Valeur Signification
class
  • g-person
  • g-page
  • g-community
Syntaxe HTML5
data-href
  • https://plus.google.com/IDENTIFIANT_PROFIL
  • https://plus.google.com/IDENTIFIANT_PAGE
  • https://plus.google.com/communities/IDENTIFIANT_COMMUNAUTÉ
Adresse profil, page ou communauté G+
data-layout
  • portrait
  • landscape
Orientation du badge
data-theme
  • light
  • dark
Thèmes du badge
data-showcoverphoto
  • true
  • false
Bannière du profil/page
data-showtagline
  • true
  • false
Description profil/page/communauté
data-showphoto
  • true
  • false
Logo de la communauté
data-showowners
  • true
  • false
Propriétaires de la communauté
data-width Largeur


Exemples HTML

Profil
<div class="g-person"
     data-href="https://plus.google.com/114671227071069817799"
     data-layout="landscape"
     data-theme="dark"
     data-width="320">
</div>
Résultat :

Page
<div class="g-page"
     data-href="https://plus.google.com/117378856874529913224"
     data-layout="portrait"
     data-showcoverphoto="true"
     data-showtagline="true"
     data-theme="light"
     data-width="300">
</div>
Résultat :

Communauté
<div class="g-community"
     data-href="https://plus.google.com/communities/115758385206378551362"
     data-theme="dark"
     data-layout="portrait"
     data-showphoto="true"
     data-showowners="true"
     data-showtagline="true"
     data-width="180">
</div>
Résultat :


Conversion XML

Le code officiel fourni par Google Developers est un code HTML. Pour l'injecter dans l'éditeur XML de Blogger, certaines règles XML doivent être respectées :
  • Les double-quotes deviennent des single-quotes.
  • La balise d'ouverture devient la balise de fermeture : <div></div><div/>.

Chaque attribut contenant une expression Blogger doit être précédé du préfixe expr: et chaque expression doit ressortir un résultat correspondant à la valeur attendue dans l'attribut.

Exemple
<div class='g-page'
     data-href='https://plus.google.com/117378856874529913224'
     data-layout='portrait'
     data-showcoverphoto='true'
     data-showtagline='true'
     data-theme='light'
     data-width='300'/>

Pour employer des valeurs variables en fonction de diverses conditions, certaines données et certains opérateurs peuvent être intégrés dans le code.
Vous choisissez les données à intégrer en fonction de l'emplacement du code dans le modèle. Par exemple, si le code est injecté dans le widget Profile, vous ajoutez des données issues du dictionnaire du widget Profile.

<div class='g-page'
     data-href='https://plus.google.com/117378856874529913224'
     data-layout='data:blog.pageType == "item" ? "portrait" : "landscape"'
     data-showcoverphoto='true'
     data-showtagline='true'
     data-theme='light'
     data-width='300'/>
Le badge s'affichera en mode "Portrait" dans les pages des articles et en mode "Paysage" dans les autres types de pages.

Ce module est également distribué par Blogger. Consultez les gadgets disponibles :

  • Tableau de bord
  • Mise en page
  • Ajouter un gadget
Dernière modification :

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire