Comentários no Blogger: tags HTML extras

Ao procurar entre os artigos publicados aqui no Blogue para verificar quais são novos e quais foram transferidos do Mocheco⊗Marafado, reparei que havia um artigo do meu antigo estaminé que definitivamente precisa estar neste blogue.

Refiro-me, claro, ao artigo que publiquei quando instalei um script que imita o BBCode e adiciona mais algumas opções às tags HTML permitidas pelo Blogger.

NOTA: O texto seguinte está escrito praticamente como o escrevi há quase 10 anos por isso algumas frases/expressões podem não fazer muito sentido agora. No entanto, preferi não modificar muito as coisas porque tirando essas partes, muito do que escrevi ainda é relevante para o assunto em questão: Os comentários do Blogger e as suas limitações.

As pequenas alterações que fiz agora foi para incluir/actualizar algumas ligações entretanto desaparecidas da Net... e também modifiquei/acrescentei algumas partes para estarem mais de acordo com este blogue.

Quando comecei o blogue, uma das razões que me levou a testar outros sistemas de comentários tal como o Disqus, o Haloscan, que passou a JS-Kit e finalmente a Echo ou o IntenseDebate, foi porque o Blogger não tinha um sistema muito bom.
E embora ainda precise de muitas melhorias, com as mais recentes alterações (algumas boas, outras nem tanto tal como o novo captcha) devo dizer que vai no bom caminho. :)

Claro que ainda há muito caminho pela frente...
... sendo o mais importante na minha opinião, haver mais opções de contas para comentar tal como com a conta do Facebook ou Twitter, podermos retirar a opção comentários Anónimos sem retirar a opção comentar com Nome/URL (pessoalmente odeio comentários anónimos, ainda mais quando existe a opção de comentar com o Nome/URL embora neste último caso, acho que devia ser obrigatório colocar o email), e a opção de pudermos editar os comentários sem ser preciso arriscar no mexer no código-base (sim, existe uma maneira de editar comentários publicados), mas já estou a divagar...

Outra das razões que me levou a testar outros sistemas de comentários foi a possibilidade de ter emoticons.
Algo facilmente corrigido actualmente com um pouco de javascript e com a vantagem de podermos personalizar como desejarmos, tanto que neste momento nem estou muito interessado em ver o Blogger implementar essa opção. :D

Actualmente, o Blogger já implementou como incluir emoticons MAS SOMENTE nos textos dos artigos, E se utilizarmos a Vista de Composição. Infelizmente (ou talvez felizmente), na parte de comentários ainda não existe essa possibilidade. :I

E finalmente, a última razão para testar outros sistemas era a possibilidade de podermos incluir nos comentários qualquer imagem que desejássemos ou vídeo do YouTube, ou até formatar parte ou o total do texto.
Esta foi a principal razão porque testei o JS-Kit e o IntenseDebate, sistemas onde existem essas opções.
No sistema do Blogger somente podemos incluir algumas tags HTML:

`1`	`<strong>Texto</strong>`
`2`	`<em>Texto</em>`
`3`	`<a href="endereço url">Nome da Página ou Site</a>`
`4`	`<i>Texto em Itálico</i>`
`5`	`<b>Texto em Negrito</b>`

Se repararem, tanto o texto em Negrito [b] - (linha 5) como em strong (linha 1) é representado em negrito.
Tal como o texto em Itálico [i] - (linha 4) e em em (linha 2) é representado em itálico.
Em ambos os casos, a diferença de uso entre um ou outro elemento pode-se dizer que é relativo à importância ou destaque que se quer dar ao que se escreve...

O elemento  é utilizado em conteúdos que são de "grande importância", incluindo coisas urgentes (como alertas). Podem ser sentenças que são de grande importância para toda a página, ou, você pode meramente tentar pontuar que algumas palavras são de grande importância, comparado ao conteúdo próximo.

Tipicamente, estes elementos são renderizados por padrão, usando fontes em negrito. Contudo, ele não deve ser usado para simplesmente aplicar o estilo negrito; use o CSS font-weight para este propósito.
Use o elemento  para chamar a atenção para certos textos sem a indicação de grande nível de importância.
Use o elemento  para marcar textos que necessitam de ênfase.

Outro uso aceitavel para  é denotado com o rótulo (label) de parágrafos, que representa notas ou avisos, dentro do texto da página.
Notas de uso na página 

E depois deste pequeno desvio, vamos voltar ao que escrevi no artigo original... (c)

Para contornar um pouco a falta de opções nesta área, há algum tempo personalizei o CSS de algumas dessas tags para estilizar parte dos comentários, como podem ver nas instruções de comentar abaixo de cada artigo.

