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 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 :

[(#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 :

[(#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

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

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://git.spip.net/spip-contrib-e...

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....

Notes

[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.

[4Exemple en ligne : http://demo-spip3.ateliers-pierrot....

[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/.

Discussion

49 discussions

  • Bonjour, ce plugin sera-t-il mis à jour pour la version 4 de SPIP ?

    Répondre à ce message

  • bonjour
    je suis aussi nul que markouch avec FB... mais il me semble que mon problème doit quand même être du coté spip..

    l’affichage de la page de doc me génère des erreurs « Aucun squelette inc-head n’est disponible... » (plugins/auto/fb_modeles/v/fb_modeles.html ligne 3) , et « Aucun squelette inc-entete n’est disponible »... (idem ligne 10), et « Aucun squelette inc-rubriques n’est disponible »... (ligne 14) et enfin « Aucun squelette inc-pied n’est disponible ».. (ligne 22),
     ??
    merci d’avance d’une piste
    pam

    Répondre à ce message

  • Bonjour, ce plugin est sûrement parfait, mais il m’est impossible de l’utiliser : je suis nul avec Facebook qui est une vraie usine à gaz ... Je ne comprends pas pourquoi la page d’exemples fournies avec le plugin me montre bien le résultat des différents modèles, alors que, en les mettant exactement de la même façon sur mes pages, rien ne se passe, au-delà du modèle fb_like qui m’affiche bien les deux boutons mais rien en plus, contrairement à la page d’exemples.
    Peut-être le plugin est-il incompatible avec le plugin Metas+ ?
    Juste une petit piste serait très sympa, merci.
    Marc

    Répondre à ce message

  • 4

    Bonjour,

    On a eu une série d’avertissement concernant des changements d’API (Graph v2.3) chez Facebook auxquelles je n’ai pas vraiment fait trop attention mais là aujourd’hui je constate qu’on a un souci sur le bouton « like » alors que le bouton « partage » semble toujours fonctionner ...

    Explications à partir de cette page ...

    Est-il envisagé une évolution de ce plugin pour couvrir cette évolution ... ? quelqu’un a-t-il regardé les implications de tout ça sur ce plugin ?

    Sinon je me plongerai dans la doc pour essayer de faire quelque chose. Perso ça m’énerve quand les multinationales décident d’un changement qui implique bcp de travail en bas de l’échelle, genre la théorie du ruissellement inversé :-( le genre de truc difficile à expliquer à des clients en plus, mais bon s’ils tiennent à FB ...

    • Bonjour,
      En effet je viens d’installer le plugin et le problème est tel que décrit.
      Personnellement je n’ai pas les connaissances pour faire le nécessaire...
      Avez-vous « plongé dans la doc » ?
      Merci de votre réponse

    • Non je n’ai pas encore regardé, j’espérais une réponse de l’auteur, pas forcément une solution mais une réponse, car ce qui peut prendre 1h à l’auteur peut en prendre 8 ou 16 quand on part de zéro ... lui saurait dire tout de suite si c’est dû à la nouvelle API ou si c’est complètement autre chose ...
      Va falloir que je m’y penche et j’ai pas trop de temps .. mais votre réponse me conforte dans l’idée que ça vient du plugin et/ou de l’API, pas de ma mise en place. Je suis juste curieux que pas plus de monde n’ait le problème.
      Pierre

    • Bonjour,
      J’aurais été intéressé par ce plugin et ses fonctionnalités, mais avant de tester, avez-vous pu corriger les bugs que vous aviez identifiés ?
      Merci

    • Pierrot

      Bonjour,
      Non je n’ai pas repris ce problème, pas eu le temps ces derniers mois ...
      Pierre

    Répondre à ce message

  • 5

    Bonjour,

    J’ai utilisé le Model « fb_like_box », il s’affice bien sur tout les navigateurs à l’exception de Firefox. Quelqu’un peut aider svp !!! Merci.

    • Salut Amire,

      Il va falloir un peu plus d’infos pour te répondre :
      -  as-tu un message d’erreur ? (un screenshot de la console pourrait aider)
      -  comment l’as-tu inséré dans ton squelette ?
      -  peut-on voir ça quelque part en live ?

      @+

    • Merci PieroWbmstr,

      Non, je n’ai pas de message d’erreur !

      J’ai inséré dans le pied « footer.html » dans un div ,

       #MODELE{fb_like_box}

      Tu peux jeter un oeil ici et faire la différence entre les navigateurs.

      Merci d’avance

    • Bonjour

      Je confirme le souci. Le modele fb_like s’affiche bien sur chrome mais pas sous firefox.

    • Bonjour,

      Tout pareil, rien ne s’affiche dans Firefox, ok sous chrome.

    • Dans la console de Firefox 52, je reçois :
      La ressource à l'adresse « https://connect.facebook.net/fr_FR/all.js#xfbml=1 » a été bloquée car la protection contre le pistage est activée.
      même si je désactive l’anti-pistage dans les options.

    Répondre à ce message

  • Hello,
    I used this plugin for several years. In the recent version I see a problem with #MODELEfb_comments.
    It doesn’t show old comments which I can see them in the comment moderation section on facebook. In my case, it only shows two same comments in all article pages, and nothing more.
    I checked Identifiers, and all of them are correct.
    Can you please let e know how to fix it ?
    Thank you

    Répondre à ce message

  • 1
    Christophe Noisette

    Bonjour
    tout d’abord merci pour ce plugin.
    J’ai cependant un souci et une question.
    Le souci est que je n’arrive pas à gérer correctement la phrase « soyez le premier de vos amis à indiquer que vous aimez ça ».
    J’aimerais que la phrase s’affiche en dessous des boutons sur une taille définie.
    mon code est

    [(#MODELE{fb_like, width=150}{id_article})]

    Si quelqu’un a une idée...

    Ma question, maintenant
    J’aimerais que lors qu’on partage l’article du site sur facebook, le partage prenne en compte l’événement accroché à l’article... Je n’ai pas envie de mettre la date du concert / spetacle dans le titre ou le chapo de l’article car j’ai un agenda qui fonctionne déjà avec les événements et cela serait donc redondants.

    Le site en question est www.centjoursdefete.eu

    Merci et bon dimanche,
    Christophe

    • Salut Christophe,

      Je ne vois pas le bouton sur ton site, est-ce qu’il est visible sur des pages précises ?
      Pour la gestion de la phrase, comme ça à vue de nez, je dirai que ça va être compliqué à gérer :( S’il y a une classe CSS particulière quand elle est affichée, peut-être que tu peux jouer avec ?

      Pour ta question, si je comprends bien tu veux en fait qu’on partage un évènement depuis la page d’un article, c’est ça ? Si c’est bien ça, tu peux remplacer la balise normale du header par :

          #MODELE{insert_head_og, env, id_evenement=XXX}

      à adapter au besoin évidemment :)

      @+

    Répondre à ce message

  • 1

    Je constate un « souci » potentiel sur le modèle insert_head_og.html.

    Dans mon cas on publie des articles sur un site, articles qui sont ensuite publiés sur un mur Facebook. Si j’ai bien compris le mécanisme, Facebook affiche les données qui ont été sélectionnées dans mon squelette par ce modèle, un titre, un type, une url, etc. grace à des balises meta avec des attributs « property » comme « og:title », « og:type », etc ...

    Jusque là ok. Par contre ce que je constate c’est que dans mon cas (peut-être est-il spécifique) le modèle génère au moins 2 jeux de balises meta complets car dans mon squelette article.html, j’ai à la fois un #ENVid_article et un #ENVid_rubrique, donc le modèle génère par ex 2 « og:title » et comme c’est du HTML, bien évidemment c’est le dernier qui est pris en compte (donc celui de la rubrique), et celui de la rubrique est bcp moins pertinent que celui de l’article (dans mon cas).

    La solution simple pour moi est de supprimer la boucle qui génère les metas pour la rubrique, à priori ça règle le souci, plus qu’un seul jeu de meta.

    Néanmoins si des fois j’avais besoin de ces metas pour une rubrique cela me génerait. Je me demandais si cette architecture était voulue, s’il y avait quelque chose qui m’échappe avant que je taille dans le code :-) ?
    Je peux aussi mettre la boucle rubrique dans la partie alternative de la boucle des articles ... (qui en passant s’appelle BOUCLE_artcile_og au lieu je suppose de BOUCLE_article_og).

    • Salut Pierrot,

      Désolé, je réagis un peu tard :(
      Ce que tu remontes est étrange, il ne devrait pas y avoir une version des tags pour chaque type d’entité mais bien pour l’entité de la page seulement (article OU rubrique). Peut-être utilises-tu un squelette particulier ? Qui n’aurait qu’une seule boucle unique pour toutes les pages par exemple ?
      Dans ce cas, ta dernière idée était la bonne : appeler le noisette qui génère les méta Facebook des rubriques dans la partie alternative de la boucle articles.

      N’hésite pas à revenir vers moi si tu as toujours des soucis ! (je répondrai plus vite promis)

      @+

    Répondre à ce message

  • Bonjour :

    J’ai un problème avec la likebox, elle apparait sur mon site uniquement lorsque le navigateur avec lequel on surf, est connecté à facebook. Dès que le navigateur n’est pas connecté à facebook, ma like box ne s’affiche pas.

    Or ma page n’a aucune restriction d’age.

    Cordialement

    Répondre à ce message

  • 1
    Turlututu

    Bonjour,

    Le lien vers le site démo est HS (500) (note 4)

    J’aimerai bien voir le résultat des modèles, surtout « activity », c’est possible ou bien ?

    Merci ! :-))

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom