dezembro 16, 2017

Emoticons , Emojis, Gifs nos Comentários

Comentar em um blog/site fica mais divertido usando aquelas imagens animadas que muitas vezes expressam o que queremos falar e até enfeitam nossa forma de entrar em contato com os outros.
Há algumas eras, usei um código bem complicado para adicionar essa opção ao blog, mas sabia que há uma forma super simples de se fazer isso?
Tudo o que é necessário é um script no html do template e que os comentários estejam incorporados à postagem (Configurações-Postagens,comentários e compartilhamentos-Comentários-Local do comentário-Incorporado).
A versão original desse script faz com que seja aceito imagens e vídeos na área dos comentários. Para não deixar o blog lento, acho mais interessante permitir apenas imagens e pequenas, como gifs, emojis e emoticons, por isso, removi o trecho que permite vídeos.
No HTML do seu template, procure por </body> e antes dele cole:
<script>//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(gif|png]))(\[\/img\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;" src="$2"" alt=""/>'),d[e].innerHTML=j}}();
//]]></script>
Visualize e se estiver tudo certo, salve.
Como usar
Vá em alguma postagem e digite um comentário junto com o link de alguma imagem (ou vídeo). Exemplo:
Funcionou!!! https://2.bp.blogspot.com/-a7o3ZDKa9Fc/WjQgwnKmLvI/AAAAAAAARjA/ZzG1ObU3wIQbgcRC7dSrm0Yqsd-fJim_wCLcBGAs/s1600/emoticon5.gif
Clique em publicar e o resultado será assim:
Sempre que quiser adicionar uma imagem ou vídeo, copie o endereço da imagem ou link que aparece na barra de endereços de vídeos do vimeo ou youtube e cole no comentário.
Para que seus leitores saibam que seu blog permite usar imagens/vídeos, deixe isso claro no formulário de comentários (Configurações-Postagens, comentários e compartilhamentos-Comentários-Mensagem do formulário de comentários)...
ou procure por post-footer/post-footer-line1 ou 2 ou 3, ou áreas acima dos comentários no html do seu template e cole os links dos emoticons como sugestão para usarem.

E é isso...
Imagem de abertura do post: Freepik.com
Share:

5 comentários:

  1. Ola Roberta o/
    Adorei o tutorial , vou testar e vê se coloco no meu blog hahaha! https://3.bp.blogspot.com/-d1PZNAoifZ0/WjQgwTUZnYI/AAAAAAAARi8/4F2SFMIoP34ZRBFqgxPfLmBVA1DCuQmSwCLcBGAs/s1600/emoticon4.gif

    +Emy-Lee Cosplay+

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado e espero que dê certo :3
      Aqui no blog, na primeira postagem não tá aparecendo, só nas outras, acho que é o modelo que estou usando... Vou verificar.

      Excluir
    2. Deu certo com esse modelo novo!!! https://3.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARi4/5TJ3SqD-itQf6fW5VrEN-wYkuetwnVvYACLcBGAs/s1600/emoticon2.gif

      Excluir
  2. deu certo,mas todo gif que coloco fica enorme.. mesmo sendo 20x20 o que estou fazendo errado? pq nao fica pequeno? >>>o meu gif https://media.giphy.com/media/OuGlqcReA1Cb6/200.gif

    ResponderExcluir
    Respostas
    1. Tem um trecho no código max-width:100%
      Talvez se modificá-lo dê certo.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart