HTML 5 - 7.2 : Intégrer un site à votre facebook
Facebook propose via developers.facebook.com un ensemble de plugins HTML — widgets de partage, boutons d'interaction, espaces de commentaires — permettant d'enrichir votre site web de fonctionnalités Facebook natives. Cette intégration renforce l'engagement en donnant aux visiteurs la possibilité d'interagir directement via leurs comptes Facebook, sans quitter votre page.
Accéder à la documentation et générer le code
On se rend sur developers.facebook.com et on cherche la section Social plugins ou Like button. Facebook fournit un configurateur interactif où l'on saisit l'URL de la page (par exemple bangkokcityguide.com) et on choisit les options : type de bouton (Like ou Recommend), taille en pixels, mise en page (standard ou face pile), etc. Une fois configuré, Facebook génère automatiquement deux blocs de code à copier dans le site : un script JavaScript de cadreur et un élément HTML à insérer où doit s'afficher le bouton.
Boutons et plugins disponibles
Au-delà du Like button, Facebook propose d'autres widgets : le Share button pour les partages, Comments pour une section de commentaires locale à votre site, et bien d'autres. Pour chacun, on accède au configurateur, on remplit l'URL cible, on choisit les options visuelles (couleurs, langue, nombre d'affichages), puis on récupère le code généré — un <script> unique dans le <head> et un <div> data-* dans le <body> au point d'insertion souhaité.
Important : déploiement requis
Tous ces plugins ne fonctionnent que sur un site PUBLIÉ et accessible par HTTPS. En local sur localhost:3000, aucun widget ne s'affichera. Il faut déployer le site sur Firebase Hosting (ou tout autre hébergeur) pour que Facebook puisse le valider et afficher les boutons et commentaires. Une fois en ligne, les plugins apparaissent instantanément et enregistrent les interactions (likes, commentaires) pour augmenter la visibilité du contenu auprès du réseau Facebook du visiteur.
En résumé
Cette leçon enseigne comment intégrer les plugins sociaux Facebook sur un site web HTML5 en utilisant le portail développeur Facebook. À partir de developer.facebook.com, on peut configurer et générer des éléments interactifs comme le bouton « J'aime » et la section de commentaires, en définissant l'URL cible, la largeur, le type d'affichage et les dimensions. Deux codes JavaScript doivent être copiés et intégrés à la page : un script global et le code du plugin. Important : les plugins ne s'affichent correctement que lorsque le site est déployé sur un serveur web en ligne.
Points clés
- Accéder à developer.facebook.com pour générer les codes des plugins sociaux dans la section Social plugins
- Le bouton « J'aime » (Like Button) se configure avec l'URL du site, la largeur, la disposition et la taille désirées
- Le plugin Commentaires (Comments) permet d'intégrer un système de commentaires Facebook avec un nombre de publications paramétrable
- Deux codes JavaScript doivent être copiés : un script JavaScript global et le code du plugin spécifique
- Les plugins ne fonctionnent que sur un site déployé en ligne ; aucun affichage en local ou sur un serveur de développement non accessible
Questions fréquentes
Quels plugins sociaux Facebook peut-on intégrer sur un site HTML5 ?
Les principaux plugins disponibles sur developer.facebook.com sont le bouton « J'aime » (Like Button), le widget de commentaires (Comments Plugin), et d'autres boutons de partage accessibles dans la section Social plugins.
Comment obtenir et intégrer les codes JavaScript des plugins Facebook ?
Rendez-vous sur developer.facebook.com, sélectionnez le plugin souhaité, configurez les paramètres (URL, dimensions, options), cliquez sur « Get Code » (Obtenir le code), puis copiez les deux codes JavaScript générés et intégrez-les à votre page HTML.
Pourquoi les plugins Facebook ne s'affichent pas sur mon site en développement local ?
Les plugins Facebook requièrent que le site soit déployé et accessible sur le web pour fonctionner correctement. Aucun affichage n'est visible en local ; il faut d'abord mettre en ligne votre site sur un serveur web pour voir les modifications.