DéveloppementsFichiers XML

Facebook - JS SDK

Description Network Template Version
Ajouter le script Facebook SDK dans un modèle Blogger.
1
2
3
Facebook - JS SDK
Le script JS SDK permet d'intégrer votre Blog à l'univers Facebook. Il est donc requis pour faire travailler des simples fonctionnalités, telles que le bouton J’aime et d’autres plugins fourni par cette plate-forme.

La version officielle

Pour que les modules HTML5 de Facebook travaillent sur votre blog, vous devez impérativement installer le script SDK dans le code XML de votre modèle.
Le script officiel distribué par Facebook Developers a été conçu pour être injecté dans un quelconque éditeur HTML et ne peut pas être ajouté tel quel dans l'éditeur XML de Blogger.

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

En effet, si vous insérez le code tel quel, l'éditeur vous renverra ce type de message :

Erreur d'analyse XML, ligne XXX, colonne XXX : The reference to entity "foo" must end with the ';' delimiter..

L'erreur vient du fait que le code fourni est prévu pour travailler dans un éditeur HTML et que dans l'éditeur XML, certains symboles doivent être échappés. Ce qui est le cas avec l'esperluette. & doit devenir &amp;


Conversion XML

Pour que le script officiel soit accepté dans l'éditeur XML de Blogger, vous devez échapper les caractères spéciaux ou utiliser les marqueurs CDATA.

Caractères échappés
<div id='fb-root'/>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/fr_FR/all.js#xfbml=1&amp;appId=ID_APPLICATION&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

Marqueurs CDATA
<div id='fb-root'/>
<script>
// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]>
</script>


Version pour la distribution

Si vous êtes un distributeur/concepteur de gadgets/thèmes, ou si vous ne connaissez pas le code de langue de votre Blog, vous pouvez employer ce script.

<div id='fb-root'/>
<script>
  var BlogLocale = "<data:blog.locale/>";
  // <![CDATA[
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      var localeList = { 'af': 'af_ZA', 'de': 'de_DE', 'en': 'en_US', 'en_GB': 'en_GB', 'ar': 'ar_AE', 'eu': 'eu_ES', 'bn': 'bn_IN', 'bg': 'bg_BG', 'ca': 'ca_ES', 'zh_HK': 'zh_HK', 'zh_CN': 'zh_CN', 'zh_TW': 'zh_TW', 'ko': 'ko_KR', 'hr': 'hr_HR', 'da': 'da_DK', 'es_419': 'es_LA', 'es': 'es_ES', 'et': 'et_EE', 'fil': 'tl_PH', 'fi': 'fi_FI', 'fr': 'fr_FR', 'fr_CA': 'fr_CA', 'gl': 'gl_ES', 'el': 'el_GR', 'iw': 'he_IL', 'hi': 'hi_IN', 'hu': 'hu_HU', 'id': 'id_ID', 'is': 'is_IS', 'it': 'it_IT', 'ja': 'ja_JP', 'lv': 'lv_LV', 'ms': 'ms_MY', 'ml': 'ml_IN', 'nl': 'nl_NL', 'no': 'nn_NO', 'fa': 'fa_IR', 'pl': 'pl_PL', 'pt_BR': 'pt_BR', 'pt_PT': 'pt_PT', 'ro': 'ro_RO', 'ru': 'ru_RU', 'sr': 'sr_RS', 'sk': 'sk_SK', 'sl': 'sl_SI', 'sv': 'sv_SE', 'sw': 'sw_KE', 'ta': 'ta_IN', 'cs': 'cs_CZ', 'te': 'te_IN', 'th': 'th_TH', 'tr': 'tr_TR', 'uk': 'uk_UA', 'vi': 'vi_VN', 'am': 'en_US', 'gu': 'en_US', 'kn': 'en_US', 'mr': 'en_US', 'or': 'en_US', 'ur': 'en_US', 'zu': 'en_US' };
      js.src = "//connect.facebook.net/"+localeList[BlogLocale]+"/all.js#xfbml=1&appId=ID_APPLICATION";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "facebook-jssdk"));
  // ]]>
</script>


Ajouter le script dans Blogger

Facebook recommande l'ajout du script au-delà de la balise <body>.

Ouvrez l'éditeur XML de votre modèle, et suivez cette mini-faq.

Toutefois, si vous utilisez un thème V3 (Template Moderne), il est préférable de l'ajouter à la fin du modèle juste avant la balise de fermeture </body>.

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

Base de connaissancesFiches techniquesInclusions universelles
Balises de l'entête HTML des thèmes [all-head-content]
Populaire
DéveloppementsFichiers XML
Pack Plugins Facebook [like/share/send/save/quote]
Populaire
DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
Base de connaissancesFonctionnalitésContenu
Populaire
Base de connaissancesFonctionnalitésÉditeurs
Populaire