segunda-feira, 27 de dezembro de 2010

Solução para miniatura de post do Blogger que não aparece - bug do Windows Live Writer

A possibilidade de exibir o recorte quadrado de uma imagem do Blogger-Picasa tem várias aplicações em widgets que usamos em nossos blogs. Uma delas é mostrar as miniaturas dos posts quando adicionamos uma lista de blogs à sidebar.

Porém, apesar de eu ter ativado as miniaturas, hoje observei que não aparece em meu blog nenhuma imagem para os blogs da lista Top 10.


Top 10

Eu entrei nesses posts e quatro dos cinco têm imagens. Sabe porque as miniaturas não aparecem? Os blogueiros usaram Windows Live Writer.

Apesar de suas 1001 facilidades, o WLW ainda não entende o formato inteligente de imagens do Picasa Web, sobre o qual já falamos nos posts:

Em TODA imagem adicionada e editada pelo Windows Live Writer é adicionado o código ?imgmax=800 ao final da URL. Além disso, não é colocado o parâmetro de tamanho da imagem, que é o que permite, por exemplo, a geração de uma miniatura quadrada sem distorção.

URL de uma imagem adicionada pelo WLW:

http://lh4.ggpht.com/_HlIyV_enpD8/TRiFbLMX0fI/AAAAAAAAKvE/584KuXhBQV0/calwp02_201012.jpg?imgmax=800

URL correta de uma imagem do Blogger-Picasa:

http://lh4.ggpht.com/_HlIyV_enpD8/TRiFbLMX0fI/AAAAAAAAKvE/584KuXhBQV0/s800/calwp02_201012.jpg

Isso é um bug que impede o Blogger de gerar as miniaturas. Provavelmente corrigirão isso quando tiverem consciência do problema. Além dos widget de listas de blogs, esse problema também afeta:

  • A miniatura do recurso Promova do orkut. Ao promover, o orkut acha outras imagens do blog, mas não as do próprio post.
  • As miniaturas dos posts relacionados para quem usa LinkWithin ou scripts similares. As pequenas imagens ficam distorcidas se as originais não forem quadradas.

Não afeta:

  • Geração de miniaturas para Facebook.

► Como resolver

Inicialmente, você tem duas alternativas:

  1. Adicionar suas imagens direto pelo Picasa Web e as editar com Picnik.
  2. Continuar usando o Windows Live Writer, mas lembrar-se sempre de editar a URL da imagem principal do post após publicá-lo.

Neste segundo caso, a edição da imagem deve ser feita no painel de controle do próprio Blogger, não dá para usar o WLW porque ele vai gerar o código “defeituoso” novamente. Após publicar:

  1. Abra o post no Blogger no modo HTML.
  2. Procure o código da imagem principal do post, ou seja, aquela que você quer que apareça como miniatura. Exemplo:
<img width="198" height="180" src="http://lh6.ggpht.com/_HlIyV_enpD8/TF8MkImanGI/AAAAAAAAKRM/F6obqi7D1uo/image%5B10%5D.png?imgmax=800" />
  1. Identifique a maior dimensão da imagem. No exemplo acima é a largura (width), que tem 198 pixels.
  2. Após a última barra da URL da imagem (última barra antes do sinal de interrogação), adicione o código s198/, sendo que 198 você substitui pela maior dimensão da imagem.
  3. Apague o código ?imgmax=800. Confira como ficou o exemplo acima após a correção:
<img width="198" height="180" src="http://lh6.ggpht.com/_HlIyV_enpD8/TF8MkImanGI/AAAAAAAAKRM/F6obqi7D1uo/s198/image%5B10%5D.png />

Você também pode fazer o inverso, ou seja, usar o código ?imgmax=800 para evitar que uma imagem indesejada se transforme em miniatura do post.

Imagem: SanrioTown

Até mais!

