Networks dev.ModulesHTML5

Facebook - Quote Plugin

Note : Module HTML5. L'installation du script Facebook SDK dans le blog est requis.


Les paramètres du module

Attribut Valeur Signification
class fb-quote Syntaxe HTML5
data-href https:// L'url canonique de la page à partager
data-layout
  • quote
  • button
Format du plugin


Exemple HTML

<div><i>Une citation - Sélectionnez ce texte.</i></div>
<div class="fb-quote"
     data-href="https://bloggercode-blogconnexion.blogspot.com/1997/12/Facebook-Quote-Plugin.html"
     data-layout="quote">
</div>
Résultat :
Une citation - Sélectionnez ce texte.


Conversion XML

Le code officiel fourni par Facebook 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 (par exemple, une url dans l'attribut data-href).

Exemple
<div><i>Une citation - Sélectionnez ce texte.</i></div>
<div class='fb-quote'
     expr:data-href='EXPRESSION'
     data-layout='quote'/>

Pour automatiser certaines valeur comme par exemple l'url canonique à partager, 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 Blog, vous ajoutez une donnée issue du dictionnaire du widget Blog.

Données recommandées :

Exemple, dans le widget Blog
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
  <data:post.body/>
</div>
<div class='fb-quote'
     expr:data-href='data:post.url.canonical'
     data-layout='quote'/>
Dernière modification :

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire