Facebook - Le script JS SDK

Le script JS SDK permet d'intégrer votre Blog à l'univers Facebook. Il est donc requis pour faire travailler des simples plugins, tels que le bouton J’aime et d’autres modules fourni par cette plate-forme.

En obtenant et en utilisant des plugins Facebook, vous acceptez les conditions d'utilisation de Facebook.

La version officielle

Pour que les plugins HTML5 de Facebook travaillent sur votre blog, vous devez impérativement installer le script SDK dans le code XML de votre thème.
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 &

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 thème, et suivez cette mini-faq.

Toutefois, si vous utilisez un Layouts Version 3, il est préférable de l'ajouter à la fin du thème juste avant la balise de fermeture </body>.

Les scripts des plugins sociaux

• Facebook - JS SDK

Les plugins Facebook

• Bouton j'aime
• Bouton de partage
• Bouton Enregistrer
• Plugin Page
• Boîte de commentaires
• Post intégré
• Pack - Like/Share/Save/Quote