Como adicionar box de comentários da Disqus no Blog

Neste tutorial, você aprenderá como implementar e configurar os comentários usando a ferramenta Disqus.com em seu blog.

Comentários da Disqus no Blogger

Por que ter a Disqus?

Os comentários padrão do Blogger já evoluiu bastante, dando a possibilidade de qualquer um comentar e até mesmo responder diretamente aos outros usuários. O sistema de moderação também está bem desenvolvido, podendo-se até bloquear alguns usuários "deselegantes". Porém, ainda faltam alguns atributos que seriam interessantes, como a possibilidade de avaliar o comentário ou pôr imagens nele, como forma de ilustrar alguma situação.

Assim sendo, é possível colocar um gestor externo de comentários no blog, como a  box de comentários do Facebook, da Disqus, dentre outras. Aqui mesmo, já fizemos um tutorial de como pôr comentários do Facebook no blog, mas ele tem um (pequeno) problema: não é responsivo. E o que isso quer dizer? Quer dizer que, se você tem um blog que se adapta a diferentes tamanhos de dispositivos, a caixa de comentário continuará ocupando os mesmos pixels que ocupa numa tela grande, ocultando assim partes dos comentários e criando uma barra de rolagem horizontal.

Atualização (17 de fevereiro de 2015): Agora o código apresentado no tutorial para box do Facebook torna a box responsiva, além de apresentar nativamente uma versão mobile em dispositivos móveis.

Com os comentários da Disqus, seus problemas estão resolvidos. Além de ser responsivo, ele permite avaliar comentários, respondê-los, compartilhá-los em suas redes sociais e anexar imagens. Isso é muito interessante, por exemplo, em um post de tutoriais, como esse. Se o leitor ficou com dúvida em um passo, basta ele tirar um print do que fez e mandar no comentário para o autor.

Isto posto, vamos ao tutorial. E antes de começar, já vem uma grande vantagem: você não precisa mexer em nada do HTML do seu blog!

Atualização (10 de fevereiro de 2016): O layout do site da Disqus foi reformulado. Desse modo, algumas imagens apresentadas abaixo podem estar um pouco diferentes das que você verá no site.

 Adicionando a Disqus ao seu Blog

1. Acesse disqus.com e clique em Sign Up.

Clique em Sign Up

2.1. Para criar a conta, digite seu e-mail, username (apenas letras e números, sem espaços) e password (senha, de preferência, que contenha letras maiúsculas e minúsculas, números e caracteres especiais) e clique em Create Account.

2.2. Ou clique no ícone de uma das redes sociais e siga com a criação da conta.

Crie sua conta

3. Na próxima janela, clique no ícone da engrenagem (localizada no topo direito da página) e selecione Add Disqus To Site.

Adicione a Disqus ao site

4. Nesta etapa, você vai criar um perfil para o seu Blog. Em Site name, escreva o nome dele. Em Choose your unique Disqus URL, será gerado um endereço assim que você escrever o nome do seu blog, Você pode alterá-lo, se quiser. Em Category, selecione uma categoria adequada para o assunto do seu blog. Não encontrando um, selecione Others (outros). Logo após, clique em Finish registration.

Crie um perfil para o seu blog

5. Escolha a plataforma Blogger. Caso não esteja aparecendo essa tela, note a hierarquia das opções: Settings > Install > Blogger.

Escolha a plataforma do seu blog

6. Nesta etapa, temos três opções, mas realizaremos apenas duas. A primeira é adicionar o widget da Disqus em seu blog. E a segunda, importar os comentários já existentes em seu blog.

Adicionar widget e importar comentários existentes

6.1. Para adicionar o widget em seu blog, clique em 1 Add <seublog> to my Blogger site. Uma página do Blogger será aberta igual a que aparece na imagem abaixo. Atente-se para o blog selecionado. Em título, deixe como está (não se preocupe, ele não aparecerá no blog). Em seguida, clique em Adicionar widget.

Clique em Adicionar widget

6.2. Caso você já tenha comentários nas suas postagens do blog, você pode importá-los. Dessa forma, você não perderá esses comentários, pois eles continuarão aparecendo nos posts. Para importar, clique em 2 Import your existing Blogger comments into Disqus at Tools>Import.  Aparecerá duas opções. Note a hierarquia: Discussions > Import.

Opções para importar e sincronizar comentários

6.2.1. Clique em Import comments from Blogger. Será aberta uma janela do Blogger informando que um aplicativo está solicitando acesso. Basta clicar em Permitir.

Clique em Permitir

E logo após, selecione o blog correspondente.

Selecione o seu Blog

6.2.2. Caso você queira sincronizar os novos comentários da Disqus com o sistema do Blogger, clique em Enable syncing (ver imagem do passo 6.2).

No caso do meu blog, quando ativei a opção para sincronizar os novos comentários, ao recebê-los, eles apareciam na postagem normal, assim como no painel da Disqus. Porém, no painel do Blogger, eles apareciam na última postagem do blog. Por esse motivo, desativei a sincronização e desabilitei os comentários no Blogger. Dessa forma, continuo recebendo os comentários pelo Disqus, mas eles não são contabilizados no painel do Blogger. Esse bug pode ou não acontecer com o seu blog.

Editando a box de comentários

Você já deve ter percebido que tudo está funcionando corretamente, mas as opções na box estão em inglês: comments, share, etc. Para deixar tudo em português, além de fazer outras alterações, clique em Settings.

Personalize a box

A primeira box destacada indica que a importação de comentários está ocorrendo. Quando ela for finalizada, aparecerá uma notificação em verde. Para melhor visualização, separamos duas seções na imagem acima. Na primeira (com bordas azuis), você altera a aparência da box, como a cor do tema e o texto que aparecerá ao lado do seu nome quando você comentar em seu próprio blog, Por padrão, aparece Mod (de moderador). Na segunda seção, você define como quer que apareça a contagem dos comentários.

Rolando a página, você verá várias opções. Vá editando conforme as suas necessidades. Você pode alterar o idioma para o português do Brasil ou o europeu.

Selecione Portuguese (Brazil) ou apenas Portuguese (de Portugal)

Após todas as alterações, não se esqueça de clicar em Save Changes (Salvar alterações).

  Quer ajudar o nosso blog?

Este tutorial foi útil pra você? Te ajudou a melhorar o seu blog? Então nos ajude também, dê like, comente e compartilhe este post. Ah, e deixe também sua doação em dinheiro:

FAÇA SUA DOAÇÃO ONLINE CLICANDO AQUI

Conclusão

Após esse gigante tutorial, sua box de comentários da Disqus deve estar funcionando. Agora os seus leitores poderão comentar com mais opções, como inserir imagens e avaliar os outros comentários.

Tá difícil?

Podemos fazer isso pra você.
Contrate-nos

Dez dias de silêncio total

Não, isto não é nome de filme, mas sim a situação atual deste blog. Está difícil encontrar um assunto que não me gaste muito tempo e que seja bom pra postar aqui. Mas não pense que estou parado sem fazer nada. Na verdade, estou parado sim (exatamente, sentado), mas fazendo muita coisa. Tem muita coisa boa pra fazer pra pouca vida.

Imagem: http://www.imagui.com / Edição nossa

Não virei poeta nem filósofo, mas às vezes minhas constatações me fazem delirar nas frases. Mas isso é assunto pro futuro. E falando em futuro (e em como eu estou fazendo alguma coisa nesse período de silêncio), topicarei  (ou num português mais correto, porei em tópicos) as ações deste mês que este ser que vos escreve fez e está fazendo. Será uma espécie de prestação de contas. Além do que fiz, discriminarei o que farei. Então vamos lá!

(Tá, sei que ninguém tá perguntando! Mas pelo menos assim, escrevo algo aqui também. Aliás, como escritor deste blog, acho que tenho certa liberdade, não é?)

