Tweet
Vamos ver uma das formas, atualmente funcionando (29/01/2014), para se postar gifs animados e transparentes sobrepondo o conteúdo da home feed de seus amigos no Facebook.
Iniciamos com a criação do Gif. Nâo precisa ser animado ou transparente se você quiser, e também vale baixar pronto da internet. Aqui vou usar o Gimp.
Criando o Gif
Deixei essa seção pois muitos perguntam como criar um Gif animado e transparente no Gimp.
Inicie escolhendo um tamanho. A div onde ficam os posts no Facebook possui 530px de largura. Logo, qualquer valor que ultrapasse isso passará dos limites na página, criando um efeito ainda mais legal. Mas cuidado para não ultrapassar muito, pois uma parte da animação pode entrar embaixo do chat (como a posição do chat depende da resolução da tela do usuário, não há como setar um limite de largura).
Crie a imagem no menu Arquivo > Novo e diga o tamanho desejado (aqui escolhi 1024x130, mas esse valor entrou embaixo do chat na minha tela, como verão no final. Escolha um menor).
Adicione canal alfa na camada, clicando com o botão direito na camada na janela "Camadas, Canais, Vetores, Desfazer" e selecionando "Adicionar canal alfa". Em seguida, na janela principal, dê um Ctrl + A e Delete para remover o fundo branco. Este ficará quadriculado (significa que está transparente). Assim faremos nosso gif ficar transparente e seus elementos ficarem sobre os elementos da página, tornando o efeito ainda melhor.
A minha intenção é aparecer primeiramente apenas "Follow", e em seguida, "Follow @0KaL_H4" (Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...). Assim, primeiro crio um texto "FOLLOW @0KaL_H4".
Na janela de camadas, clico com o botão direito no texto e clico em Combinar abaixo, tornando o texto e o fundo em uma única camada.
Para criar o segundo frame da animação, basta clicar na única camada existente e clicar em Duplicar.
Remova a visualização da camada original ("Fundo") clicando no ícone de olho em sua frente. Na camada "cópia do Fundo", usando a ferramenta borracha, vou apagar o @0KaL_H4 para que apareça apenas o "FOLLOW".
Feito isso, vamos salvar pelo menu Arquivo > Exportar (ou Salvar como, caso esteja em uma versão mais antiga). Digite um nome e clique em Salvar.
Na janela que aparece, selecione "Salvar como animação".
Na próxima janela, selecione "Um quadro por camada (substituir)" em "Disposição do quadro". Isso serve para que as camadas não se sobreponham, desfazendo a animação. Também podemos incluir "(replace)" ou "(substituir)" ao final do nome de cada camada, mas isso só seria mais trabalho.
Selecione também a duração (é possível setar a duração para cada quadro colocando o valor entre parêntesis no nome da camada. Ex.: "Fundo (500ms)(substituir)").
Pronto! Nossa animação está criada.
Enviando ao Facebook
Nota: precisaremos de um navegador atual que suporte inspeção de elementos, como o Google Chrome ou Mozilla Firefox.
Primeiro, vamos entender como o Facebook trabalha com as imagens.
O serviço utiliza esse script:
Para redimensionar as imagens para o tamanho ideal e também remover animações, caso possua. Mas o script ignora arquivos que já estejam dentro do servidor do Facebook, pois os sistemas de upload do Facebook já redimensionam e removem animações.
Tudo o que precisamos fazer é enviar um arquivo para dentro do servidor do Facebook, driblando o filtro, sedento por redimensionar e remover nossa animação. Mas não é nada muito difícil, afinal, alguns formulários de upload do Facebook não possuem esse filtro. Um deles é o de upload de arquivo (cuidado: não é o de upload de imagens) dos grupos do Facebook.
Para não incomodar ninguém, vamos criar um grupo (de preferência, secreto). E, para não incomodar ninguém, novamente, precisamos ter uma segunda conta falsa, pois o Facebook não permite a criação de grupos sem que inicie pelo menos com 2 membros (incluindo você). Mas adicionar a mãe ou a tia não tem problema.
Com o grupo criado, selecione "Adicionar arquivo". E em "De seu computador", clique em "Selecionar arquivo" e selecione o Gif que você deseja postar. Em seguida, publique!
Feito isso, precisamos agora pegar um vídeo qualquer no YouTube (é possível fazer isso com qualquer link que gere uma imagem de previsualização. Sugeri o YouTube por ter certeza que qualquer link lá de dentro trará uma imagem de visualização). Pode ser qualquer um. Só não pode colocar o que sua mãe não pode ver, pois além de você poder ser banido do Facebook, sua mãe também pode clicar no seu Gif e assistir ao vídeo, que será carregado normalmente.
Abrindo o vídeo, clique em "Compartilhar esse vídeo" e, em seguida, no ícone do Facebook. Uma janela pop-up se abrirá.
Tudo o que precisamos nela é seu endereço (URL). Copie-o e feche a janela. Em seguida, cole-o na barra de endereços e pressione Enter. A mesma janela abrirá, mas dessa vez, em tamanho grande.
Mas vamos com calma. Ainda não terminamos. Precisamos pegar o endereço do arquivo Gif, dentro do servidor do Facebook. Portanto, de volta ao grupo que criamos, clique com o botão direito no botão "Baixar" e selecione "Copiar endereço do link".
Note que, ao tentar acessar o endereço copiado, a imagem é baixada. Isso porque o servidor do Facebook envia ao navegador, nos cabeçalhos HTTP, uma informação dizendo que o arquivo é para ser baixado, e não exibido (mesmo sendo apenas uma imagem). No entanto, quando a imagem está sendo inserida na página (pela tag HTML <img> ou url() do CSS), o navegador ignora essa informação e apenas exibe a imagem normalmente.
Voltando à janela de postagem de vídeos, clique com o botão direito na imagem de previsualização do vídeo e clique em "Inspecionar elemento". Role um pouco o código para cima (bem pouco), até encontrar essa linha:
Clique duas vezes sobre o endereço da imagem, que começa no "http://" e termina no "maxresdefault.jpg". Precisa ser no endereço (caso esteja como link, clique um pouco antes e selecione, com o mouse, o mesmo).
Note que ele será selecionado. Dê um Ctrl + V para colar substituindo pelo endereço de nosso Gif nos servidores do Facebook e dê enter.
Nada muda? Nâo se preocupe. Ao final da página, clique em "Compartilhar". A janela se fechará.
Visite sua home feed e dê a sorte de se deparar com seu próprio post. Legal, não é?
Nota: Isso só vai funcionar na Home feed. Não será visível no seu perfil ou na visualização de post único.
Iniciamos com a criação do Gif. Nâo precisa ser animado ou transparente se você quiser, e também vale baixar pronto da internet. Aqui vou usar o Gimp.
Criando o Gif
Deixei essa seção pois muitos perguntam como criar um Gif animado e transparente no Gimp.
Inicie escolhendo um tamanho. A div onde ficam os posts no Facebook possui 530px de largura. Logo, qualquer valor que ultrapasse isso passará dos limites na página, criando um efeito ainda mais legal. Mas cuidado para não ultrapassar muito, pois uma parte da animação pode entrar embaixo do chat (como a posição do chat depende da resolução da tela do usuário, não há como setar um limite de largura).
Crie a imagem no menu Arquivo > Novo e diga o tamanho desejado (aqui escolhi 1024x130, mas esse valor entrou embaixo do chat na minha tela, como verão no final. Escolha um menor).
Adicione canal alfa na camada, clicando com o botão direito na camada na janela "Camadas, Canais, Vetores, Desfazer" e selecionando "Adicionar canal alfa". Em seguida, na janela principal, dê um Ctrl + A e Delete para remover o fundo branco. Este ficará quadriculado (significa que está transparente). Assim faremos nosso gif ficar transparente e seus elementos ficarem sobre os elementos da página, tornando o efeito ainda melhor.
A minha intenção é aparecer primeiramente apenas "Follow", e em seguida, "Follow @0KaL_H4" (Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...). Assim, primeiro crio um texto "FOLLOW @0KaL_H4".
Na janela de camadas, clico com o botão direito no texto e clico em Combinar abaixo, tornando o texto e o fundo em uma única camada.
Para criar o segundo frame da animação, basta clicar na única camada existente e clicar em Duplicar.
Remova a visualização da camada original ("Fundo") clicando no ícone de olho em sua frente. Na camada "cópia do Fundo", usando a ferramenta borracha, vou apagar o @0KaL_H4 para que apareça apenas o "FOLLOW".
Feito isso, vamos salvar pelo menu Arquivo > Exportar (ou Salvar como, caso esteja em uma versão mais antiga). Digite um nome e clique em Salvar.
Na janela que aparece, selecione "Salvar como animação".
Na próxima janela, selecione "Um quadro por camada (substituir)" em "Disposição do quadro". Isso serve para que as camadas não se sobreponham, desfazendo a animação. Também podemos incluir "(replace)" ou "(substituir)" ao final do nome de cada camada, mas isso só seria mais trabalho.
Selecione também a duração (é possível setar a duração para cada quadro colocando o valor entre parêntesis no nome da camada. Ex.: "Fundo (500ms)(substituir)").
Pronto! Nossa animação está criada.
Enviando ao Facebook
Nota: precisaremos de um navegador atual que suporte inspeção de elementos, como o Google Chrome ou Mozilla Firefox.
Primeiro, vamos entender como o Facebook trabalha com as imagens.
O serviço utiliza esse script:
Código:
https://fbexternal-a.akamaihd.net/safe_image.php
Tudo o que precisamos fazer é enviar um arquivo para dentro do servidor do Facebook, driblando o filtro, sedento por redimensionar e remover nossa animação. Mas não é nada muito difícil, afinal, alguns formulários de upload do Facebook não possuem esse filtro. Um deles é o de upload de arquivo (cuidado: não é o de upload de imagens) dos grupos do Facebook.
Para não incomodar ninguém, vamos criar um grupo (de preferência, secreto). E, para não incomodar ninguém, novamente, precisamos ter uma segunda conta falsa, pois o Facebook não permite a criação de grupos sem que inicie pelo menos com 2 membros (incluindo você). Mas adicionar a mãe ou a tia não tem problema.
Com o grupo criado, selecione "Adicionar arquivo". E em "De seu computador", clique em "Selecionar arquivo" e selecione o Gif que você deseja postar. Em seguida, publique!
Feito isso, precisamos agora pegar um vídeo qualquer no YouTube (é possível fazer isso com qualquer link que gere uma imagem de previsualização. Sugeri o YouTube por ter certeza que qualquer link lá de dentro trará uma imagem de visualização). Pode ser qualquer um. Só não pode colocar o que sua mãe não pode ver, pois além de você poder ser banido do Facebook, sua mãe também pode clicar no seu Gif e assistir ao vídeo, que será carregado normalmente.
Abrindo o vídeo, clique em "Compartilhar esse vídeo" e, em seguida, no ícone do Facebook. Uma janela pop-up se abrirá.
Tudo o que precisamos nela é seu endereço (URL). Copie-o e feche a janela. Em seguida, cole-o na barra de endereços e pressione Enter. A mesma janela abrirá, mas dessa vez, em tamanho grande.
Mas vamos com calma. Ainda não terminamos. Precisamos pegar o endereço do arquivo Gif, dentro do servidor do Facebook. Portanto, de volta ao grupo que criamos, clique com o botão direito no botão "Baixar" e selecione "Copiar endereço do link".
Note que, ao tentar acessar o endereço copiado, a imagem é baixada. Isso porque o servidor do Facebook envia ao navegador, nos cabeçalhos HTTP, uma informação dizendo que o arquivo é para ser baixado, e não exibido (mesmo sendo apenas uma imagem). No entanto, quando a imagem está sendo inserida na página (pela tag HTML <img> ou url() do CSS), o navegador ignora essa informação e apenas exibe a imagem normalmente.
Voltando à janela de postagem de vídeos, clique com o botão direito na imagem de previsualização do vídeo e clique em "Inspecionar elemento". Role um pouco o código para cima (bem pouco), até encontrar essa linha:
Código HTML:
<input type="hidden" id="input_picture" name="picture" value="http://i1.ytimg.com/vi/videoid/maxresdefault.jpg">
Note que ele será selecionado. Dê um Ctrl + V para colar substituindo pelo endereço de nosso Gif nos servidores do Facebook e dê enter.
Nada muda? Nâo se preocupe. Ao final da página, clique em "Compartilhar". A janela se fechará.
Visite sua home feed e dê a sorte de se deparar com seu próprio post. Legal, não é?
Nota: Isso só vai funcionar na Home feed. Não será visível no seu perfil ou na visualização de post único.
