Modèles Facebook

Ce plugin propose un ensemble de modèles SPIP (ou noisettes) pour intégrer simplement et rapidement les modules sociaux du site Facebook.

Voici la liste des modèles proposés :
-  ’send’ : le bouton “Envoyer” classique (avec commentaire),
-  ’like’ : le bouton “J’aime” classique (avec commentaire),
-  ’like box’ : liste des commentaires des utilisateurs qui ont “aimés”,
-  ’activity’ : liste des activités récentes d’une page ou d’un profil,
-  ’comments’ : liste des commentaires et bouton permettant d’en écrire un,
-  ’live stream’ (expérimental) : boîte de discussion type ’chat’.

Un modèle générant des informations “Open Graph” est également proposé, permettant d’intégrer dans vos en-têtes les informations sur la page ou le contenu concerné.

Installation

  1. Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html
  3. Si vous utilisez le plugin Config (CFG), accédez à la page du plugin via le bouton de l’onglet ’Configuration’ de l’espace privé (réservé aux webmestres).

Optionnellement, le plugin est disponible dans le fil RSS de chargement automatique de Spip-Contrib (onglet ’Ajouter des plugins’ de la page de gestion des plugins de l’espace privé). Charger le paquet du plugin par ce biais permet notamment une mise à jour régulière de son code source ...

Utilisation des modèles

Les modèles proposés, rangés dans le répertoire ’modeles/’ du plugin, s’intègrent dans vos squelettes en utilisant la balise MODELE de façon classique :