Primeiro: (mas não mais, nem menos, importante) quebrei a cabeça para transformar este blog adaptável a todos os dispositivos móveis. Literalmente, não quebrei-a, mas que ela doeu, isso sim, ela doeu. A plataforma Blogger complica algumas coisas lá no seu código HTML. É uma sofrência que só fazer aquela barra lateral desaparecer e o conteúdo principal centralizar. Sim, só por esses dois motivos, a minha primeira tentativa de deixar isso aqui responsivo, em meados de 2014, foi por água abaixo. Porém, no início desse ano, quando vi que alguém acessou o blog de uma resolução 360x480px, fiquei preocupado. Este espaço não estava preparado pra isso. Não que este usuário móvel não fosse bem-vindo, mas não estávamos adequados. Li no Tableless sobre layout e tals, do crescimento de acesso por dispositivos de resolução pequena e decidi que eu deveria ingressar nesse mundo. E assim fiz. Descobri como desaparecer aquela coluna, centralizar a outra, adequar o cabeçalho, (re)criar menus e tudo mais que era necessário. Só isso (que não tem nada de "só") levou dias para ser concluído (e olha que ainda não está concluído).  

Segundo: com a conversão do layout do blog para o layout responsivo, surgiu um problema. Filosofando um pouco, os problemas movem o mundo. É a partir de um problema que tomamos atitudes a fim de solucioná-lo. Assim, acabamos evoluindo como resultado disso. Eu tinha um sistema de comentários do Facebook aqui. Só que ele não se adaptava ao dispositivos menores. Procurei em todos os cantos da internet, mas não achei nenhuma solução plausível. Tinha uma dica lá que ao invés de adaptar a box de comentários, escondia as partes extras, mas isso não  me pareceu bom, pois acabaria ocultando partes importantes. Então, não tendo pra onde correr, e lembrando que eu tinha um sistema de comentários em teste, resolvi aplicá-lo ao blog. O Disqus, um ótimo sistema de comentários que além de poder comentar (obviamente né), você pode responder, avaliar os comentários, pôr imagens neles e ser notificado via e-mail quando alguém te responder. Supimpa isso né? E o melhor de tudo para nós blogueiros é que não precisa mexer no HTML do blog. Prometo que em breve postarei um passo a passo de como instalá-lo em seu blog  e configurar tudo certinho.

Terceiro e último: tenho sentimentos. Bom, isso não é novidade, todos temos sentimentos!! Repararam que eu mesmo escrevo, eu mesmo me respondo e eu mesmo passo vergonha com minhas afirmações. Pois é. Então, assisti nessa semana a um filme que me deixou muito emocionado. O filme se chama "My Girl", em português, ficou "Meu primeiro amor". O filme é de 1991 (um ano muito importante, porque eu nasci). Simplesmente, fantástico. Até comprei o DVD hoje, que provavelmente chegará aqui em casa daqui a 9 dias. Bastante tempo. Depois que chegar aqui e eu assistir de novo, tanto o filme como os extras, farei um post especial falando de tudo o que gostei deste filme.

Bom, é isso. Espero que vocês entendam a minha ausência momentânea. Esse silêncio não durará muito tempo. Daqui a um mês, estarei começando meu mestrado e com certeza, terei muita coisa pra contar pra vocês. Até o próximo post!

O canhoto em concursos públicos

Fui fazer a inscrição para um concurso público aqui da minha cidade e me deparei com a seguinte opção: vosmecê necessita de condição especial para a realização da prova? Daí eu me fiz outra pergunta: Ser canhoto é uma condição especial nesse caso?

Imagem: http://www.diariofemenino.com

Sabe-se que a muito tempo atrás (nem tanto) o canhoto era muito estigmatizado, alguns achavam que ele tinha pacto com o "coisa ruim" e chegava até a apanhar dos pais ou professores para escrever com a mão "certa". O tempo passou (e eu sofri calado...) e as coisas mudaram. Mas ainda hoje, alguns avôs ficam grilados ao ver seus netos esquerdando por aí. Além dos avôs, parece que boa parte dos organizadores de concursos não reparam que há muitos canhotos fazendo prova.

Na universidade onde me formei em 2013, nunca tive problema de acessibilidade por ser canhoto. As carteiras e cadeiras eram aquelas do padrão "escola brasileira". Bom, no último ano, eles colocaram umas cadeiras padrão fifa, mas só deu pra aproveitar um pouquinho. Porém, a maioria das universidades - que são os lugares onde geralmente se prestam vestibulares e concursos públicos - as carteiras são universitárias - aquelas que só tem espaço para a bunda e um dos braços, que geralmente é o direito.

