{"id":24858,"date":"2019-02-05T11:04:42","date_gmt":"2019-02-05T11:04:42","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=24024\/"},"modified":"2022-03-03T14:02:25","modified_gmt":"2022-03-03T14:02:25","slug":"fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/","title":{"rendered":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML"},"content":{"rendered":"<p><html lang=\"fr\"><head><meta charset=\"utf-8\"><\/head><body><\/p>\n<h2>Introduction<\/h2>\n<p>Les r\u00e9actions sont plus expressives par rapport aux simples boutons &#8220;J&#8217;aime&#8221; et &#8220;Je n&#8217;aime pas&#8221;. En utilisant des r\u00e9actions, l&#8217;utilisateur peut facilement exprimer sa pens\u00e9e car les \u00e9motic\u00f4nes sont essentiellement un moyen de montrer les \u00e9motions. D&#8217;autre part, si nous utilisons le bouton J&#8217;aime et N&#8217;aime pas, l&#8217;utilisateur ne peut pas montrer l&#8217;\u00e9motion exacte. En utilisant des \u00e9motic\u00f4nes, nous pouvons rendre notre site plus expressif pour l&#8217;utilisateur.<\/p>\n<h3>Objectifs du blog<\/h3>\n<p>Dans ce blog, vous trouverez un moyen simple et rapide d&#8217;impl\u00e9menter la fonctionnalit\u00e9 R\u00e9actions. Apr\u00e8s avoir parcouru le blog, vous pourrez cr\u00e9er un syst\u00e8me de r\u00e9action pour votre site Web identique au bouton J&#8217;aime de Facebook.<\/p>\n<p><a href=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-24025 aligncenter\" src=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png\" alt=\"Facebook Emoji et aime\" width=\"300\" height=\"90\" srcset=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png 300w, https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1.png 477w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h3>De travail<\/h3>\n<p>Il y aura un bouton J&#8217;aime et le reste des boutons de r\u00e9action. En mettant l&#8217;accent sur le bouton J&#8217;aime, les boutons de r\u00e9action seront affich\u00e9s. JQuery sera utilis\u00e9 pour g\u00e9rer les taps sur les boutons de r\u00e9action. En appuyant sur le bouton de r\u00e9action, une requ\u00eate Ajax est envoy\u00e9e sur la page like.php. La logique pour enregistrer\/mettre \u00e0 jour les donn\u00e9es sur la base de donn\u00e9es peut \u00eatre \u00e9crite sur la page du gestionnaire. En appuyant \u00e0 nouveau sur le texte de r\u00e9action, la r\u00e9action est annul\u00e9e et cette fois nous envoyons Ajax sur la page undo_like.php. Toutes les fonctionnalit\u00e9s pour afficher\/masquer les boutons de r\u00e9action et l&#8217;animation sont ajout\u00e9es via JavaScript et CSS.<\/p>\n<h3>Cr\u00e9ation de la structure HTML<\/h3>\n<p>Avant de travailler sur la logique, nous devrons cr\u00e9er la mise en page. HTML pour la mise en page suit &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">R\u00e9actions Facebook  R\u00e9actions Facebook  Comme  Knowband et 4.3.0k autres<\/pre>\n<h3>Ajouter du style<\/h3>\n<p>Nous utilisons deux fichiers CSS (style.css et reaction.css) pour ajouter du style dans la page.<\/p>\n<p><strong>Remarque:  <\/strong> Vous pouvez trouver les fichiers CSS dans la version compl\u00e8te du projet.<\/p>\n<h3>Ajouter des fonctionnalit\u00e9s<\/h3>\n<p>Une fois notre mise en page pr\u00eate, nous pouvons travailler sur les fonctionnalit\u00e9s. Nous allons d&#8217;abord g\u00e9rer les robinets sur les boutons J&#8217;aime et R\u00e9action. Pour cela, nous utiliserons jQuery et nous ajouterons les \u00e9v\u00e9nements de clic. Le code pour ajouter les \u00e9v\u00e9nements de clic est donn\u00e9 ci-dessous &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">\/\/ Ajout de l'\u00e9v\u00e9nement click d\u00e8s que le document est pr\u00eat $(document).ready(function () { \/\/ Ajout de l'\u00e9v\u00e9nement click sur le bouton de r\u00e9action en utilisant le nom de classe $(\".emoji\").on(\"click \", function () { \/\/ like click \/\/ Ici, nous allons \u00e9crire le code, qui s'ex\u00e9cutera en appuyant sur le bouton de r\u00e9action }); });<\/pre>\n<p>Au focus du bouton de r\u00e9action, nous enverrons la requ\u00eate Ajax sur la page php. La requ\u00eate Ajax est donn\u00e9e ci-dessous &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">\/\/ Envoi de la requ\u00eate Ajax dans la page du gestionnaire (like.php) pour effectuer les op\u00e9rations de la base de donn\u00e9es $.ajax({ type&nbsp;: \"POST\", url&nbsp;: \"php\/like.php\", data&nbsp;: \"\", success&nbsp;: function (response) { \/\/ Ce code s'ex\u00e9cute apr\u00e8s le succ\u00e8s de l'Ajax } })<\/pre>\n<p>Ensuite, nous devrons cr\u00e9er une page de gestionnaire. Cela peut \u00eatre un simple fichier php.<\/p>\n<p><strong>Remarque:<\/strong> L&#8217;utilisateur peut effectuer des modifications de la base de donn\u00e9es dans le fichier du gestionnaire en fonction des besoins. Tout ce qui est renvoy\u00e9\/imprim\u00e9 dans ce fichier est renvoy\u00e9 \u00e0 la requ\u00eate Ajax et nous pouvons mettre \u00e0 jour la mise en page en cons\u00e9quence. Ici, nous avons ajout\u00e9 le code pour mettre \u00e0 jour la mise en page afin d&#8217;afficher la r\u00e9action actuellement enregistr\u00e9e. Le code complet du fichier reaction.js suit &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">$(document).ready(function () { $(\".emoji\").on(\"click\", function () { \/\/ Ici, nous obtenons la r\u00e9action qui est exploit\u00e9e en utilisant l'attribut data-reaction d\u00e9fini dans main page var data_reaction = $(this).attr(\"data-reaction\"); \/\/ Envoi d'une requ\u00eate Ajax dans la page du gestionnaire pour effectuer les op\u00e9rations de base de donn\u00e9es $.ajax({ type&nbsp;: \"POST\", url&nbsp;: \"php\/like.php \", data&nbsp;: \"data_reaction=\" + data_reaction, success&nbsp;: function (response) { \/\/ Ce code s'ex\u00e9cutera apr\u00e8s le succ\u00e8s de l'Ajax $(\".like-details\").html(\"You, Knowband and 10k other\") ; $(\".reaction-btn-emo\").removeClass().addClass('reaction-btn-emo').addClass('like-btn-' + data_reaction.toLowerCase()); $(\".reaction- btn-text\").text(data_reaction).removeClass().addClass('reaction-btn-text').addClass('reaction-btn-text-' + data_reaction.toLowerCase()).addClass(\"active\") ; if (data_reaction == \"J'aime\") $(\".like-emo\").html(' '); sinon $(\".like-emo\").html('  '); } }) }); $(\".reaction-btn-text\").on(\"click\", function () { \/\/ annuler comme click if ($(this).hasClass(\"active\")) { \/\/ Envoi de la requ\u00eate Ajax dans la page du gestionnaire pour effectuer les op\u00e9rations de base de donn\u00e9es $.ajax({ type&nbsp;: \"POST\", url&nbsp;: \"php\/undo_like.php\", data&nbsp;: \"\", success&nbsp;: function (response) { \/\/ G\u00e9rer lorsque l'Ajax r\u00e9ussit $(\". r\u00e9action-btn-text\").text(\"Comme\").removeClass().addClass('r\u00e9action-btn-text'); $(\".reaction-btn-emo\").removeClass().addClass('r\u00e9action -btn-emo').addClass(\"like-btn-default\"); $(\".like-emo\").html(' '); $(\".like-details\").html(\"Knowband et 1k autres\"); } }) } }) });<\/pre>\n<h2>R\u00e9capitulatif<\/h2>\n<p>Vous pouvez t\u00e9l\u00e9charger le projet complet \u00e0 partir de l&#8217;emplacement suivant &#8211;<\/p>\n<p><a href=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/facebook_reactions_complete_project-1.zip\" target=\"_blank\">Cliquez ici pour t\u00e9l\u00e9charger le projet complet<\/a><\/p>\n<p>Dans ce didacticiel, nous n&#8217;avons pas couvert la connexion et les op\u00e9rations de la base de donn\u00e9es car la logique de la base de donn\u00e9es peut \u00eatre diff\u00e9rente selon vos besoins. Avec l&#8217;aide de ce projet, vous pouvez facilement impl\u00e9menter la m\u00eame fonctionnalit\u00e9 de r\u00e9actions que Facebook dans votre page Web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Les r\u00e9actions sont plus expressives par rapport aux simples boutons &#8220;J&#8217;aime&#8221; et &#8220;Je n&#8217;aime pas&#8221;. En utilisant des r\u00e9actions, l&#8217;utilisateur peut facilement exprimer sa pens\u00e9e car les \u00e9motic\u00f4nes sont essentiellement un moyen de montrer les \u00e9motions. D&#8217;autre part, si nous utilisons le bouton J&#8217;aime et N&#8217;aime pas, l&#8217;utilisateur ne peut pas montrer l&#8217;\u00e9motion exacte. [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[1120],"tags":[8912,8711,75,362,8911,8710],"class_list":["post-24858","post","type-post","status-publish","format-standard","hentry","category-conseils-fr","tag-conseils-de-codage","tag-emoji","tag-facebook","tag-facebook-fr","tag-reactions"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit\u00e9-de-mise-en-\u0153uvre-des-r\u00e9actions-comme-facebook-avec-php-jquery-et-html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Introduction Les r\u00e9actions sont plus expressives par rapport aux simples boutons &#8220;J&#8217;aime&#8221; et &#8220;Je n&#8217;aime pas&#8221;. En utilisant des r\u00e9actions, l&#8217;utilisateur peut facilement exprimer sa pens\u00e9e car les \u00e9motic\u00f4nes sont essentiellement un moyen de montrer les \u00e9motions. D&#8217;autre part, si nous utilisons le bouton J&#8217;aime et N&#8217;aime pas, l&#8217;utilisateur ne peut pas montrer l&#8217;\u00e9motion exacte. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit\u00e9-de-mise-en-\u0153uvre-des-r\u00e9actions-comme-facebook-avec-php-jquery-et-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Knowband\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-05T11:04:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-03T14:02:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"477\" \/>\n\t<meta property=\"og:image:height\" content=\"143\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shivika Tomar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:site\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shivika Tomar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/\"},\"author\":{\"name\":\"Shivika Tomar\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/cc28589f6431305d8aa3fbb75ce97415\"},\"headline\":\"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML\",\"datePublished\":\"2019-02-05T11:04:42+00:00\",\"dateModified\":\"2022-03-03T14:02:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/\"},\"wordCount\":615,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Picture1-300x90.png\",\"keywords\":[\"conseils de codage\",\"emoji\",\"Facebook\",\"Facebook\",\"Facebook\",\"reactions\"],\"articleSection\":[\"conseils\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/\",\"name\":\"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Picture1-300x90.png\",\"datePublished\":\"2019-02-05T11:04:42+00:00\",\"dateModified\":\"2022-03-03T14:02:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Picture1-300x90.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Picture1-300x90.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento One Click Commander &#8211; Manuel de l&#8217;utilisateur\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/manuel-utilisateur\\\/magento-one-click-commander-manuel-de-lutilisateur\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"description\":\"Magento, Prestashop, Opencart, Shopify\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"width\":153,\"height\":61,\"caption\":\"Knowband Blog | Ecommerce Modules\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Knowband\",\"https:\\\/\\\/x.com\\\/KnowbandPlugin\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/cc28589f6431305d8aa3fbb75ce97415\",\"name\":\"Shivika Tomar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/bio_pic-150x150.jpg\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/bio_pic-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/bio_pic-150x150.jpg\",\"caption\":\"Shivika Tomar\"},\"description\":\"Shivika Tomar is a passionate PHP developer. Her area of interest is website development. She loves to bring healing to stressful and sad peoples.\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/author\\\/stomar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit\u00e9-de-mise-en-\u0153uvre-des-r\u00e9actions-comme-facebook-avec-php-jquery-et-html\/","og_locale":"fr_FR","og_type":"article","og_title":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules","og_description":"Introduction Les r\u00e9actions sont plus expressives par rapport aux simples boutons &#8220;J&#8217;aime&#8221; et &#8220;Je n&#8217;aime pas&#8221;. En utilisant des r\u00e9actions, l&#8217;utilisateur peut facilement exprimer sa pens\u00e9e car les \u00e9motic\u00f4nes sont essentiellement un moyen de montrer les \u00e9motions. D&#8217;autre part, si nous utilisons le bouton J&#8217;aime et N&#8217;aime pas, l&#8217;utilisateur ne peut pas montrer l&#8217;\u00e9motion exacte. [&hellip;]","og_url":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit\u00e9-de-mise-en-\u0153uvre-des-r\u00e9actions-comme-facebook-avec-php-jquery-et-html\/","og_site_name":"Knowband Blog | Ecommerce Modules","article_publisher":"https:\/\/www.facebook.com\/Knowband","article_published_time":"2019-02-05T11:04:42+00:00","article_modified_time":"2022-03-03T14:02:25+00:00","og_image":[{"width":477,"height":143,"url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1.png","type":"image\/png"}],"author":"Shivika Tomar","twitter_card":"summary_large_image","twitter_creator":"@KnowbandPlugin","twitter_site":"@KnowbandPlugin","twitter_misc":{"Written by":"Shivika Tomar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/"},"author":{"name":"Shivika Tomar","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/cc28589f6431305d8aa3fbb75ce97415"},"headline":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML","datePublished":"2019-02-05T11:04:42+00:00","dateModified":"2022-03-03T14:02:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/"},"wordCount":615,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png","keywords":["conseils de codage","emoji","Facebook","Facebook","Facebook","reactions"],"articleSection":["conseils"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/","url":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/","name":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png","datePublished":"2019-02-05T11:04:42+00:00","dateModified":"2022-03-03T14:02:25+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#primaryimage","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/fonctionnalit%c3%a9-de-mise-en-%c5%93uvre-des-r%c3%a9actions-comme-facebook-avec-php-jquery-et-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Magento One Click Commander &#8211; Manuel de l&#8217;utilisateur","item":"https:\/\/www.knowband.com\/blog\/fr\/manuel-utilisateur\/magento-one-click-commander-manuel-de-lutilisateur\/"},{"@type":"ListItem","position":3,"name":"Impl\u00e9mentation de la fonctionnalit\u00e9 de r\u00e9actions comme Facebook en utilisant PHP, jQuery et HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.knowband.com\/blog\/fr\/#website","url":"https:\/\/www.knowband.com\/blog\/fr\/","name":"Knowband Blog | Ecommerce Modules","description":"Magento, Prestashop, Opencart, Shopify","publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.knowband.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization","name":"Knowband Blog | Ecommerce Modules","url":"https:\/\/www.knowband.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","width":153,"height":61,"caption":"Knowband Blog | Ecommerce Modules"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Knowband","https:\/\/x.com\/KnowbandPlugin"]},{"@type":"Person","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/cc28589f6431305d8aa3fbb75ce97415","name":"Shivika Tomar","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/bio_pic-150x150.jpg","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/bio_pic-150x150.jpg","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/bio_pic-150x150.jpg","caption":"Shivika Tomar"},"description":"Shivika Tomar is a passionate PHP developer. Her area of interest is website development. She loves to bring healing to stressful and sad peoples.","url":"https:\/\/www.knowband.com\/blog\/fr\/author\/stomar\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/24858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=24858"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/24858\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=24858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=24858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=24858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}