Facebook : Boîte de commentaires [Comments Box]

Attention ! Les catégories Fonctionnalités et Développements vont bientôt faire l'objet d'une révision.

Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.

La boîte des commentaires Facebook, configuration pour Blogger. Code validé HTML5.
Avec ou sans mode administrateur.
Version HTML ou gadget AddToBlogger.
Divers réglages : largeur, ordre de tri, thème, nombre de commentaires, etc.
etc.

Présentation de la boîte

Ce développement permet d’intégrer la boîte de commentaires FaceBook sur votre blog de 2 manières :

1. Dans le code HTML du modèle. Dans ce cas-là, la boîte remplacera l'un des modules fournis par défaut par Blogger. Ce qui vous permettra de gérer l'affichage depuis l'interface.
2. Via un gadget "AddToBlogger".

Démo
Lien : commentaires

Installation du module

Paramétrez d'abord les options dans le tableau. Les méthodes d'installation ci-dessous varieront en fonction de vos choix.

Support	Placer dans le code HTML d'un modèle standard un gadget AddToBlogger
Raccorder aux options Blogger	Remplacer le module de commentaires filetés Blogger le module de commentaires cumulés Blogger le module de commentaires Google+ J'utilise un modèle mobile personnalisé un modèle mobile prédéfini par défaut aucun modèle mobile Sous cette configuration, vous devrez activer vos flux de blog et désactiver les commentaires Google+, via votre tableau de bord Blogger. Le module Facebook sera également disponible dans votre modèle mobile.
Raccordement et affichage du gadget	Associer à l'url canonique de la page courante l'url canonique de la page d'accueil Afficher Dans les pages autonomes et les articles Sur toutes les pages
Apparence	Largeur 100% ? Thème Clair (light) Foncé (dark) Nbre de commentaires 2 commentaires Ordre des commentaires Social Chronologique Chronologique inversé Langue Détection automatique ?
Administrateur ?	Créer une application FB. ID application [NON-REQUIS] ? id de votre profil [NON-REQUIS] ?

Le code du module

<b:includable id='fbcomments' var='post'>
<!-- Comments Box Facebook - Blogger Config.
     Ref.: https://goo.gl/UA2AwZ -->
  <b:if cond='data:post.allowComments'>
    <div class='comments' id='comments'>
      <a id='fbcomments'/>
      <h4><span class='fb-comments-count' expr:data-href='data:post.url.canonical'/> <data:commentLabel/></h4>
      <div class='fb-comments'
           expr:data-href='data:post.url.canonical'
           data-num_posts='2'
           data-order_by='social'
           data-width='100%'
           data-colorscheme='light' />

      <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
          <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
        </div>
      </div>

    </div>
  </b:if>
</b:includable>
<b:includable id='fbcomment_count_picker' var='post'>
<!-- Comments Count Facebook - Blogger Config.
     Ref.: https://goo.gl/UA2AwZ -->
  <a class='comment-link' expr:href='data:post.url.canonical + &quot;#fbcomments&quot;'><span class='fb-comments-count' expr:data-href='data:post.url.canonical'/> <data:top.commentLabel/></a>
</b:includable>

Où recopier ce code ?

• Tableau de bord
• Modèle
• Modifier le code HTML
• Rechercher Gadget Blog1

Déployez (►) le gadget Blog1 :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>

Recopiez le code avant l'inclusion main :

<b:includable id='main' var='top'></b:includable>

Raccordement de la boîte

<b:include data='post' name='fbcomments'/>

Où recopier ce code ?

Les emplacements cités peuvent varier en fonction des antécédents de votre modèle. La méthode est basée sur la dernière mise à jour de Blogger qui remonte à juin 2013.

Dans le code du gadget Blog1, déployez (►) l'inclusion comment_picker :

<b:includable id='comment_picker' var='post'></b:includable>

Dans cette inclusion remplacez la balise :

<b:include data='post' name='threaded_comments'/>

