SPIP-Contrib

SPIP-Contrib

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

285 Plugins, 197 contribs sur SPIP-Zone, 252 visiteurs en ce moment

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

Modèles Facebook

28 juin 2011 – par PieroWbmstr – 98 commentaires

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

Dernière modification de cette page le 28 juin 2011

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 28 janvier à 09:38, par Turlututu En réponse à : Modèles Facebook

    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

  • Le 19 janvier à 10:14, par Ospeleo En réponse à : Modèles Facebook

    bonjour,

    petit correctif à faire sur le modèle insert_head_og.html pour la 1.22.0.

    En effet, dans les pages en anglais, le meta tag og:locale généré est en_EN

    Or, ceci n’est pas compris par fb. Les chaines valides sont en (tout court), en_US, en_GB, en_ZA...
    (voir http://www.roseindia.net/tutorials/...

    Dans l’attente que le choix du pays soit proposé comme option cochable (au niveau du plugins, ou de spip, carrément ), j’ai modifié le modèle ainsi :

    1. [ <meta property="og:locale" content="(#LANG)_][(#LANG|replace{en, US}|strtoupper)" />]

    ça ne change rien pour toutes les langues autres que l’anglais et Facebook ne me pose plus de problème :-)

    Répondre à ce message

  • Le 22 janvier 2015 à 12:25, par PhDG En réponse à : Modèles Facebook

    J’utilise SPIP 2.1.26 et j’ai installé ce plugin en mode iframe.
    Avec le modèle fb-like, le partage d’un article inclut automatiquement l’adjonction d’une image prise au hasard sur mon site internet. Celle-ci n’est donc pas toujours appropriée. Comment faire pour définir l’image qui doit être incorporée ou pour empêcher l’adjonction d’une image ?

    • Le 16 décembre 2015 à 15:41, par Christophe Noisette En réponse à : Modèles Facebook

      personne n’a une piste de réflexion par rapport à cette question. J’ai exactement le même souci. Facebook prend au hasard une image de la page, et l’impose à ceux qui veulent « partager » l’article sur leur page FB. Comment faire pour soit imposer une image (#LOGO_ARTICLE), soit faire qu’on ait la flèche qui va d’une image à l’autre, comme c’est le cas sur un compte facebook...
      Amitiés
      Christophe
      _

    • Le 17 décembre 2015 à 07:50, par Mist. GraphX En réponse à : Modèles Facebook

      Hello,

      Non facebook ne prends pas une image au hazard : il prend ce qui est spécifié par les balises `meta:ogg`

      une explication ici et des balises : <http://davidwalsh.name/facebook-met...>

      ici un outil pour débugger : <https://developers.facebook.com/too...>

      ce qu’est censsé faire le plugin facebook model, mais je l’ai toujours fait a la mano dans mes squelette

      cependant sur certains cas, il arrive que certaine images ne passe pas lors du partage, facebook prend alors l’image suivante dans la page... j’ai jamais trop compris pourquoi, mais ça arrive, ptet du au cache de la noisette incluse dans le head, bref aléatoirement il arrive a mes rédacteurs que un article fraichement publié ne propose pas la bonne image au partage. Généralement le temps que j’arrive pour résoudre le « BUG » (super grave comme problème !!! faut dire), je clic et ça marche ^^.

    • Le 19 janvier à 10:23, par Ospeleo En réponse à : Modèles Facebook

      C’est le but de ce plugin !

      Le plus simple est de mettre un logo à votre article. Ce plugin va utiliser CE logo pour facebook.

      ...et ne pas oublier d’insérer dans votre squelette, entre les balises head

      1. #MODELE{insert_head_og, env}

      ps : cela ne fonctionne pas sous sarkaspipr, Zpip, etc...

    • Le 19 janvier à 10:42, par Mist. GraphX En réponse à : Modèles Facebook

      Oui c’est vrai que d’origine le modèle ne prend en charge QUE le LOGO, il faudrait prévoir un fallback pour ceux qui n’utilise pas le logo d’objet.

      intégrer la BALISE #LOGO comme expliqué dans les commentaire de cet article : http://romy.tetue.net/logos-automatiques-articles-SPIP

      pourrait répondre au besoin : si pas de LOGO article on cherche celui de la rubrique, sinon on prend un document, sinon le logo du site , sinon une image par défaut... genre en créant la balise en question #LOGO_OG_META et le modèle associé.

      ps : cela ne fonctionne pas sous sarkaspipr, Zpip, etc...

       ? pourquoi .... j’utilise aussi bien sur des sites Z que autres

    • Le 19 janvier à 10:58, par Ospeleo En réponse à : Modèles Facebook

      oui, ca fonctionne sous Zpip, mais j’ai dû batailler pour trouver où intégrer la balise.


      Je ne connaissais pas la proposition de romy tetue sur les logo automatiques.

      Personnellement, j’ai remplacé la ligne d’insertion du logo dans le code de insert_head_og.html par une petite boucle pour générer quand même une image si pas de logo à l’article.
      Donc :
      si l’article a un logo, on le choisit
      sinon, si l’article a des documents images, on en prend un
      sinon, si la rubrique parente a un logo, on l’utilise
      sinon, logo du site

      1. <BOUCLE_logo_article_og(DOCUMENTS){id_article}{extension==jpg|png|gif}{0,1}>
      2. [ <meta property="og:image" content="(#LOGO_ARTICLE|extraire_attribut{src}|url_absolue||sinon{#URL_DOCUMENT}|image_reduire{1200}|extraire_attribut{src}|url_absolue)" />]
      3. </BOUCLE_logo_article_og>
      4. [ <meta property="og:image" content="(#LOGO_ARTICLE_RUBRIQUE||sinon{#LOGO_SITE_SPIP}|extraire_attribut{src}|url_absolue)" />]
      5. <//B_logo_article_og>

      Télécharger

    Répondre à ce message

  • Le 12 janvier à 16:58, par Yannick En réponse à : Modèles Facebook

    Bonjour,
    J’ai téléchargé et activé le plugin Modèles Facebook. J’ai configuré les modèles mais je ne vois pas comment intégrer le modèle fb_like sur mon site.
    Quelqu’un peut-il m’aider SVP ?
    SPIP 2.1.12
    Merci d’avance

    Répondre à ce message

  • Le 1er juin 2015 à 22:32, par bruno31 En réponse à : Modèles Facebook

    Bonjour

    Une suggestion d’amélioration en apparence anodine mais ô combien importante dans un contexte web dans lequel le SSL se généralise à grande vitesse :
    il serait judicieux de mettre les liens vers les scripts FB en « https » dans les modèles. C’est pas cher et cela évite d’avoir des gros messages d’avertissement sur le navigateur.

    Répondre à ce message

  • Le 4 mars 2015 à 16:01, par jmpasso En réponse à : Modèles Facebook

    Bonjour
    Merci pour ce plugin, que j’utilise tout juste intégré à Escal...
    mais le problème c’est que les boutons facebook ne s’affichent pas sur tous les navigateurs, j’utilise principalement Firefox avec qui ça marche, voir en pied de page ici www.lemondedecesar.org mais rien n’apparait avec IE, Safarie... pourtant le code est bien inséré mais ne s’affiche pas
    Quelqu’un a t-il rencontré ce problème, quelle est la solution ?
    Merci d’avance pour votre aide
    Cordialement
    JM

    Répondre à ce message

  • Le 7 février 2015 à 09:45, par Jo Arb En réponse à : Modèles Facebook

    Bonjour
    Je vous remercie pour ce plugin
    cependant je rencontre un soucis ; avec #MODELEfb_like , le lien qui s’affiche sur fb est le lien du site et non de l’article et l’introduction correspond toujours à un même article du site par contre lorsque je clique pour lire l’article en entier je tombe bien sur l’article courant...
    je n’ai pas d’idée...

    Pour tester...
    http://www.arberet.fr/

    Merci pour votre aide
    Bonne journée

    Répondre à ce message

  • Le 9 janvier 2015 à 15:18, par Philippe G. En réponse à : Modèles Facebook

    Bonjour,
    Je voudrais diminuer la largeur par défaut de l’affichage du plugin, et je ne vois pas où cela peut se gérer.
    Merci de vos lumières !
    Cordialement,
    Philippe G.

    • Le 13 janvier 2015 à 22:21, par PieroWbmstr En réponse à : Modèles Facebook

      Bonsoir,

      Tu peux gérer la taille en définissant les attributs « width » et « height » des balises :

      1. <fb:like-box
      2. width="226"
      3. height="400"
      4. ...
      5. ></fb:like-box>

      Télécharger

    • Le 14 janvier 2015 à 13:48, par Philippe G. En réponse à : Modèles Facebook

      Ah oui, effectivement ! Merci !

    Répondre à ce message

  • Le 24 septembre 2014 à 14:53, par Thierry G. En réponse à : Modèles Facebook

    Bjr,
    Je ne comprend pas ou je dois ajouter mes MODELES dans le code du squelette !!
    Par exemple dans la page article, j’ai essayé à divers endroits mais ca bug systématiquement, ma page est déformatée.
    Pouvez vous m’indiquez ou placer cette noisette ?
    Merci

    • Le 25 septembre 2014 à 15:36, par Thierry G. En réponse à : Modèles Facebook

      Je suis débutant en html ou autre java, ceci expliquant peut être cela ??
      Je place ceci aprés le texte et avant le portfolio, mais mon css n’a pas l’air d’apprécier,
      pourquoi ?
      [(#REM) Incrustation des boutons facebook ]
      [(#MODELEfb_like)]

    • Le 25 septembre 2014 à 17:19, par PieroWbmstr En réponse à : Modèles Facebook

      Salut Thierry,

      Si je me base sur le squelette squelettes-dist/article.html de la version SPIP courante (3.0.17), pour inclure le modèle « fb_like » il faut modifier le squelette de la façon suivante (lignes 38 à 42 du fichier original) :

      Si ça ne résout pas ton problème, peux-tu joindre le code de ton squelette et une copie d’écran du résultat ?

      @+

    • Le 26 septembre 2014 à 10:24, par Thierry G. En réponse à : Modèles Facebook

      Merci pour ton aide.
      J’ai fais exactement ce que tu me demandais à partir du squelette vierge de « article »

      1. [<div class="#EDIT{chapo} chapo surlignable">
      2. (#CHAPO|image_reduire{500,*})</div>]
      3. [<div class="#EDIT{texte} texte surlignable clearfix">
      4. (#TEXTE|image_reduire{500,*})</div>]
      5.  
      6. [(#REM) Incrustation des boutons facebook ]
      7. [(#MODELE{fb_like,layout=box_count,show_faces=non})]
      8.  
      9. [<hr /><p class="#EDIT{hyperlien} hyperlien">
      10. <:voir_en_ligne:> : <a href="(#URL_SITE)">
      11. [(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
      12. [<div class="#EDIT{ps} ps surlignable"><hr />
      13. (#PS|image_reduire{500,*})</div>]

      Télécharger

      Ci joint l’effet qui apparait aprés cette modif.
      Les boutons semblent fonctionner correctement, mais l’affichage
      est mauvais.
      Par contre si, ensuite, j’écrase le fichier article avec celui d’origine, je ne
      retrouve pas immédiatement ma page correctement formaté !!!
      (même avec un recalculer cette page). Ma page est déformaté
      par contre les boutons FB ont disparus.

      Je suis obligé de passer par un vidage du cache.

      JPEG - 125.6 ko
    • Le 26 septembre 2014 à 10:25, par Thierry G. En réponse à : Modèles Facebook

      L’affichage correcte

      JPEG - 170.4 ko
    • Le 26 septembre 2014 à 11:37, par Thierry G. En réponse à : Modèles Facebook

      Lorsque j’ai remis en place le squelette article par défaut, je repasse par cet affichage, je clique dessus et tout rentre dans l’ordre !!!

      JPEG - 131.6 ko
    • Le 26 septembre 2014 à 11:52, par Thierry G. En réponse à : Modèles Facebook

      Je pense que ZPIP y est pour beaucoup

    • Le 26 septembre 2014 à 14:40, par Thierry G. En réponse à : Modèles Facebook

      OK, j’ai compris, mais pas encore trouvé.
      Le squelette article n’est plus celui de SPIP Distr mais celui du plugin ZPIP ...
      il y en a 4, suffit de trouver le bon.
      @+ ....

    • Le 29 septembre 2014 à 09:16, par Thierry G. En réponse à : Modèles Facebook

      TUTO ZPIP :
      Le fichier à modifier se trouve dans le répertoire « /plugins/zpip_v1/contenu »
      Il est impossible, comme dans le cas de la distri SPIP, de créer un répertoire « squelettes » à la racine et de le copier inside pour le modifier.
      Pour le style, modifier le fichier « fb_modeles.css » du plugin MODELE_FACEBOOK

    Répondre à ce message

  • Le 1er octobre 2013 à 16:02, par Théo 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 Théo 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 2014 à 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 2014 à 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

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

  • Plugin séances

    10 octobre 2010 – 83 commentaires

    Dans la gestion d’événements, il arrive d’avoir à mettre en rapport un spectacle (film, concert ou autre), un lieu et une date. Il est alors possible d’envisager plusieurs modes de présentation : pour un spectacle donné, les dates et lieux de celui-ci, (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 1771 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Passer un plugin SPIP 3.0 vers SPIP 3.1

    6 février – commentaires

    SPIP 3.1 est une version de maintenance de SPIP 3.0, se reporter à l’article pour le détail complet. La mise à jour des bibliothèques Javascript embarquées et certaines évolutions peuvent faire qu’un plugin compatible SPIP 3.0 ne fonctionne plus ou (...)

  • Plugin Bank

    12 juin 2015 – 29 commentaires

    Le plugin Bank prend en charge l’interface technique de paiement avec de nombreux prestataires de paiement par Carte Bleue, SEPA… Il prend également en charge la conservation de l’historique des transactions de paiement et de leur état et offre une (...)

  • Referer Spam

    23 janvier – commentaires

    Le but de ce plugin est d’exclure les liens entrants frauduleux des statistiques à l’aide d’une liste noire. Afin de lutter contre le referer spam, qui peut rapidement rendre inutilisable les statistiques de visites fournies par spip, ce plugin (...)