30 comentários:

  1. Olá, Helen!

    Eu já havia recebido reclamações de leitores do meu blog sobre este problema quando começaram a utilizar o WLW. Este é mesmo um problema chato!

    Espero que em uma versão futura do WLW isso seja corrigido. Enquanto isso não acontece, temos suas soluções para contorná-lo.

    Um abraço!

    ResponderExcluir
  2. Oi, Helen

    Baita dica!
    Há tempos quero entender porque as miniaturas não apareciam no blogroll de outros blogs. Resolvido.

    Valeu =)

    ResponderExcluir
  3. Gostei muito da descoberta Helen!

    Eu imaginava que tinha a ver com o WLW o fato de meu blog não mostrar miniaturas nos blogs alheios (já achei que era porque eu escrevia antes e depois de uns dois parágrafos colocava a imagem, daí testei colocando a imagem antes de qualquer palavra; imaginei também que fosse algo relacionado com o endereço da imagem: sem o "blogspot" na url da imagem upada pelo WLW). Mas nunca chegou a me incomodar.

    Só que eu dou a vida pra não ter que editar o post pelo formulário do Blogger. Ele detona a formatação de parágrafos. Como não sei explicar estas coisas direito, resumo apenas dizendo que no WLW os parágrafos são definidos por < p > < / p > e fica tudo bonitinho, daí, se resolvo editar pelo Blogger um post publicado, por qualquer motivo, ele mexe nesta configuração e a formatação fica num espaçamento diferente (menor e mais feio, na minha opinião).

    Então, acho que meu blog vai ficar sem miniaturas. :(

    Beijos!

    ResponderExcluir
  4. Carlinha, eu gosto apenas do editor HTML do Blogger, o editor visual é uma porcaria mesmo.

    Para evitar sofrimento, faça duas coisas:

    1. Vá até Configurações » Formatação e marque Não na opção Converter quebras de linha e salve.

    2. Vá até Configurações » Básico. No item Selecionar editor de postagem marque a opção Ocultar modo Escrever.

    Eu uso assim desde "sempre". Se eu soubesse que você sofria com isso tinha ensinado antes. ;)

    ResponderExcluir
  5. Helen, deu certo, mas deu um trabalhão!

    Meu código da imagem aparece muuuito diferente do que o que você mostrou, ele tem umas cinco linhas de informação, porque entra o código de abrir em nova aba, o código de texto quando passa o mouse e o tamanho das imagens (height e width) aparecem como última informação no meio disto tudo!

    E meu painel continua colocando os < br / > no lugar do < p >. Mesmo com tudo que você falou estando ativado (creio que seja problema do blogger de entender a mudança) daí tive que colocar meus códigos de parágrafos manualmente.

    De qualquer forma, valeu pelo desafio. Olha minha miniatura aí do lado!

    Beijos!

    ResponderExcluir
  6. Carlinha, na verdade eu já otimizo tudo no próprio WLW, por isso que meu código fica mais resumido. Link em imagem para a própria imagem, por exemplo, quase sempre é extremamente desnecessário, a não ser que realmente amplie a mesma e traga mais detalhes ou informações.

    Seu <p> tá virando <br> porque a senhorita está teimando e clicando no modo Escrever. Tem que deixar no modo HTML. Se quiser ver como está ficando use o botão Visualizar. Como eu já disse, o modo visual é uma porcaria e "fode" nosso código mesmo. kkk

    Até mais!

    ResponderExcluir
  7. Carlinha, outra opção é fazer esse tipo de edição no modo www ao invés do modo draft. Assim o botão de modo visual não aparece de "jeito manera", então não é possível cair em tentação.

    ResponderExcluir
  8. Carlinha, mas o mais importante é que você colocou em prática e, neste momento, seu blog é o único com miniatura no Top 10. Viva! \o/

    ResponderExcluir
  9. Helen, eu gosto que a imagem amplie e abra em nova aba, por isto faço isto no meu blog - desejo pros outros o que quero pra mim! Haha!

    Quanto ao problema de mudar o < p > pelo < br / >, foi resolvido. Eu tinha mudado a opção sim, como você ensinou, o problema era que o blog estava abrindo automaticamente no modo Escrever. Mas já arrumei, publiquei a postagem e fechei o navegador no modo Html. Quando abri pela segunda vez, tinha resolvido o problema.

    E, sim, o mais legal foi ver minha miniatura nos blogs amigos! Mais uma vez, obrigada! ;)

    ResponderExcluir
  10. Carlinha, foi exatamente isso que eu disse: "é extremamente desnecessário, a não ser que REALMENTE AMPLIE a mesma". ;)

    Se estava abrindo no modo Escrever é porque você não tinha desativado ele ainda, mas que bom que deu tudo deu certo agora. :D

    Volte sempre!

    ResponderExcluir
  11. O meu problema é com o noreply@blogger.com
    Faz 2 meses que mudou de postado por diana para postado por noreply@blogger.com (diana) e com isso as miniaturas de imagens não aparecem na lista de leitura (aquela do painel do blogger) eu não sou a unica a ter esse problema e nao sei como resolver. Já pensei até que era o linwthin ja q foi no msm periodo que eu instalei no meu blog. Poderia ajudar?

    ResponderExcluir
  12. Diana, no blog que está no seu perfil [httposso.blogspot.com] não vi esse problema. Se for em outro blog coloca o endereço aí para a gente dar uma olhada. ;)

    ResponderExcluir
  13. Muito boa dica! Ajudou imenso! (agora vou procurar por colocar imagem em posts que só têm vídeo)

    ResponderExcluir
  14. Paulo, nesse caso você pode usar um truque: colocar no post o código de uma imagem que não será exibida:

    <img width="0" height="0" src="http://lh6.ggpht.com/_HlIyV_enpD8/TF8MkImanGI/AAAAAAAAKRM/F6obqi7D1uo/s198/image%5B10%5D.png" />

    Outra forma:

    <img style="display:none" src="http://lh6.ggpht.com/_HlIyV_enpD8/TF8MkImanGI/AAAAAAAAKRM/F6obqi7D1uo/s198/image%5B10%5D.png" />

    Até mais!

    ResponderExcluir
  15. Oi Helen, me ajuda, to com esse problema, minha miniatura de postagem não aparece no blogroll dos outros.
    Eu uso o Picasa pra transferir as fotos, pq gosto das fotos grandes e pelo editor do blogger as fotos ficam pequenas. Não sei se há uma forma de mudar isso.
    Tentei o truque aí q vc falou mas não funcionou.
    Se puder me ajudar eu agradeço!

    ResponderExcluir
  16. Flavia, no endereço da imagem, se tiver s depois de http você tem que tirar.

    ResponderExcluir
  17. Olá Helen, e como faço para em uma página normal colocar as miniaturas para o facebook? Já coloquei ID="image", parametros, mas nada muda quando compartilho.

    Você sabe como posso identificar no HTML quais serão as miniaturas para a diculgação no facebook?
    Obrigado!!!

    ResponderExcluir
  18. Coutinho, todas as vezes que partilhei páginas no Facebook a miniatura apareceu normalmente. Como nunca tive esse problema não sei como ajudar.

    ResponderExcluir
  19. Olá fernanda tudo bem estou passando para disser que amei o seu blog e com ele estou conseguindo fazer muitas coisas, obrigado bjs..

    ResponderExcluir
  20. eu acho estranho que no linkwhitin aparece as imagens normalmente e num gadget que eu coloquei, feito por um usuário, com postagens mais recentes, as imagens tb aparecem.

    Porque será? o que me intriga mais é o gadget "postagens recentes" ser adicionado pelo proprio painel do blog e mostrar as imagens e o postagens populares, tb do painel, não mostra...

    eu amo o live writer, não sei blogar sem ele, mas queria que minha miniaturas aparecessem.

    Beijos e parabéns pela descoberta!

    ResponderExcluir
  21. Eu tava com problema para mostrar as miniaturas das imagens dos meus posts nas novas visualizações do Blogger (Flipcard etc...). Depois de ler o que você ensinou fui lá e só retirando o "?imgmax=800" já adiantou. Obrigado!

    ResponderExcluir
  22. Helen, tenho um problema parecido, esse problema tem afetado o widget de Postagens Populares, por mais que eu escolha a opção para aparecer as imagens ela não aparece, no inicio aparecia de uns tempo pra ca não aparece mais, é acontece em todos os blogs que crio na minha conta, como posso resolver, por favor me ajude!

    ResponderExcluir
  23. PaulO, sem ver o seu blog não consigo sequer chutar. Boa sorte!

    ResponderExcluir
  24. Oi Helen, estou com um problema no meu blog e não entendo quase nada de html e tals. Na página principal em que aparecem os resumos de cada post, aparece alguns códigos em html ao invés do texto, mas quando clica para abrir o texto, aí aparece normal. Será que você poderia me ajudar. Vou te passar o meu e-mail e qualquer coisa você entra em contato. (oiquetal@gmail.com). Desde já, obrigada.

    ResponderExcluir
    Respostas
    1. Já enviei a cobrança pelo serviço para seu e-mail via PayPal. Caso use outro tipo de pagamento eletrônico me avise. ;)

      Excluir
  25. Oieee... veja se pode me ajudar.
    tenho um blog a miniatura que aparece (quando mando link do blog para alguém, ou posto no face) é a da primeira postagem. Um bonequinho Minion.
    Gostaria que isso saísse. como posso fazer? me ajuda?

    ResponderExcluir
    Respostas
    1. Minha sugestão é usar uma imagem que fica oculta no blog, mas que é lida pelo Facebook:

      <img src="http://endereco-da-imagem" width="0" height="0" style="display:none; visibility:hidden;"/>

      Para essa imagem ser encontrada antes da imagem do post, coloque um novo gadget no topo da coluna em que ficam os posts.

      Tem que ser uma imagem que identifique o blog, mas não um post específico. Pode ser a logo, sua foto ou o print do blog.

      Para enviar a imagem use o Picasa ou faça um post de rascunho.

      Excluir
  26. Adoro suas dicas, são sempre muito valiosas pra mim.

    ResponderExcluir

Posts relacionados