[(#MODELE{nom du modèle, option1=valeur1}|// ...)]

Chaque modèle peut recevoir différentes options, qui sont listées en tête de chacun des squelettes correspondants et rappelées sur la page Modèles Facebook - Références.

La plupart de ces options ont des valeurs par défaut et ne sont pas obligatoires. Ces valeurs par défaut, notamment les informations de style (police de caractère, couleurs de bordure et dimensions) sont prévues pour s’intégrer dans la distribution de squelettes de SPIP [1]. Certaines de ces valeurs sont éditables sur la page de configuration.

Certains modèles nécessitent d’utiliser un identifiant d’application Facebook (App ID) et requièrent donc de créer une application sur le site du réseau social pour votre site SPIP. Les différentes étapes et informations pour la création d’une application sont disponibles sur la page http://developers.facebook.com/?ref=pf.

Lorsque des identifiants sont renseignés, ils seront intégrés aux en-têtes de toutes les pages publiques par la balise INSERT_HEAD.

Utilisation des informations Open Graph

Les informations “Open Graph” sont des tags renseignant plusieurs données permettant au système Facebook d’indexer, de ranger et de présenter des titres, URLs ou images correspondant à la page concernée. Ils ne sont pas obligatoires. Pour mieux comprendre de quoi il s’agit, voyez la page http://developers.facebook.com/docs... (en anglais).

Pour intégrer ces informations dans vos squelettes de pages publiques, vous devez inclure le modèle “insert_head_og.html” en en-tête (entre les balises <head> et </head>) en lui passant l’environnement courant [2]. Vous devez donc modifier chacun de vos en-têtes de squelette en ajoutant :

  1. #MODELE{insert_head_og, env}

Pour chacun des objets éditoriaux de SPIP, le modèle va générer les informations nécessaires à Facebook : titre, logo, URL et description. Le modèle génère également des informations spécifiques dans le cas des documents, afin de préciser à Facebook qu’il s’agit d’un média. Si aucun identifiant objet n’est trouvé, il renvoie simplement les informations générales du site : nom du site, logo, descriptif et URL.

Vous pouvez donc passer l’identifiant d’un objet SPIP en option au modèle, par exemple pour le document 1 :

  1. #MODELE{insert_head_og, env, id_document=1}

CSS : personnalisation des styles [3]

Chaque modèle affiche son contenu dans une div de classes CSS fb_modeles (l’identifiant SPIP du plugin) et fb_XXXXXX est le nom du modèle. Cela permet une personnalisation des styles discriminante selon chaque modèle.

Par exemple pour le module Facebook “Send” :

<div class="fb_modeles fb_send">
     ... contenu ... 
</div>

Les différentes classes utilisées par le plugin sont rappelées dans le fichier CSS “fb_modeles.css” à la racine du plugin, qui est chargé en en-tête des pages publiques par la balise #INSERT_HEAD. Vous pouvez éditer ce fichier avec vos propres valeurs, ou recopier les définitions dans un fichier personnel.

Configuration / Documentation interne / Tests

Une page de documentation est livrée avec le plugin, pour vous permettre de visualiser et de tester vos propres réglages. Elle est accessible lorsque le plugin est actif via l’URL : “spip.php?page=fb_modeles” [4].

Page de documentation du plugin
Page de documentation du plugin

Modèles Facebook est prévu pour proposer une page de configuration grâce au plugin Config (CFG) mais celui-ci n’est pas obligatoire [5].

Copie d'écran de la page de configuration (via le plugin CFG)
Copie d’écran de la page de configuration (via le plugin CFG)

Développement participatif

Le plugin est en développement sur le dépôt SVN de Spip-Zone et ouvert à l’intervention de tous. Vous pouvez y apporter vos modifications librement, en gardant à l’esprit qu’il doit rester dans le cadre d’une utilisation globale (pas de modification qui ne concerne que votre cas personnel), libre (pas de nécessité d’acheter une licence), s’intégrant dans SPIP (ce ne sont que des modèles codés en HTML avec des balises SPIP).

Adresse du dépôt de développement

https://zone.spip.org/trac/spip-zon...

Cas des langues

Facebook utilise une logique de codes de langue composés pour les appels de scripts. Ces codes sont listés dans le fichier “inc/xfbml_languages.php” dans le plugin. Si votre langue n’y existe pas encore, merci de l’ajouter sur la zone ... les autres vous remercieront [6]!

Pour plus d’info sur ces codes de langue, voyez la page http://developers.facebook.com/docs....

Footnotes

[1Plus précisément, il s’agit d’un mix des valeurs de styles de la distribution standard et du squelette Z : une couleur de bordure “dddddd”, des largeurs de 226px en colonne et 490px en contenu, la police “Lucida grande” ...

[2Ceci est nécessaire pour récupérer les informations de l’objet concerné par le squelette. Il n’est donc pas possible d’utiliser le pipeline ’insert_head’.

[3Disponible depuis la version 0.15 du plugin.

[5Il est obligatoire pour pouvoir configurer les différents identifiants Facebook le cas échéant.

[6Si vous n’avez pas d’identifiants de commiteur, ajoutez votre code de langue sur le forum de cette page, nous nous chargerons du reste ...

Pour plus d’information :
-  sur les plugins Facebook : http://developers.facebook.com/docs...
-  sur le protocole “Open Graph” : http://developers.facebook.com/docs...
-  pour créer une application Facebook : http://www.facebook.com/developers/.

updated on 2 October 2019

Discussion

46 discussions

  • Bonjour, j’utilise le plugin Modèles Facebook et j’ai connu un problème dont je donne une solution qui fonctionne dans mon cas.

    J’ai rendu mon site inaccessible avec l’outil “Site en travaux” du couteau suisse, afin de me permettre de développer tranquillement, l’espace public de mon site n’étant visible que pour moi en tant qu’administrateur connecté. Travaillant avec mon propre thème avec Zpip sous SPIP 2.1.13, après avoir activé le plugin Modèles Facebook j’ai utilisé avec succès le modèle like_box dans un article. Jusque là aucun souci. Retrouvant toujours mes mêmes onglets sous google chrome et restant toujours connecté, je n’avais jamais besoin de m’identifier.

    Cependant... Un jour de mai, j’ai voulu tester mon site sous Explorer, et dès que j’ai voulu accéder à l’espace privé en saisissant dans l’url “http://nomdusite/ecrire” (j’avais viré la possibilité de se connecter sur l’outil “Site en travaux” du couteau suisse"), j’ai obtenu une erreur du genre “Call to undefinid function fbmod_config()” dans le fichier “fb_modeles_pipelines.php”. Dès lors il devenait impossible de se connecter, j’avais donc deux solutions, soit supprimer le plugin modeles_facebook dans le répertoire plugins par ftp, soit résoudre le problème directement en éditant et en modifiant les fichiers qu’il fallait en ftp (j’étais pas chez moi). J’ai choisi la seconde solution !

    J’ai fait très simple, comme la fonction fbmod_config() n’était pas définie, j’ai cherché dans quel fichier elle était définie bien évidemment, en l’occurence c’était dans le fichier “fb_modeles_options.php” au même niveau. Et j’ai rajouté enfin en entête (en dessous de “<?php” bien sûr) du fichier “fb_modeles_pipelines.php” un “require_once(’fb_modeles_options.php’);” qui a donc tout résolu !

    J’espère avoir bien expliqué les circonstances et la solution trouvée sur le moment...

    Merci pour ce joli plugin.

    Reply to this message

  • Bien joué ! :)

    Reply to this message

  • Patrick89

    Bonjour et merci pour ce plugin très intéressant.

    A votre avis, est-il possible de l’utiliser sur un site Zpip, sans toucher aux squelettes standards, mais en ajoutant les modèles à une noisette “texte libre” par exemple. Si oui, quelle syntaxe utiliser ?

    Merci d’avance.
    Patrick

    Reply to this message

  • 2

    Bonjour j’utilise le plugin “sarka-spip” et je me demande ou il faut inserer le code :

    [(#MODELEfb_like_boxhref=#FBMODurl_page)]

    j’ai essayé dans plusieurs page mais rien ne s’affiche ....
    je voudrais le mettre dans les articles

    il faut que je l’insère dans le repertoire “/squelettes-dist/” ou dans les noisettes de sarka-spip ?

    • Salut,

      Je ne connais pas le squelette Sarka-SPIP mais à première vue dans le code, je dirais que tu dois ajouter le code du modèle FB dans l’un des modèles des pages d’articles (dans “noisettes/article/...” dans le plugin).

      Si rien ne s’affiche, fais les vérifications suivantes:
      -  assure-toi d’être bien connecté (si tu développes en local), le plugin inclus du contenu directement généré par Facebook,
      -  recalcule la page,
      -  configure le pluin (c’est normalement optionnel).

      Voilà, reviens poster ici si ton problème persiste.

    • J’ai essayé de le placer dans plusieurs fichiers (dans noisettes/article/...)
      et ça me renvoi cet erreur (détecté par un autre plugin)

      erreur 1 : Argument manquant dans la balise MODELE
      erreur 2 : Filtre fb_like_boxhref=#FBMODurl_page non défini

      puis sur la page web :
      Warning: Missing argument 1 for interdire_scripts() in /mnt/154/sdd/d/5/XXX/ecrire/inc/texte.php on line 416

      le code que j’insere (trouvé dans les commentaire d’ici )
      [(#MODELEfb_like_boxhref=#FBMODurl_page)]

      En tout cas, merci de te pencher sur mon problème

    Reply to this message

  • 1
    norbi90160

    Bonjour,

    En insérant les modèles like et send ils apparaissent l’un en dessous de l’autre dans ma page.
    J’aurais aimé qu’ils soient alignés.
    Pouvez-vous me dire comment il faudrait faire ?

    • Salut,

      Chaque modèle apparaît maintenant dans un bloc div portant des classes CSS particulières (cf. section CSS de cette page) ... il te suffit donc de définir un “display:inline” ou un “float” pour ces blocs.

      Disponible dans la version 0.15 (version de ce matin, il faut donc mettre le plugin à jour).

      ++ P.

    Reply to this message

  • Bonjour à tous j’ai réussi à ajouter le bouton like à mes pages articles, sur les articles ou je n’ai que du texte cela fonction très bien il réupère le titre de l’article et tout et tout ex : http://scout.altkirch.free.fr/spip.php?article37

    Par contre dans les articles qui n’on pas que du texte il maffiche les balise méta que j’ai défini pour le site ex : http://scout.altkirch.free.fr/spip.php?article111

    Comment puis je faire pour résoudre ce problème

    PS : j’utilise un éditeur wspig (ck-editor), je ne sais pas si ca joue

    En attendant des réponses de votre par

    Cordialement

    Reply to this message

  • 2

    Bonjour,

    J’ai un petit souci qui me laisse perplexe. J’ai un site où le plugin fonctionne parfaitement et un autre où Facebook donne une erreur au moment où l’usager enregistre un like.

    Il me dit: “The page failed to provide a valid list of administrators. It needs to specify the administrators using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.”

    Pourtant, l’implantation est identique sur les deux. Quelqu’un a une idée?

    • Salut Martin,

      Vu le message d’erreur renvoyé par Facebook, il y a deux origines possibles :
      1)- tu n’es pas désigné comme étant l’administrateur de la page en question sur FB
      2)- il manque les tags FB en en-têtes de tes pages : est-ce que tes squelettes utilisent bien la balise #INSERT_HEAD sur les deux sites ?

      Donc pour régler ton problème :
      -  sur la page de configuration du plugin, vérifie que tu aies bien un “Page ID” et un ou plusieurs “User ID” et qu’ils soient valables,
      -  puis vérifie qu’ils soient bien présents en info “open graph” dans l’en-tête de tes pages ...

      Sinon, le plus simple serait encore de pouvoir observer les pages en question ;-)

      Tiens-moi au courant si tu as toujours des erreurs ...
      ++ PiWi

    • Salut et merci de cette réponse rapide,

      J’ai en effet réussi à faire fonctionner le tout en ajoutant mon fb:admin dans les metas sur fraicheurdeco.com (ou le problème se présentait). Je reste cependant perplexe puisque sur ndgpanthers.com, je n’ai pas ces métas et je n’ai jamais constaté ce comportement.

    Reply to this message

  • 2

    Bonjour et merci pour cet outils très pratique

    J’ai un soucis lorsque plusieurs articles apparaissent directement dans une rubrique avec l’option coments.
    les commentaires se répètent dans les différents articles alos qu’il ne devraient figurer qu’en dessous de l’article commenté et pas sous tous les articles
    http://www.koukouli.fr/-blog-.html
    ici le site en question..

    j’ai bien essayé

    1. <INCLURE {fond=fb_comments} {id_article} />

    mais cela ne semble pas fonctionner...
    une idée?

    Merci

    • Salut Camaleon,

      Effectivement, je n’avais pas prévu le cas où on passait un id_objet directement ... un oubli de ma part. C’est maintenant chose faite, disponible dans le zip demain matin (version 0.17.0 du plugin).

      En attendant, tu peux ajouter l’argument “href” comme ceci :

      1. <INCLURE{fond=fb_comments}...{href=#URL_ARTICLE|url_asbolue}.../>

      Ca devrait résoudre ton problème avant la solution définitive de demain ;-)

      ++PW

    • Merci Piero pour la réponse rapide!

      c’est parfait, cela fonctionne...

      Cordialement

    Reply to this message

  • 4

    Bonjour,

    Tout d’abord merci pour ce plugin il est vraiment très utile :)

    Par contre je me suis heurté à un petit souci de mise en place de la Like Box (fb_like_box).

    En effet, même en renseignant correctement le champs URL de page ou profil dans la configuration CFG, ça ne fonctionnait pas.

    En fouillant dans le code du model, je me suis aperçu que le modèle prennait en parametre href l’url courante #SELF.

    De ce fait, même si on renseigne le champs et qu’on inclu le model comme ceci :
    [(#MODELE{fb_like_box})], ça ne fonctionne pas car le système facebook va chercher notre url courante et bien entendu aucun page facebook n’a cette URL.

    Mais j’ai trouvé la parade !

    Il suffit d’indiquer au modèle d’utiliser l’url qu’on a spécifié dans la configuration CFG comme ceci :

    [(#MODELE{fb_like_box}{href=#FBMOD{url_page}})]

    Voilà, j’espère que ça aidera du monde :)

    Bonne continuation et encore merci pour cette contrib !

    • Salut,

      Tu as tout à fait raison ... c’est un oubli de ma part, que je viens de régler. Dans le zip demain matin.

      Merci pour le retour et les recherches ;-)

      ++ PiWi

    • De rien c’est l’esprit de la communauté c’est normal ^^.

      Merci pour la mise à jour en tout cas, bonne continuation.

    • Bonjour,
      est-ce qu’il est possible de ne pas afficher le “stream” et le “show_faces” du modèle like_box ?
      Il n’y a pas ces options dans la configuration du plugin.

    • Salut,

      En fait si, ces options existent : page références.

      @+

    Reply to this message

  • 3

    hauteur de la iframe j’aime

    Comment arriver à voir l’intégralité de la iframe quand elle se déploie pour ajouter des commentaires ?
    Sur tous les sites où je l’ai installée, elle est toujours tronquée à une hauteur trop petite (autour des 40 px)

    • Salut,

      En utilisant l’attribut “height” dans l’appel du squelette peut-être :

      1. [(#MODELE{fb_like}...{height=120})]

      Sinon, il va me falloir une copie d’écran et le squelette pour aller plus loin ;-)

    • Voilà une partie du squelette et le résultat est dans http://www.inpulsebikes.com/spip.php?article155 par exemple.

      <BOUCLE_article(ARTICLES){id_article}>
      	<BOUCLE_auteur(AUTEURS){id_article} {0,1}>
              <div class="post" id="post-62">
                  <div class="title">
                      [<h2>(#TITRE)</h2>]
                      <div class="postmeta">
                          <span class="author"><:poste_par{auteur=#NOM}:> [(#DATE|affdate)]</span> 
      			        <div class="postmetaline"></div>
                      </div>
                  </div>
              </div>
       
              <div class="entry">
                  [(#TEXTE|image_reduire{580,0})]
              </div>
       
              <div class="ajax">
                  [(#REM) Facebook ]
                  [(#MODELE{fb_like} {height=120})] 
              </div>
       
          </BOUCLE_auteur>
      </BOUCLE_article>

      En pièce jointe la copie d’écran de la zone tronquée :

    • Salut,

      Tu as réglé le problème à ce que je vois non??

      Sur ta page, chez moi ça sort nickel ...

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom