{"id":24862,"date":"2019-02-05T11:04:42","date_gmt":"2019-02-05T11:04:42","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=24024\/"},"modified":"2025-05-09T17:33:05","modified_gmt":"2022-03-03T14:21:02","slug":"implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/","title":{"rendered":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML"},"content":{"rendered":"<p><html lang=\"pt\"><head><meta charset=\"utf-8\"><\/head><body><\/p>\n<h2>Introdu\u00e7\u00e3o<\/h2>\n<p>As rea\u00e7\u00f5es s\u00e3o mais expressivas em compara\u00e7\u00e3o com os bot\u00f5es simples de curtir e n\u00e3o gostar. Usando rea\u00e7\u00f5es o usu\u00e1rio pode facilmente expressar seu pensamento porque os emoticons s\u00e3o basicamente uma forma de mostrar as emo\u00e7\u00f5es. Por outro lado, se usarmos o bot\u00e3o curtir e n\u00e3o gostar, o usu\u00e1rio n\u00e3o poder\u00e1 mostrar a emo\u00e7\u00e3o exata. Usando emoticons podemos tornar nosso site mais expressivo para o usu\u00e1rio.<\/p>\n<h3>Objetivos do blog<\/h3>\n<p>Neste blog, voc\u00ea encontrar\u00e1 uma maneira f\u00e1cil e r\u00e1pida de implementar a funcionalidade Rea\u00e7\u00f5es. Depois de passar pelo blog, voc\u00ea poder\u00e1 criar um sistema de rea\u00e7\u00e3o para o seu site igual ao bot\u00e3o Curtir do 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=\"Emoji e curtidas do Facebook\" 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>Trabalho<\/h3>\n<p>Haver\u00e1 um bot\u00e3o Curtir e o restante dos bot\u00f5es Rea\u00e7\u00e3o. Ao focar o bot\u00e3o Curtir, os bot\u00f5es Rea\u00e7\u00e3o ser\u00e3o exibidos. JQuery ser\u00e1 usado para lidar com os toques nos bot\u00f5es de rea\u00e7\u00e3o. Ao tocar no bot\u00e3o de rea\u00e7\u00e3o, uma solicita\u00e7\u00e3o Ajax \u00e9 enviada na p\u00e1gina like.php. A l\u00f3gica para salvar\/atualizar dados no banco de dados pode ser escrita na p\u00e1gina do manipulador. Ao tocar no texto de rea\u00e7\u00e3o novamente, a rea\u00e7\u00e3o \u00e9 desfeita e desta vez estamos enviando Ajax na p\u00e1gina undo_like.php. Toda a funcionalidade para mostrar\/ocultar os bot\u00f5es de rea\u00e7\u00e3o e anima\u00e7\u00e3o \u00e9 adicionada atrav\u00e9s de JavaScript e CSS.<\/p>\n<h3>Criando a estrutura HTML<\/h3>\n<p>Antes de trabalhar na l\u00f3gica, teremos que criar o layout. O HTML para o layout est\u00e1 a seguir &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">Rea\u00e7\u00f5es do Facebook  Rea\u00e7\u00f5es do Facebook  Como  Banda de conhecimento e 4.3.0 mil outros<\/pre>\n<h3>Adicionando Estilo<\/h3>\n<p>Estamos usando dois arquivos CSS (style.css e react.css) para adicionar estilo na p\u00e1gina.<\/p>\n<p><strong>Nota:  <\/strong> Voc\u00ea pode encontrar os arquivos CSS na compila\u00e7\u00e3o completa do projeto.<\/p>\n<h3>Adicionando Funcionalidade<\/h3>\n<p>Assim que nosso layout estiver pronto, podemos trabalhar nas funcionalidades. Primeiro, lidaremos com os toques nos bot\u00f5es Curtir e Rea\u00e7\u00e3o. Para isso, usaremos jQuery e adicionaremos os eventos de clique. O c\u00f3digo para adicionar os eventos de clique \u00e9 fornecido abaixo &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">\/\/ Adicionando o evento click assim que o documento estiver pronto $(document).ready(function () { \/\/ Adicionando o evento click no bot\u00e3o de rea\u00e7\u00e3o usando o nome da classe $(\".emoji\").on(\"click \", function() { \/\/ like click \/\/ Aqui estaremos escrevendo o c\u00f3digo, que ser\u00e1 executado ao tocar no bot\u00e3o de rea\u00e7\u00e3o }); });<\/pre>\n<p>No foco do bot\u00e3o de rea\u00e7\u00e3o, estaremos enviando a solicita\u00e7\u00e3o Ajax na p\u00e1gina php. A solicita\u00e7\u00e3o Ajax \u00e9 fornecida abaixo &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">\/\/ Enviando solicita\u00e7\u00e3o Ajax na p\u00e1gina do manipulador (like.php) para realizar as opera\u00e7\u00f5es do banco de dados $.ajax({ type: \"POST\", url: \"php\/like.php\", data: \"\", success: function (response) { \/\/ Este c\u00f3digo \u00e9 executado ap\u00f3s o sucesso do Ajax } })<\/pre>\n<p>Em seguida, teremos que criar uma p\u00e1gina de manipulador. Este pode ser um arquivo php simples.<\/p>\n<p><strong>Observa\u00e7\u00e3o: <\/strong> O usu\u00e1rio pode realizar altera\u00e7\u00f5es no banco de dados no arquivo do manipulador de acordo com o requisito. O que quer que seja retornado\/impresso nesse arquivo \u00e9 retornado \u00e0 solicita\u00e7\u00e3o Ajax e podemos atualizar o layout de acordo. Aqui n\u00f3s adicionamos o c\u00f3digo para atualizar o layout para mostrar a rea\u00e7\u00e3o salva atualmente. O c\u00f3digo completo do arquivo react.js est\u00e1 a seguir &#8211;<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">$(document).ready(function () { $(\".emoji\").on(\"click\", function () { \/\/ Aqui estamos obtendo a rea\u00e7\u00e3o que \u00e9 tocada usando o atributo data-reaction definido em main page var data_reaction = $(this).attr(\"data-reaction\"); \/\/ Enviando solicita\u00e7\u00e3o Ajax na p\u00e1gina do manipulador para realizar as opera\u00e7\u00f5es do banco de dados $.ajax({ type: \"POST\", url: \"php\/like.php \", data: \"data_reaction=\" + data_reaction, success: function (response) { \/\/ Este c\u00f3digo ser\u00e1 executado depois que o Ajax for bem-sucedido $(\".like-details\").html(\"Voc\u00ea, Knowband e 10k outros\") ; $(\".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 == \"Like\") $(\".like-emo\").html(' '); else $(\".like-emo\").html('  '); } }) }); $(\".reaction-btn-text\").on(\"click\", function () { \/\/ desfaz like click if ($(this).hasClass(\"active\")) { \/\/ Enviando solicita\u00e7\u00e3o Ajax na p\u00e1gina do manipulador para executar as opera\u00e7\u00f5es do banco de dados $.ajax({ type: \"POST\", url: \"php\/undo_like.php\", data: \"\", success: function (response) { \/\/ Manipula quando o Ajax \u00e9 bem sucedido $(\". react-btn-text\").text(\"Like\").removeClass().addClass('reaction-btn-text'); $(\".reaction-btn-emo\").removeClass().addClass('reaction -btn-emo').addClass(\"like-btn-default\"); $(\".like-emo\").html(' '); $(\".like-details\").html(\"Knowband e 1k outros\"); } }) } }) });<\/pre>\n<h2>Resumo<\/h2>\n<p>Voc\u00ea pode baixar o projeto completo no seguinte local &#8211;<\/p>\n<p><a href=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/facebook_reactions_complete_project-1.zip\" target=\"_blank\">Clique aqui para baixar o projeto completo<\/a><\/p>\n<p>Neste tutorial, n\u00e3o abordamos a conex\u00e3o e as opera\u00e7\u00f5es do banco de dados, pois a l\u00f3gica do banco de dados pode ser diferente de acordo com suas necessidades. Com a ajuda deste projeto, voc\u00ea pode implementar facilmente a funcionalidade de rea\u00e7\u00f5es igual ao Facebook em sua p\u00e1gina da web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introdu\u00e7\u00e3o As rea\u00e7\u00f5es s\u00e3o mais expressivas em compara\u00e7\u00e3o com os bot\u00f5es simples de curtir e n\u00e3o gostar. Usando rea\u00e7\u00f5es o usu\u00e1rio pode facilmente expressar seu pensamento porque os emoticons s\u00e3o basicamente uma forma de mostrar as emo\u00e7\u00f5es. Por outro lado, se usarmos o bot\u00e3o curtir e n\u00e3o gostar, o usu\u00e1rio n\u00e3o poder\u00e1 mostrar a emo\u00e7\u00e3o [&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":[3274],"tags":[8920,8711,75,8919],"class_list":["post-24862","post","type-post","status-publish","format-standard","hentry","category-dicas","tag-dicas-de-codificao","tag-emoji","tag-facebook","tag-reaes"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e 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\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea\u00e7\u00f5es-como-o-facebook-usando-php-jquery-e-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Introdu\u00e7\u00e3o As rea\u00e7\u00f5es s\u00e3o mais expressivas em compara\u00e7\u00e3o com os bot\u00f5es simples de curtir e n\u00e3o gostar. Usando rea\u00e7\u00f5es o usu\u00e1rio pode facilmente expressar seu pensamento porque os emoticons s\u00e3o basicamente uma forma de mostrar as emo\u00e7\u00f5es. Por outro lado, se usarmos o bot\u00e3o curtir e n\u00e3o gostar, o usu\u00e1rio n\u00e3o poder\u00e1 mostrar a emo\u00e7\u00e3o [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea\u00e7\u00f5es-como-o-facebook-usando-php-jquery-e-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:21:02+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/\"},\"author\":{\"name\":\"Shivika Tomar\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/cc28589f6431305d8aa3fbb75ce97415\"},\"headline\":\"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML\",\"datePublished\":\"2019-02-05T11:04:42+00:00\",\"dateModified\":\"2022-03-03T14:21:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/\"},\"wordCount\":554,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Picture1-300x90.png\",\"keywords\":[\"dicas de codifica\u00e7\u00e3o\",\"emoji\",\"Facebook\",\"rea\u00e7\u00f5es\"],\"articleSection\":[\"Dicas\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/\",\"name\":\"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-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:21:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-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\\\/pt-br\\\/dicas\\\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento One Click Checkout (Compre Agora) Extens\u00e3o &#8211; Manual do Usu\u00e1rio\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/manual-do-usuario\\\/magento-one-click-checkout-compre-agora-extens%c3%a3o-manual-do-usu%c3%a1rio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e 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\":\"pt-BR\"},{\"@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\":\"pt-BR\",\"@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\":\"pt-BR\",\"@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\\\/pt-br\\\/author\\\/stomar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e 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\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea\u00e7\u00f5es-como-o-facebook-usando-php-jquery-e-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML - Knowband Blog | Ecommerce Modules","og_description":"Introdu\u00e7\u00e3o As rea\u00e7\u00f5es s\u00e3o mais expressivas em compara\u00e7\u00e3o com os bot\u00f5es simples de curtir e n\u00e3o gostar. Usando rea\u00e7\u00f5es o usu\u00e1rio pode facilmente expressar seu pensamento porque os emoticons s\u00e3o basicamente uma forma de mostrar as emo\u00e7\u00f5es. Por outro lado, se usarmos o bot\u00e3o curtir e n\u00e3o gostar, o usu\u00e1rio n\u00e3o poder\u00e1 mostrar a emo\u00e7\u00e3o [&hellip;]","og_url":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea\u00e7\u00f5es-como-o-facebook-usando-php-jquery-e-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:21:02+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/"},"author":{"name":"Shivika Tomar","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/cc28589f6431305d8aa3fbb75ce97415"},"headline":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML","datePublished":"2019-02-05T11:04:42+00:00","dateModified":"2022-03-03T14:21:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/"},"wordCount":554,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Picture1-300x90.png","keywords":["dicas de codifica\u00e7\u00e3o","emoji","Facebook","rea\u00e7\u00f5es"],"articleSection":["Dicas"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/","url":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/","name":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e HTML - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-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:21:02+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-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\/pt-br\/dicas\/implementando-a-funcionalidade-de-rea%c3%a7%c3%b5es-como-o-facebook-usando-php-jquery-e-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Magento One Click Checkout (Compre Agora) Extens\u00e3o &#8211; Manual do Usu\u00e1rio","item":"https:\/\/www.knowband.com\/blog\/pt-br\/manual-do-usuario\/magento-one-click-checkout-compre-agora-extens%c3%a3o-manual-do-usu%c3%a1rio\/"},{"@type":"ListItem","position":3,"name":"Implementando a funcionalidade de rea\u00e7\u00f5es como o Facebook usando PHP, jQuery e 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":"pt-BR"},{"@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":"pt-BR","@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":"pt-BR","@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\/pt-br\/author\/stomar\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/24862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=24862"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/24862\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=24862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=24862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=24862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}