2013/10/03

Serviço de Redimensionamento de Imagens do Google


Nos últimos tempos andei a "partir a cabeça" para tentar fazer com que a integração do Aberto até de Madrugada com o Facebook e o Google+ funcionasse de forma perfeita. Isto é, que quando fizessem partilhas de posts no Facebook, Google+, ou outros serviços, aparecesse o resumo adequado com a imagem certa a acompanhar.



Não vos vou fazer sofrer pela luta que isso foi, entre as variáveis de ter que funcionar nos diferentes casos (link do site global, com logotipo; links de artigos específicos, com a imagem do artigo; etc. etc.) já que há muitos outros artigos a explicar como fazer isso. Mas depois de ter quase tudo a funcionar como queria, havia um pequeno problema que permanecia.

Na plataforma do blogger podemos especificar que a imagem a usar é um thumbnail da primeira imagem do post; mas para o Facebook, essa imagem tem obrigatoriamente que ter uma dimensão superior a 200x200. Quando isso não acontece o Facebook tenta encontrar a imagem adequada. Em tempos, isso funcionou de forma correcta; mas ultimamente, parecia ter ganho preferência pela minha foto do perfil - fazendo com que todas as partilhas manuais, colando um link num post do Facebook, aparecessem com o meu rosto - o que não eram bem o que se desejaria...

Perdi vários fins-de-semana a tentar resolver isso, sem sucesso... e acreditando que as pessoas usariam os botões de gostar/enviar nos próprios artigos para partilhar os mesmos, e assim evitar o único caso em que a coisa não estava a funcionar (o "paste" directo do link no Facebook). Mas no outro dia, tive uma nova "reclamação" que me fez voltar a atacar o problema... e desta vez, consegui resolvê-lo!


Como vos tinha dito, o problema tinha a ver com o Facebook não aceitar a imagem que lhe estava a indicar por ser demasiado pequena. O Blogger tem várias artimanhas que permitem redimensionar imagens mudando-se uns parâmetros no URL, mas infelizmente isso apenas afecta a sua apresentação e não a sua dimensão real - portanto, mesmo que conseguisse arranjar forma de modificar o URL da imagem "thumbnal" para que tivesse as dimensões de 200x200 pixeis, o Facebook não a reconheceria (para além de que também não faço ideia de como iria fazer essa modificação do URL no "pre-processing" no template do blogger).

Portanto, a solução passava por encontrar um serviço de redimensionamento efectivo de imagens - algo que me fez relembrar um dos meus primeiros CGI (na altura feito em Delphi) que fazia precisamente isso, redimensionando e mudando a qualidade das imagens dinamicamente. Mas... não estava com vontade nenhum de voltar a esses tempos, ter que manter um servidor só para esse efeito, etc. etc. Certamente já deveria haver algo na internet que fizesse algo parecido, certo?

E efectivamente há, e é do próprio Google (o que é simpático para manter tudo em família).

O Google tem um serviço de redimensionamento de imagens dinâmico que pode ser acedido via o seguinte URL:

  • https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&gadget=a&rewriteMime=image&resize_h=200&resize_w=200&url=

Para quem já estiver habituado a estas coisas, o link é auto-explicativo; para os outros, faço um resumo rápido. Usando este link, podemos obter uma imagem com o tamanho pretendido, passando a dimensão nos parâmtros "resize_h" (altura) e "resize_w" (largura). Isto permite-me fazer com que o pequeno thumbnail indicado pelo Blogger seja redimensionado para as dimensões mínima de 200x200, assim satisfazendo os requisitos do Facebook. A qualidade da imagem não será a melhor, mas considerando que isto é apenas para os casos de "copy-paste" de links manualmente no Facebook, parece-me melhor opção do que lá ter o meu rosto como "default".

Repito: no caso das partilhas directas via os botões no site, a coisa funciona sem problemas com as imagens de maior resolução e qualidade, pelo que continuará a ser esse o método recomendado para que "gostem" dos nossos artigos.



[à esquerda imagem redimensionada pelo serviço; à direita imagem redimensionada pelo blogger]

Em jeito de comprovativo, podem ver a imagem desta grelha, que embora tenham o mesmo aspecto, no caso da esquerda é uma imagem que efectivamente tem 200x200 pixeis, redimensionada pelo serviço do Google; e na direita temos uma imagem que parece ter 200x200, mas na realidade continua a ter a dimensão original, sendo apenas redimensionada "posteriormente" pelo browser.

Há apenas um último aspecto a salientar, que devido a um qualquer bug, quando se tenta gravar uma destas imagens redimensionadas usando o Chrome, o ficheiro fica gravado com o nome "p.txt", quando na realidade se trata de uma imagem. Bastará trocarem-lhe a extensão para jpg para que a coisa fique resolvida. (Se tentarem aceder directamente ao serviço colocando url no vosso Chrome, o resultado também é o download desse ficheiro "p.txt"em vez de apresentar a imagem directamente - mas quando aplicada numa página web com o origem de um elemento imagem em HTML funciona como é suposto).

5 comentários:

  1. Não percebi se o problema era o redimensionamento da imagem ou definir qual a imagem que deve aparecer nos posts qdo fazemos a partilha da pagina.

    Se for o segundo caso, penso que podes definir automaticamente qual a imagem que deve aparecer (e deixar redimensionamentos com o facebook) com as meta_tags do face.

    Já usei isto a algum tempo, pelo que nao sei se ainda é válido, mas era qq coisa como isto:


    Podes ler mais aqui:
    http://davidwalsh.name/facebook-meta-tags

    ResponderEliminar
    Respostas
    1. A meta tag foi cortada mas era algo deste tipo: { meta property="og:image" content="URL_DA_IMAGEM"/}

      Eliminar
    2. Pois, eu sei e é o que uso. A limitação é que na programação no blogger, não há forma de especificar "a primeira imagem de um post" para que seja atribuída a essa meta tag - a única coisa aproximada é "thumbnail do post" que tem o tal inconveniente de ter a resolução abaixo da que o FB quer.

      Seria simples o blogger adicionar uma nova variável que desse acesso à imagem em resolução total... mas pedir alterações ao blogger é tipo pedir redução de juros à troika... são coisa irrevogáveis! ;)


      (Por outro lado, não especificar a imagem e esperar que o FB acerte na correcta é também uma lotaria!)

      Mas como tinha dito, isto era já uma situação específica, sendo que nas outras todas os shares e likes já funcionam de forma correcta e com as imagens na resolução total.

      Eliminar
  2. Carlos, hoje tem essa alternativa... na época do post não sei dizer se já estava disponível:
    - data:blog.postImageUrl
    - data:post.firstImageUrl

    ResponderEliminar
    Respostas
    1. Sim, o problema é que o post.firstImageUrl só funciona "dentro dos posts" e não está disponível quando se está na página principal, ou de pesquisa de labels, etc. o que invalidava o seu uso para os widgets de partilha no FB/G+, etc.

      Entretanto já passei os widgets para aparecerem apenas nos posts completos e não na home page, pelo que o problema também deixou de se colocar. :)

      Eliminar