SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano

279 Plugins, 195 contribs sur SPIP-Zone, 55 visiteurs en ce moment

Accueil > Interactivité, échanges > Recommandation Sociale > Modèles Facebook > Modèles Facebook

Modèles Facebook

28 juin 2011 – par PieroWbmstr – 73 commentaires

23 votes

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

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

Télécharger

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

  1. <div class="fb_modeles fb_send">
  2. ... contenu ...
  3. </div>

Télécharger

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

PNG - 50.7 ko
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].

PNG - 69.4 ko
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

http://zone.spip.org/trac/spip-zone...

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

Voir en ligne : http://plugins.spip.net/fb_modeles

P.-S.

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

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

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 1er octobre 2013 à 16:02, par Lionel En réponse à : Modèles Facebook

    Et bien je n’ai pas réussi à mettre Facebook sur mes pages ! :-(

    Dans mon dossier « squelettes », j’ai ouvert le fichier « article.html »avec Smultron et là je ne sais où placer la balise : #MODELEinsert_head_ogenv

    Juste après la balise « head » ou juste avant sa fermeture « /head » ?

    Merci d’avance de m’aider, je ne comprends plus très bien…

    • Le 2 octobre 2013 à 17:33, par Lionel En réponse à : Modèles Facebook

      J’ai fait les deux, juste après la balise « head » et juste avant sa fermeture « /head » mais ça ne marche pas :(

    • Le 8 mars à 13:15, par PieroWbmstr En réponse à : Modèles Facebook

      Bonjour Lionel,
      je réponds très très tard mais une réponse semble intéressante pour les autres qui se poseraient la question (ou toi-même d’ailleurs si tu n’as toujours pas implémenté les Open Graph).

      Le modèle des balises Open Graph doit être placé à l’intérieur des balises <head> ... </head> dans l’en-tête des pages car il s’agit d’infos de type « meta ».

      Le plus simple est de retenir le schéma suivant (juste avant la balise fermante </head>) :

      1. [(#MODELE{insert_head_og}{env})]
      2. </head>

      Télécharger

      De plus, lorsque vous venez d’insérer ce bout de code dans vos squelettes HTML, il est nécessaire de « recalculer » la page pour vider le cache existant de SPIP. Cela se fait simplement en cliquant sur le bouton « Recalculer cette page » qui apparaît en haut des pages publiques lorsque vous êtes connecté à l’admin, ou encore en ajoutant le paramètre suivant à l’URL : ?var_mode=recalcul.

      J’espère que c’est assez clair ...

    • Le 21 mai à 10:26, par Lionel En réponse à : Modèles Facebook

      Avec aussi du retard, merci ;)
      J’ai, tout simplement, mis une icône FB et un lien vers le groupe FB en question.

    Répondre à ce message

  • Le 11 octobre 2013 à 04:39, par Renée Picard En réponse à : Modèles Facebook

    J’utilise #MODELEfb_like_box et cela génère des erreurs à la validation HTML du W3C :
    Element name fb:like-box cannot be represented as XML 1.0.
    >
    Element fb:like-box not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
    >
    The scrolling attribute on the iframe element is obsolete. Use CSS instead.
    …overflow:hidden ; width:226px ; height:400px  allowTransparency= »true">

    The frameborder attribute on the iframe element is obsolete. Use CSS instead.
    …overflow:hidden ; width:226px ; height:400px  allowTransparency= »true">

    The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
    …overflow:hidden ; width:226px ; height:400px  allowTransparency= »true">

    Je ne sais pas comment corriger cela.
    Merci
    RP

    • Le 8 mars à 13:45, par PieroWbmstr En réponse à : Modèles Facebook

      Tant que j’y suis, je réponds aussi à ce message.

      Les balises facebook ne sont pas valides en HTML ... donc impossible de biaiser ces erreurs, sauf en retirant complètement les balises <fb:....
      Merci facebook :(

    Répondre à ce message

  • Le 15 septembre 2013 à 18:12, par Renée Picard En réponse à : Modèles Facebook

    Bonjour
    J’utilise #MODELEfb_like_box. J’essaie de changer le css pour avoir une bordure #f7f7f7.
    J’ai essayé par le cfg du plugin, par le css du plugin, par perso.css rien y fait ?
    http://www.centrefemmesdelamitis.ca/
    Merci de votre aide

    • Le 8 mars à 13:43, par PieroWbmstr En réponse à : Modèles Facebook

      Bonjour Renée,

      Désolé je réponds vraiment très tard :(

      En fait le HTML injecté par Facebook peut être personnalisé en utilisant des sélecteurs CSS précis (toute la suite des ID ou classes jusqu’à l’objet à personnaliser) mais c’est assez compliqué ... Une personne qui connaît les règles CSS pourrait t’aider sur la question.

      En regardant le HTML de la page d’accueil de ton site, j’ai pu voir que tu utilisais bien le modèle « fb_like_box » et ça a l’air de fonctionner. Par contre, tu as une erreur HTML et je crois savoir d’où ça vient :

      1. // dans le modèle, tu as dû modifier la ligne :
      2. #SET{border_color,#ENV{border_color,#FBMOD{border_color_def}}}
      3. // par:
      4. #SET{border_color,#ENV{border_color,#F7F7F7{border_color_def}}}

      Télécharger

      Cela ne peut pas fonctionner correctement puisque FBMOD n’est pas une couleur mais bien l’appel à une balise SPIP ... tu devrais donc remettre le code #F7F7F7 dans la configuration du plugin et remettre le modèle comme il était (avec FBMOD) ... cela ne modifiera pas le rendu je pense mais corrigera au moins le HTML :

      1. // pour l'heure, tu as :
      2. <fb:like-box
      3. href="https://www.facebook.com/CentrefemmesMitis"
      4. width="226"
      5. height="400"
      6. show_faces="true"
      7. header="false"
      8. stream="true"
      9. border_color="#F7F7F7{border_color_def}"
      10. ></fb:like-box>
      11.  
      12. // alors que tu devrais avoir :
      13. <fb:like-box
      14. href="https://www.facebook.com/CentrefemmesMitis"
      15. width="226"
      16. height="400"
      17. show_faces="true"
      18. header="false"
      19. stream="true"
      20. border_color="#F7F7F7"
      21. ></fb:like-box>

      Télécharger

      Voilà, j’espère que ça peut aider ...

    Répondre à ce message

  • Le 19 novembre 2013 à 14:03, par pgiron En réponse à : Modèles Facebook

    Bonjour,
    J’ai bien installé le plugin (version SPIP3) sur un site, j’ai bien mis le code suivant         [(#MODELE{fb_like}{id_article})] dans le squelette de l’article mais rien ne s’affiche (cela s’affiche sur d’autres sites à peu près identiques).
    Une page par exemple : http://espritprovince.catholique.fr/La-fusion-c-est-comme
    Je ne comprends pas pourquoi cela ne s’affiche pas...
    Merci de tes lumières !

    • Le 21 novembre 2013 à 08:50, par pgiron En réponse à : Modèles Facebook

      je confirme que rien n’apparait et contrairement à ce que je disais plus haut, rien n’apparait non plus sur les autres sites où j’ai mis cette ligne. Il y a juste une ligne blanche à la place. J’ai testé les autres modèles, ils ne s’affichent pas non plus.
      J’ai fais quelque chose qu’il ne fallait pas ? J’ai oublié quelque chose ? Ou bien il y a un problème ?

    Répondre à ce message

  • Le 19 septembre 2013 à 11:28, par Olivier Gautier En réponse à : Modèles Facebook

    Bonjour,

    merci beaucoup pour ce plugin.
    Je vous suggère une légère modification dans les codes des modèles fb_like, fb_comments, fb_send et fb_like_box (peut-être aussi pour insert_head_og) : dans la récupération de href, vous avez placé la boucle rubriques après celle des articles et brèves.
    Or, supposons qu’on insère un de ces modèles dans un article, il prend dans un premier temps l’URL de l’article comme paramètre href, puis ce paramètre est remplacé juste après par l’URL de la rubrique contenant l’article. Du coup, les boutons facebook renvoient systématiquement sur des contenus correspondant aux rubriques et non aux articles dans le contexte d’un article, idem pour les brèves.

    Que pensez-vous de placer la boucle rubriques en première position avant les boucles articles et brèves ?

    Cordialement, Olivier Gautier.

    Répondre à ce message

  • Le 21 février 2013 à 11:57, par elm31rugby En réponse à : Modèles Facebook

    Bonjour et surtout merci. J’ai mis du temps à comprendre qu’il ne fallait pas passer le modèle dans inc-head.html, mais bien dans chaque page de squelette (article.html, mot.html, etc) et une fois fait, tout fonctionne.

    Répondre à ce message

  • Le 19 février 2013 à 20:00, par Jérémy En réponse à : Modèles Facebook

    Mes articles à peine publiés sont à 20 likes !! D’où vient le bug ?

    Bonjour,

    Comme indiqué en titre, parfois, dès la publication d’un article ce dernier affiche déjà 20 likes :
    Exemple ici : http://www.cemearhonealpes.org/vacances-loisirs-bafa-bafd/article/le-special-directeur-2013-vient-de
    Ou encore là : http://www.cemearhonealpes.org/vacances-loisirs-bafa-bafd/article/se-former-aux-bafa-avec-les-cemea

    Mais cela n’est pas systématique et je n’ai pas encore réussi à comprendre quel était l’élément déterminant...

    Y’a-t’il un endroit particulier ou je devrais creuser pour tenter de comprendre ?
    Avez-vous déjà rencontré ce bug ?

    D’avance merci pour vos éclairages éclairés !
    Cordialement,

    Répondre à ce message

  • Le 21 janvier 2013 à 19:15, par bruno31 En réponse à : Modèles Facebook

    C’est normal ou c’est un bug ?

    Bonjour et Merci pour ce plugin.

    J’ai découvert un truc bizarre : si je laisse vide le champs « URL de page ou profil » dans la config du plugin, j’arrive à faire +1 et à laisser un commentaire à partir de mon site public.

    Si je mets mon url de profil, la boite de saisie du commentaire apparait furtivement. Pas le temps de saisir quoi que ce soit.

    C’est normal ?

    Un site où ça marche : http://pergola-tonnelle.autoconstru...
    Un site où ça bugue : http://carport.autoconstruction.info

    • Le 22 janvier 2013 à 16:45, par bruno31 En réponse à : Modèles Facebook

      Du coup, j’ai vidé le champ « URL de page ou profil » car en plus de buguer, cela supprimait l’historique de +1.

    Répondre à ce message

  • Le 16 novembre 2012 à 22:24, par Jérôme En réponse à : Modèles Facebook

    Bonjour,

    J’ai installé le plug-in, ai finalement trouvé où il fallait mettre le header pour l’Open graph (dans le fichier /plugins/auto/z/v1.7.20/head/article.html pour ceux qui utilisent Zspip), le code source me parait OK, mais quand j’aime un article, c’est une image au hasard et non le logo de l’article qui est utilisée.

    Si une âme charitable pouvait jeter un œil pour voir ce qui pourrait ne pas aller, je lui en serais fort reconnaissant.

    Un article test : http://www.edufle.net/L-imparfait-et-le-passe-compose.html

    • Le 16 novembre 2012 à 23:41, par PieroWbmstr En réponse à : Modèles Facebook

      Salut Jérôme,

      C’est très bizarre, pourtant, tes infos OpenGraph demandent bien de charger le logo de l’article ... Là je ne vois pas, désolé :(

      P.

    • Le 4 janvier 2013 à 19:06, par camaleon En réponse à : Modèles Facebook

      Bonjour et merci pour ce plugin

      idem même soucis ; dans le code og:image est bien le logo mais envoyer ou j’aime c’est une image différente...
      Il semble que Jérôme ai trouvé une solution car c’est bien son logo qui s’affiche...

      si quelqu’un a une solution merci...

    Répondre à ce message

  • Le 28 novembre 2012 à 16:47, par akilo En réponse à : Modèles Facebook

    Bon après pas mal de recherche j’ai enfin compris ce qui petait mon site,

    <meta property="fb:app_id" content="<meta property="fb:admins" content="425508817492503" />" /></head>

    après avoir désactiver le plugin ouf tout revient dans l’ordre bon entre nous c’est le webmaster qui avait activer ce plugin abuser par le statut de celui ci.

    Comme je ne suis pas franchement fan de FB je vais lui expliquer comment s’en passé :P

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Critère {mots}

    6 août 2009 – 262 commentaires

    Permettre de sélectionner facilement des objets SPIP ayant un ou des mots clefs en communs.

  • TinyMCE pour SPIP

    20 novembre 2012 – commentaires

    Ce plugin permet d’utiliser l’éditeur WYSIWYG de la librairie TinyMCE pour l’édition des contenus dans l’espace privé de SPIP. L’utilisation de ce plugin modifie grandement la gestion typographique des contenus par SPIP ; pour plus d’info, lisez le (...)

  • Utilisation du plugin CSV_IMPORT

    31 mai 2008 – 67 commentaires

    Comment devenir fainéant intelligemment ou comment importer un fichier CSV dans spip sans tout casser ?

  • Numérotation rapide

    27 octobre 2008 – 22 commentaires

    Le plugin Numérotation Rapide permet d’un clic de numéroter/re-numéroter/dé-numeroter tous les articles ou sous-rubriques d’une rubrique.

  • Une lettre d’information avec SoyezCreateurs

    16 juillet 2010 – 20 commentaires

    En installant les plugins CleverMail et Facteur, il est possible d’envoyer une lettre d’information. Configuration SoyezCreateurs propose 2 squelettes dédiés à la lettre : format HTML : lettre_libre format texte : lettre_libre_txt Par défaut, (...)