Raccordement du lien commentaire dans les index

<b:include cond='data:blog.pageType not in {&quot;item&quot;, &quot;static_page&quot;} and data:post.allowComments' data='post' name='fbcomment_count_picker'/>

Où recopier ce code ?

Les emplacements cités peuvent varier en fonction des antécédents de votre modèle. La méthode est basée sur la dernière mise à jour de Blogger de mars 2015.

Pour la version web

Dans le code du gadget Blog1, déployez (►) l'inclusion post :

<b:includable id='post' var='post'></b:includable>

Dans cette inclusion remplacez la balise :

<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                          and data:post.allowComments' data='post' name='comment_count_picker'/>

Pour la version mobile personnalisée

Dans le code du gadget Blog1, déployez (►) l'inclusion mobile-index-post :

<b:includable id='mobile-index-post' var='post'></b:includable>

Dans cette inclusion remplacez la balise :

<b:include cond='data:blog.pageType != &quot;static_page&quot;                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>

Le script

<div id='fb-root'/>
<script>
  var localeFB = &quot;<data:blog.locale/>&quot;;
  // <![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[localeFB]+"/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "facebook-jssdk"));
  // ]]>
</script>

Où recopier le script ?

Le script Facebook est un élément essentiel au fonctionnement de tous les modules officiels de ce réseau social. Si vous avez déjà installé un module Facebook sur votre blog, vous n'êtes plus obligé de le rajouter à nouveau.

Le script doit être positionné juste après la balise <body > dans le code HTML du blog.

En savoir plus

<!-- Boîte de commentaires Facebook (Comments Box). Gadget AddToBlogger généré sur Blogger Code. Licence Creative Commons Attribution : Pas d'Utilisation Commerciale - Partage à l'Identique 3.0 non transposé. Attribution : Blogger Code Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/ -->

Note : Les gadgets Add To Blogger ne sont pas disponibles pour les modèles dynamiques et la version mobile.

Opengraph Facebook (échantillon)

<meta expr:content='data:blog.url.canonical' property='og:url'/>
<b:if cond='data:blog.pageName'>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <b:else/>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
  <meta expr:content='data:blog.title' property='og:site_name'/>
  <meta content='article' property='og:type'/>

Où recopier ce code ?

• Tableau de bord
• Modèle
• Modifier le code HTML

Ajoutez les balises <meta> dans l'éditeur HTML de votre modèle, juste après la balise <head>.

Pour que le mode "administrateur" soit activé, les mentions fb:app_id et fb:admins doivent y figurer.

Pour terminer l'opération, complétez la balise <html > par ces attributs :

xmlns:fb='https://www.facebook.com/2008/fbml'
xmlns:og='https://opengraphprotocol.org/schema/'

L'OpenGraph permet de mieux contrôler les éléments de votre blog qui seront utilisés par Facebook. L'échantillon ci-dessus contient le titre et l'url de la page courante, ainsi que les données permettant de gèrer le module de commentaires. Pour indiquer plus d'informations à Facebook, rendez-vous sur cette page : Facebook : Open Graph protocol

Gérer l'affichage depuis le tableau de bord

Si vous avez installé la version HTML dans l'éditeur HTML du modèle, vous avez la possibilité de gérer l'affichage.

Activation / désactivation générale.

• Paramètres
• Publications et commentaires
• Commentaires
• Emplacements des commentaires

Pour activer, vous sélectionnez : Imbriqués.

Pour désactiver, vous sélectionnez : Masqués.

Les options Page pleine et pop-up sont inopérantes.

Activation / désactivation par article.

Dans l'éditeur des articles, depuis la colonne des paramètres des articles, vous pouvez activer ou désactiver les commentaires en cochant soit :

Autoriser	pour afficher.
Ne pas autoriser, masquer les existants	pour désactiver.
Ne pas autoriser, afficher les existants	option inopérante.

Les autres plugins Facebook

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

Script Facebook JS SDK L'openGraph MetaData sur Blogger