O lado negativo de todos esses sistemas que testei é que todos eles necessitam de códigos javascript para implementar no blogue e todos os comentários ficam alojados nos servidores deles, algo que não gosto muito, sendo essa a principal razão porque voltei ao sistema original do Blogger e não penso mudar.
Mas isso não significa que não teste maneiras de melhorar a coisa. =D

Ora quem leu o artigo Comentários no Blogger Com problemas... Mais uma vez! sabe que o Blogger alterou algumas coisas na forma como apresenta o novo sistema de comentários, o que me causou alguns problemas na personalização que tenho aqui e embora a maior parte fosse fácil de resolver, na parte do javascript foi mais complicado e, entre outras coisas, tive muito que pesquisar na net por soluções...

Mas como costuma acontecer quando se procura algo, acabei por encontrar um pequeno código javascript que podem ver em acção neste mesmo blogue, ou na página do autor (infelizmente, o site original onde encontrei o script, cujo link tinha colocado no artigo original já não existe actualmente :().

Achei este script um espectáculo e tinha que o colocar aqui. O que este código faz é precisamente a possibilidade de incluirmos mais tags HTML nos comentários, incluindo imagens e com um pouco de personalização, vídeos (por enquanto, só do YouTube).

Basicamente, o que o javascript faz é transformar em HTML, uma adaptação de BBCode e que é aceite pelo sistema do Blogger.
Por enquanto, só tentei acrescentar o código que faz com se possa incluir vídeos do YouTube nos comentários mas imagino que as possibilidades de adaptar mais BBCcode seja realizável.

Atenção:
Como sempre, RECOMENDO que testem primeiro num blogue de testes e mesmo assim, antes de tentar modificar o código do seu blogue, é recomendado que salve sempre o modelo actual!

Abaixo, o script com a minha adaptação para colocar no Blogger para funcionar no novo sistema de comentários com resposta:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//SCRIPT HTML NOS COMENTARIOS
/*developed by neechalkaran@gmail.com*/ 
a = document.getElementById("comments");
  if (a) {
    b = a.getElementsByTagName("p");
    for (i = 0; i < b.length; i++) {
        _str = b.item(i).innerHTML.replace(/\[im\]/gi, "<img src='");
        _str = _str.replace(/\[im\#\]/gi, "<img width='100%' src='");
        _str = _str.replace(/\[\/im\]/gi, "' class='image'/>");
        _str = _str.replace(/\[ma\]/gi, "<marquee>");
        _str = _str.replace(/\[\/ma\]/gi, "</marquee>");
        _str = _str.replace(/\[si\=\"/gi, "<font size='");
        _str = _str.replace(/\[\/si\]/gi, "</font>");
        _str = _str.replace(/\[co=\"/gi, "<font color='");
        _str = _str.replace(/\[\/co\]/gi, "</font>");
        _str = _str.replace(/\"\]/gi, "'>");
        _str = _str.replace(/\[ce\]/gi, "<center>");
        _str = _str.replace(/\[\/ce\]/gi, "</center>");
        _str = _str.replace(/\[ma\+\]/gi, "<marquee direction='right'>");
        _str = _str.replace(/\[\/ma\+\]/gi, "</marquee>");
        _str = _str.replace(/\[box\]/gi, "<table frame='box'><tr><td>");
        _str = _str.replace(/\[\/box\]/gi, "</td></tr></table>");
        _str = _str.replace(/\[mark\]/gi, "<table align='center' frame='vsides' width='70%'><tr align='center'><td>");
        _str = _str.replace(/\[\/mark\]/gi, "</td></tr></table>");
        _str = _str.replace(/\[line\]/gi, "<hr/>");
        _str = _str.replace(/\[card\=\"/gi, "<table align='center' border='1' width='75%'><tr><td align='center' bgcolor='");
        _str = _str.replace(/\[\/card\]/gi, "</td></tr></table>");
        _str = _str.replace(/\[hi\=\"/gi, "<span style='background-color:");
        _str = _str.replace(/\[\/hi\]/gi, "</span>");
        _str = _str.replace(/\[ytube\]/gi, "<iframe style='display:block; width:325px; margin: 3px auto; border: 1px solid #fc4;box-shadow: 0 15px 15px -15px #235;' src='https://www.youtube.com/embed/");
        _str = _str.replace(/\[\/ytube\]/gi, "' width='320' height='200' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>");
        b.item(i).innerHTML = _str;
    }
}
//]]>
</script>
</b:if>
</b:if>

Para colocar a funcionar no Blogger, basta ir à aba Tema, clicar na no botão Personalizar para acessar Editar HTML e procurar por </body>, colar o script acima IMEDIATAMENTE ANTES dessa parte, salvar e pronto.

Para completar este artigo, recomendo que criem uma página estática com as regras dos comentários e onde expliquem as novas tags HTML, complementado com um link para essa página na aba Definições Comentários Mensagem do formulário de comentários.
O HTML extra que o script acima permite utilizar nos comentários e respectiva função:

[im]URL DA IMAGEM[/im] Serve para colocar uma imagem nos comentários. ATENÇÃO que utilizando esta opção, o tamanho da imagem apresenta-se igual ao original e pode exceder a largura do comentário. Nesse caso, duas coisas podem ocorrer: a imagem aparece cortada debaixo do espaço disponível ou o autor do blogue pode apagar o comentário. :((
[ma]Texto rolando[/ma] Serve para colocar texto rolando.
[si="2"]Texto com tamanho determinado[/si] Alterando o número (1 = mais pequeno até 10 = gigantesco) para determinar o tamanho da letra.
[co="red"]Texto em cor[/co] Altera a cor do texto. Devem escrever o nome da cor em inglês. Podem ver neste link as cores, respectivos nomes, código Hex e código RGB : Color Names, no entanto ao escolher uma cor o utilizador deve ter em conta o fundo dos comentários ou o texto pode ficar ilegível.
[ce]Texto centrado[/ce] Serve centralizar o texto. Pode ser utilizado em todo o comentário ou somente em parte.
[ma+]Texto rolando para a direita[/ma+] Serve para colocar texto rolando através do comentários para a direita.
[box]"encaixotar" o texto[/box] Serve para encaixotar o texto, pode ser uma alternativa para conter uma citação.
[mark]Texto Marcado[/mark] Outra forma de apresentar texto que pode servir para conter uma citação ou algo do género.
[line] Serve para colocar uma linha horizontal a separar conteúdos.
[card="blue"]Texto com fundo[/card] Coloca uma cor escolhida no fundo do comentário ou em parte do texto (ver link da tabela de cores acima).
[im#]URL DA IMAGEM[/im] Serve para colocar uma imagem que ocupe TODA a largura do comentário.
[hi="yellow"]Texto Destacado[/hi] Serve para destacar parte do comentário (podem colocar outra cor além da amarela [yellow] ver link da tabela de cores acima).
[ytube]ID Video YouTube[/ytube] Serve para colocar um vídeo do YouTube nos comentários utilizando a ID do vídeo. (Outra maneira de implementar esta opção descrita abaixo.)
Essa é a maneira mais fácil de colocar regras de comentários num blogue. :D
Mas caso prefiram, também podem colocar essas regras acima dos comentários tal como eu tenho aqui no blogue, mas nesse caso é mais complicado e necessitam de editar o HTML do blogue e nesse caso, a maneira de fazer isso vai depender de qual sistema de comentários têm no vosso blogue: antigo ou o novo sistema com respostas.

Ao republicar este artigo reparei que algumas da tags HTML inseridas no NCcode acima já estão obsoletas (, <marquee>, <center>) e como tal, não são suportadas pelo HTML5.
Por enquanto ainda estão funcionais, mas eventualmente será necessário alterar algumas coisas no código inclusive já tenho algumas ideias de como substituir as tables por algo mais... moderno. »:

Alguns dias após escrever este artigo e depois de ter adaptado o script para incluir vídeos do YouTube, o MS-potilas do blogue Yet Another Blogger Tips Blog criou um script mais funcional e fácil de usar do ponto de vista do utilizador.
Se somente desejarem disponibilizar a opção para o utilizador puder incluir vídeos do YouTube nos comentários, então recomendo o artigo: Allow users embed YouTube videos in Blogger comments.

Eu resolvi implementar o script do MS-potilas aqui no blogue por duas razões:
A primeira menciono acima e a segunda porque em conjunto com outro script dele que faz com os vídeos só carreguem na página após se clicar neles, faz com que as páginas carreguem mais rápido. O que no caso de um artigo ter muitos comentários com vídeos, é verdadeiramente útil. ;)

E o melhor é que o MS-potilas também escreveu uma versão desse script que funciona nos artigos. Podem ler mais sobre esse script em: Youtube videos lazy load, improved style.

Algum tempo após ter escrito este artigo... na verdade, já muito depois de ter retirado o Mocheco⊗Marafado do ar, o Oloman do blogue Oloblogger também publicou um script para mostrar imagens e vídeos no comentários do Blogger: Visualizar imágenes y vídeos en los comentarios de Blogger.
Principalmente porque além de vídeos do YouTube, o script do Oloman também permite adicionar vídeos do Vimeo.
É esse script (modificado para funcionar em conjunto com o script que utilizo para colocar vídeos nos artigos) que utilizo actualmente em conjunto com o NCcode para as restantes tags HTML e um outro script que automaticamente transforma qualquer ligação escrita nos comentários em endereços URL funcionais para facilitar a inclusão dos vídeos.

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?

Comentários

Sem Opiniões Seja o primeiro a Comentar.

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Coisas K Aprendi por Aí

Pesquisar neste blogue

Dagger by Dark Knight DK