Facebook: como aparecer uma miniatura do tour

Softwares disponíveis para publicar na internet, visualização no computador, formatos e conversão para impressão, papéis, tamanhos e tudo afim.
Avatar do usuário
cartola
Site Admin
Mensagens: 1228
Registrado em: 11 Mai 2012, 12:40
Localização: Rio de Janeiro
Contato:

Facebook: como aparecer uma miniatura do tour

Mensagem por cartola » 16 Abr 2018, 09:32

Oi pessoal, hoje vi uma pergunta lá no grupo do facebook que vale uma postagem aqui pra manter os registros futuros. O colega perguntou como fazer a imagem do tour aparecer ao compartilhar o link no face. O tour virtual, no caso, foi feito com o Kolor Panotour, que no final das contas usa o krpano. A dica que vou dar, porém, serve pra qualquer ferramenta.

Pra quem já entende de HTML ou pros apressados, a solução é criar uma miniatura e apontar pra ela no código HTML inicial do tour.

Agora vamos detalhar isso:

Quando a gente compartilha um link no facebook ele acessa essa página e busca uma imagem pra utilizar no compartilhamento. O problema é que o HTML inicial gerado pelo krpano e pelo Panotour (e possivelmente outras ferramentas) não tem uma imagem diretamente apontada por essa página. Essa página aponta pra um plugin que lê umas configurações pra saber onde achar as imagens. Além disso, normalmente o tour virtual não traz a panorâmica inteira, ele a traz picada em dezenas de imagens menores.

Normalmente eu publico minhas panorâmicas em um blog, então já crio uma miniatura sempre. Crio a partir da equirretangular com 500px de largura e coloco na mesma pasta do tour virtual. Digamos então que eu tenha criado a pasta "meu_tour_virtual" e que nela tenha colocado o arquivo "miniatura.jpg" e que a página de entrada da minha visita virtual seja "index.html":

/meu_tour_virtual
/meu_tour_virtual/miniatura.jpg
/meu_tour_virtual/index.html
/meu_tour_virtual/...

Dentro dessa pasta tem todos os outros arquivos gerados pelo krpano ou Panotour, ok? Eu preciso editar o arquivo index.html com um editor de texto simples. Recomendo o Notepad++, mas pode ser com o notepad (bloco de notas). Só não pode editar num editor de um Office, pois tem chance de estragar o código. Eu uso o VI/VIM, mas esse não recomendo pra quem já não o conheça.

A cara desse arquivo vai ser mais ou menos essa:

Código: Selecionar todos

<!DOCTYPE html><html>
<head>
        <title>Meu Tour Virtual</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
                <meta name="apple-mobile-web-app-capable" content="yes" />
                <meta name="apple-mobile-web-app-status-bar-style" content="black" />        
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />        
                <meta http-equiv="x-ua-compatible" content="IE=edge" />        
                <style>
                                @-ms-viewport { width:device-width; }                
                                @media only screen and (min-device-width:800px) { html { overflow:hidden; } }                
                                html { height:100%; }                
                                body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }        
                </style>
</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%;height:100%;">
        <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>        
        <script>
                        embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
        </script>
</div>

</body>
</html>
Vejam que não há imagens apontadas por esse arquivo. Por isso o facebook não bota uma miniatura.

Não é necessário entender de HTML pra fazer a pequena alteração que vou sugerir. Seguindo o exemplo que iniciei, vou colocar o código que aponta pra miniatura. Isso não vai influenciar em nada o tour virtual original, pois ele já ocupa toda a página quando o navegador o acessa. Se fosse possível ver além do que está na página aberta, essa imagem apareceria logo abaixo da visita virtual, mas como o plugin está programado pra ocupar 100% da página, essa imagem adicional ficará fora do campo de visão de quem acessar o tour.

Por outro lado pro facebook essa será a única imagem apontada pela página, então será a miniatura usada no compartilhamento.

Você deve colocar o seguinte código no final, antes do "</body>":

<img src="miniatura.jpg" />

Mostrando o final do código pra mostrar onde você deve inserir:

Código: Selecionar todos

        </script>
</div>

<img src="miniatura.jpg" />

</body>
</html>[code]

Responder