Me lembro de três concursos que fiz. Em apenas um deles tinha a opção para pedir carteira canhota no ato da inscrição. Fiquei felizão da vida. Mas a alegria acabou assim que adentrei na sala e vi meu nome colado numa carteira para destros. Chamei o fiscal, exigi uma carteira canhota, como estava descriminado na minha inscrição (aliás, até no papel que eles colaram na carteira estava escrito: canhoto). Eles ficaram igual barata tonta, não sabiam pra onde ir. Sorte que uma menina destra a duas fileiras de distância estava com uma carteira canhota. Trocamos, mas não namoramos (coisas da vida). Dos outros dois concursos, aconteceu a mesma coisa, só que em um deles os fiscais não encontraram uma carteira canhota. Resultado: fiz a prova virado pro lado e saí do local (quatro horas depois) com dor nas costas (e no resto de mim). Dava até pra colar, mas acho que o vizinho de carteira não era muito inteligente.

No concurso público que acabei de me inscrever, coloquei que sim, que precisava de uma condição especial: uma carteira para canhotos. Sou especial, ora essa!! E, se no dia da prova, eu não ver minha carteira bonitinha, vai ter protesto. Vou sair às ruas escrevendo cartazes com a mão direita, à exemplos de protestos que vemos por aí, onde mostram as tetas - eu vou mostrar os dedos direitos. Vou nada, farei a prova normalmente, pois estou precisando de dinheiro! (risos)

Promessa é dívida

Como prometido no primeiro post do ano, posto agora a foto do avião que eu fiz. Calma lá! Não fiz nenhum Boeing não. Esse nem sequer voa. É uma miniatura de um avião qualquer em papelão. Tá faltando rodas, turbinas, motor, etc. Que papelão!!

Avião super moderno com ar condicionado natural.

E o papelão não acaba por aí. Quando terminei de desenhar o projeto, percebi que não tinha estilete para cortá-lo. Usei uma tesoura sem ponta (segurança é tudo). Por isso que o corte está uma belezura (respeitando os dois milímetros para mais ou para menos de onde o rabisco do lápis estava desenhado).

Terminada a parte de corte, veio a parte das dobraduras. Usando a régua, deu pra seguir as regras. Depois, outra coisa triste aconteceu. - Onde está a cola??? - Que cola? (alguém poderia ter me perguntado e eu poderia ter respondido:) - Aquela que... deixa pra lá. Não tinha cola. Então encontrei uma fita adesiva, que já passou da validade desde dezembro de 2011 (segundo a fabricante).

Tudo bem que o avião tá todo remendado, mas a fita, mesmo depois de inválida (segundo a fabricante), está cumprindo seu papel. Até agora, não soltou nenhuma tirinha. Partindo para um momento de reflexão (ligue a música Only time da Enya), podemos comparar a fita adesiva às pessoas. Mesmo que algumas sejam mais fechadas e não se mostrem muito, elas podem surpreender de variadas formas, bastando apenas que você lhe dê uma chance (desligue a música).

É isso. Caso alguém queira o projeto para fazer seu avião em casa, é só comentar aí embaixo.  Reparou que o box de comentários tá diferente agora?! Para escrever um comentário, basta escrevê-lo (obviamente, né?!) e fazer o login (pode ser com sua conta do Facebook ou Google). Até a próxima!

Para todos os dispositivos

Acho que neste post posso usar o lema da Rede Globo de final de ano: o futuro já começou! E nesse clima de festa comunico aos senhores que este blog agora está adaptado para todos os dispositivos móveis e tamanhos de tela. Viva!!!

Layout responsivo

Já fazia um tempão que eu estava querendo transformar o layout deste blog em responsivo. Ou seja, um layout que se adaptasse a cada tamanho de tela. A plataforma blogger já disponibiliza uma versão mobile para o blog, mas é quase impossível customizá-la.

Passei três dias mexendo nos códigos do blog. Tirei muitos códigos que não funcionavam mais e só estavam atrasando o carregamento da página e adicionei, para que a página se comporte de maneira diferente em cada tamanho de tela.

