{"id":770,"date":"2020-07-08T15:45:06","date_gmt":"2020-07-08T18:45:06","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=770"},"modified":"2022-12-09T08:22:16","modified_gmt":"2022-12-09T11:22:16","slug":"como-criar-uma-lista-pra-procurar-emojis-no-seu-site","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/como-criar-uma-lista-pra-procurar-emojis-no-seu-site\/","title":{"rendered":"Como criar uma lista pra procurar emojis no seu site"},"content":{"rendered":"

Emojs, o que s\u00e3o?<\/p>\n

Bom, eu utilizo muito em meus sites, aplicativos e jogos.<\/p>\n

S\u00e3o representa\u00e7\u00f5es gr\u00e1ficas usadas em conversas online, nas redes sociais e em aplicativos como o WhatsApp.<\/p><\/blockquote>\n

Segue um tutorial, de como criar uma lista para usar no seu site, blog, aplicativo, jogos, etc.<\/p>\n

\"\"<\/p>\n

Por exemplo acima, se quisermos colocar a primeira figura no html do site.<\/p>\n

Podemos copiar e colar a figura, ou digitar o seguinte c\u00f3digo, &#128105;\u00a0 <\/strong>somente at\u00e9 o ;<\/span><\/p>\n

Se for no wordpress, tem que estar no formato de texto, e n\u00e3o mudar mais\u00a0 para visual at\u00e9 salvar.<\/p>\n

\"\" *esta em visual<\/span><\/p>\n

O resultado \u00e9 esse:<\/p>\n

?\u200d?\u200d?\u200d?<\/h1>\n

Vamos aos c\u00f3digos:<\/strong><\/p>\n

O script que tem os emojis, baixe abaixo:<\/p>\n

emojis.json<\/a><\/p>\n

 <\/p>\n

O c\u00f3digo para listar os emojis \u00e9 esse abaixo:<\/p>\n

Copie os dois arquivos na mesma pasta.<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody{margin:0;background:#ffffff;font:normal 1em\/150% Courier New, Helvetica, sans-serif;}\r\nhr{border:none;\tborder-top:1px dotted #333333;height: 0.5px;}\r\n<\/style>\r\n<\/head>\r\n<body style=\"height:100px\">\r\n<div id=\"buscar\" style=\"position:fixed;top:0;left:0px;background: yellow;\">\r\n<input type=\"text\" name=\"palavra\" id=\"palavra\"><input name=\"ok\" type=\"button\" value=\"filtrar emojs\" onClick=\"filtrar();\"><\/div>\r\n<div id=\"texto1\" style=\"position:fixed;top:0;right:0px;background: yellow;\"><\/div>\r\n<br>\r\n<div id=\"texto\"><\/div>\r\n<br><br>\r\n<a hfef=\"javascript:;;\" onclick=\"vermais()\">ver+<\/a>\r\n<script type=\"text\/javascript\" src=\"emojis.json\"><\/script>\r\n<script>\r\n        \/\/ convertendo a string em objeto\r\n        var obj = JSON.parse(valorRetornado);\r\n        shareInfoLen = obj.length;\r\n        document.getElementById('texto1').innerHTML =\tshareInfoLen;\r\n\r\nini = 0;\r\nfm = 15;\r\nqte = 15;\r\nfunction vermais(){\r\n\r\n\r\n        obj.slice(ini, fm).forEach(function(o, index){\r\n        document.getElementById('texto').innerHTML+=\to.html  +  \" &nbsp; \" + o.order + \" &nbsp; \"+ o.name + \" &nbsp; \"+ o.category + \" &nbsp; Cod: <b>\" + o.html.replace(\/&\/g, '&amp;') + \"<\/b><hr>\";\r\n        \r\n    \r\n        });\r\n\r\nini = fm;\r\nfm = fm + qte;\r\n        \r\n                }\r\n                \r\n                \r\nwindow.onscroll = scroll;\r\n\r\nfunction scroll () { \r\ndocument.getElementById('texto1').innerHTML=\tshareInfoLen + \" emojs \";\r\nif(window.scrollY +  window.screen.height >= document.body.scrollHeight) {\r\nvermais();\r\n}\r\n }\r\nvermais(); \r\n\r\n\r\n\r\n\r\n\r\nfunction filtrar(){\r\nvar jsObj = JSON.parse(valorRetornado);\r\ndocument.getElementById('texto').innerHTML='';\r\nvar find = document.getElementById('palavra').value;\r\nvar values = jsObj.filter(function(x) {\r\n  return x.name.indexOf(find) > -1;\r\n}).map(function(x) {\r\n  return x.html;\r\n});\r\n\r\nvalues.length > 0 ? document.getElementById('texto').innerHTML+=values.length+\" resultados <hr>\" : document.getElementById('texto').innerHTML+=\"nada encontrado\";\r\nii = 0; \r\nwhile(ii < values.length)\r\n{ document.getElementById('texto').innerHTML+= values[ii]+\"<hr>\"; ii++;}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/script>\r\n<\/body><\/pre>\n
Algumas informa\u00e7\u00f5es importantes:<\/p>\n
Para mudar a quantidade de emojis para aparecer por vez, mude as linhas:<\/p>\n
fm = 15;<\/strong><\/p>\n
 qte = 15;<\/strong><\/p>\n
\n
O resultado final \u00e9 esse<\/p>\n
Link de todos os emojis<\/a><\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n