Além dessa mudança, há um tempo já venho fazendo uma coisa para tornar o blog mais acessível. Em todas as imagens que posto aqui, atribuo um "alt" à ela. Ademais do alt exibir um texto alternativo quando a imagem não for carregada, ele faz com que leitores eletrônicos façam uma descrição da imagem para pessoas que tenham algum tipo de deficiência visual.

Bom, mas agora, o Mas qué sé yo está acessível a todos os dispositivos. Você pode tentar provar isso acessando de seu celular ou redimensionando a janela do seu navegador.

Previsões para o signo de Capricórnio

Olá, capricornianos! Veja o que os Astros dizem para você no seu mês de signo. Temos ótimas previsões pra você, principalmente no andar do seu coração.

Imagem: http://www.imagens.usp.br

O seu astro regente é a Lua Apaixonada, então dê atenção às luzes que ela pode está refletindo sobre você. Não se enfureça por parecer um mar grande e insensível. Todo mundo sabe que você é mais chorão do que o Chorão (de certa banda).

Tome cuidado com o Sol, pois esse é o lado ruim da coisa. Pode-se criar uma tríade ente vocês. Espere ele se afastar, para assim, se entregar de alma lavada.

Fontes: "A lenda" - Sandy e Junior

Primeiro do ano

Veja bem, tem hora que dormir não é a melhor opção, mesmo não havendo outras. Tá, ficar acordado é uma condição, mas nem sempre viável. Mas, mais não-viável (ou inviável) é ficar acordado se questionando dessas coisas. Ora, o ano mal começou e já me pego nessas dúvidas da vida. Começo a escrever às 01:52 da madrugada achando que encontrarei respostas para más perguntas.

Imagem: http://www.ticbeat.com

Então vamos às perguntas. Que perguntas são essas? Não existem, assim como as respostas. Querendo ou não, estarei dormindo daqui a pouco. E dos sonhos, qué sé yo. Estou produzindo uns filmes muito doidos enquanto estou com os olhos fechados. Eu mesmo produzo; eu mesmo assisto; (e depois) eu mesmo esqueço. Já vi dicas que dizem para eu ter um caderninho comigo assim que acordar, pra escrever o que sonhei. Ainda não tive coragem de seguir essa dica. Também, minha letra já não ajuda muito; como é que querem que eu escreva algo ao acordar. Impossível. Talvez se eu levantasse, ligasse o computador... mas esses 45 segundos já me fariam perder 75% das informações sonhares (informações de sonhos;  estou dando nossos sentidos a algumas palavras, vai que eu vire linguista algum dia).

Decido ficar acordado por mais um tempinho e sigo escrevendo. Já começou 2015, né? Espero muita coisa boa deste ano, assim como esperava de 2014. A gente sempre espera o melhor, pelo menos as pessoas normais. E 2014 foi, pra mim, como um ano de férias. Não fiz nada produtivo. Apenas engordei vendo as coisas passarem. Nem sequer desenhei. Agora, no finalzinho, fiz um avião de papelão (risos). É verdade, no próximo post eu posto algumas fotos dele aqui.

Nesse novo ano, inicio o meu mestrado. Não sei quem será meu orientador (tenho minhas desconfianças) e não sei se seguirei com meu projeto, ou o orientador fará umas mudanças radicais (essas palavras não são minhas). Acho que vai ser a grande coisa do ano. Espero que passe bem devagar. Pra que pressa se a cada ano que passa, nos aproximamos mais da morte. A morte pode até ser uma coisa boa (tem maluco pra tudo), mas eu prefiro continuar vivo. Tá bom do jeito que tá, mesmo não tando tanto. Ah, tem mais uma coisa boa pro ano. Pode ser boa. Serei professor de baixo. Já encontrei até minha aluninha pra fevereiro. Estou criando muita expectativa pra isso. Espero que ela aprenda bem a tocar este instrumento e até que me supere. Vamos ver como vai ser. Quando se trata de música, eu sou bastante rígido (não sei se isso é bom ou não). pego pesado, faço a pessoa chorar. Isso me lembrou de algumas coisas, talvez eu conte futuramente (risos).

Pra finalizar, digo que vou dormir. Boa noite!