Publicación de fotografías 360 en Facebook con Panotour Pro

Técnica Publicación
1

Saludos.

Seguramente nos has pasado que al querer compartir las 360 en Facebook sólo aparece el título de la página y el link sin ninguna imagen previa, lo cual no genera mucho interés en la gente que lo ve.

Me puse a investigar como mejorar esas publicaciones y vi un tour dentro de un post en Facebook en el que se podía navegar.

Comparto este link donde explican lo que se debe hacer.
Para lograrlo hay que modificar un poco el código HTML del archivo principal que genera Panotour Pro pero nada grave.

http://www.autopano.net/wiki-en/action/view/Panotour_Pro_2_-_Web_Publishing

Ahí explican las dos opciones:
Cargar una imagen previa en el post que al hacer clic lleva al tour
o poder navegar el tour dentro de Facebook.

Espero sea de utilidad.

2

Gracias Andrés por el aporte.

Sabes que hace algunos años, 360cities.net tenía esta forma de presentación de sus fotos en Facebook. Al compartirlas, quedaban embebidas y podían visualizarse sin salir de FB, tal como un Video.

Sin embargo, ahora ya no funciona así. ¿Por qué? Pienso que aunque pueda inicialmente parecer más “cómodo” para el usuario ver la foto sin salir de FB, la visualización tan pequeña puede no ser tan cómoda, por un lado. Pero por otro, más importante aún, es la estrategia de la empresa que muestra la foto, pues al visualizarse directamente en FB no podrá por ejemplo mostrar sus anuncios de AdWords (en el caso de 360cities). Habrá fotógrafos que, como en el caso mío, prefieran un clic de visita hacia la página web propia, pues este clic trae otra serie de beneficios, como permitir que la gente navegue hacia otros tours y, por qué no, que miren tus precios y te contraten.

Fue algo que yo analicé hace algún tiempo y particularmente tomé la decisión de no embeber directamente en FB, pues se me hizo que haciéndolo así, estaría dándole tráfico y contenidos a ellos con poco beneficio para mí. Mi estrategia particular fue enviar tráfico hacia mi web.

Lo que sí hice fue incluir el código para mostrar un “snippet” interesante, que tuviera un título atractivo, una descripción contundente y, lo más importante, una imagen que anticipe lo que verá el visitante. De esta forma, compartir en redes sociales tiene mayor atractivo y más posibilidad de clics…

Lástima que de forma predeterminada PanoTour no traiga esta posibilidad. Sin embargo, recuerda que uno puede manipular su propia plantilla HTML y eso sí es una ventaja porque no tienes que estar escribiendo código con cada tour.

Andrés, cuando tengas el ejemplo con un tour, sería interesante que nos mostraras en este mismo post pantallazos y parte del código usado.

¡Chao!

3

Mario: Buen punto.
No lo había visto de ese modo, llevar a que visiten el sitio propio, por una parte porque se ven todas las propiedades del 360 y sobre todo que conozcan el sitio oficial del creador.

Lo que si me parece importante es que haya una imagen previa porque he visto que la gente no hace clic en links de texto si no van acompañados de alguna imagen previa y como dices, con un título atractivo. Me sucede con los vídeos de YouTube por ejemplo.

Bueno aquí va el código:

Para que el post incluya una imagen (estática) previa.
Básicamente hay que modificar los PATHS o rutas donde se encuentra el tour y la imagen previa que se quiere que aparezca en el post.

<meta charset=“utf-8” />
<meta name=“medium” content=“mult”></meta>
<meta name=“viewport” content=“target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”></meta>
<meta name=“apple-mobile-web-app-capable” content=“yes”></meta>
<meta name=“apple-mobile-web-app-status-bar-style” content=“default”></meta>

<title>VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano</title>
<meta content=“VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano” property=“og:title”></meta>
<meta name=“description” content=“VIRTUAL_TOUR_DESCRIPTION”></meta>
<meta content=“VIRTUAL_TOUR_DESCRIPTION” property=“og:description”></meta>
<meta name=“keywords” content=“VIRTUAL_TOUR_TITLE,Virtual tour generated by Panotour and Livepano”></meta>
<meta name=“generator” content=“Panotour Pro V2.2.0 + Livepano”></meta>
<meta content=“AUTHOR_NAME” name=“Author”></meta>
<meta content=“COPYRIGHTS” name=“copyright”></meta>

<meta content=“http://URL/PATH/VIRTUAL_TOUR_NAME.html” name=“url”></meta>
<meta content=“http://URL/” property=“og:site_name”></meta>
<meta content=“PATH/” name=“directory”></meta>
<meta content=“http://URL/PATH/VIRTUAL_TOUR_NAME.html” property=“og:url”></meta>
<meta content=“article” property=“og:type”></meta>

<link href=“http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg” rel=“image_src”></link>
<meta content=“http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg” property=“og:image”></meta>

Para que el tour se vea embebido en Facebook.
La diferencia en el código es que éste hace que el SWF se comporte como un video.
También ponen como condición que el tour esté montado sobre un servidor con certificado de seguridad (HTTPS).
A continuación el código usado en la práctica y al final va un link al post de FB donde se ve en funcionamiento.

<meta charset=“utf-8” />
<meta name=“medium” content=“mult”></meta>
<meta name=“viewport” content=“target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”></meta>
<meta name=“apple-mobile-web-app-capable” content=“yes”></meta>
<meta name=“apple-mobile-web-app-status-bar-style” content=“default”></meta>

<title>Musiteca Discos - Toda tu música favorita</title>
<meta content=“Musiteca Discos. Rock, Pop,Jazz, Soul, Electronica, Salsa. Llevamos toda tu música favorita a la puerta de tu casa o visitanos en el centro de Bogotá.” property=“og:title”></meta>
<meta name=“description” content=“Musiteca Discos. Rock, Pop,Jazz, Soul, Electronica, Salsa. Llevamos toda tu música favorita a la puerta de tu casa o visitanos en el centro de Bogotá.” />
<meta content=“MUSITECA DISCOS” property=“og:description”></meta>
<meta name=“keywords” content=“Musiteca Discos, Rock, Pop, Jazz” />
<meta name=“generator” content=“VisualArtStudio” />
<meta content=“AUTHOR_NAME” name=“VisualArtStudio”></meta>
<meta content=“COPYRIGHTS” name=“VisualArtStudio.net 2014”></meta>

<meta content=“http://www.musitecadiscos.com/360musiteca/index.html” name=“url”></meta>
<meta content=“http://www.musitecadiscos.com/360musiteca/index.html” property=“og:site_name”></meta>
<meta content=“http://www.musitecadiscos.com/360musiteca/index.html” name=“directory”></meta>
<meta content=“http://www.musitecadiscos.com/360musiteca/index.html” property=“og:url”></meta>
<meta content=“article” property=“og:type”></meta>

<link href=“http://www.musitecadiscos.com/360musiteca/360musiteca.jpg” rel=“image_src”></link>
<meta content=“http://www.musitecadiscos.com/360musiteca/360musiteca.jpg” property=“og:image”></meta>
<meta content=“https://www.musitecadiscos.com/360musiteca/360musiteca.jpg” property=“og:image:secure_url”></meta>

<meta content=“http://www.musitecadiscos.com/360musiteca/Musitecadata/Musiteca.swf?xml=http://www.musitecadiscos.com/360musiteca/Musitecadata/Musiteca.xml” property=“og:video”></meta>
<meta content=“https://www.musitecadiscos.com/360musiteca/Musitecadata/Musiteca.swf?xml=http://www.musitecadiscos.com/360musiteca/Musitecadata/Musiteca.xml” property=“og:video:secure_url”></meta>
<meta content=“application/x-shockwave-flash” property=“og:video:type”></meta>
<meta content=“480” name=“video_height”></meta>
<meta content=“640” name=“video_width”></meta>
<meta content=“480” property=“og:video:height”></meta>
<meta content=“640” property=“og:video:width”></meta>

https://www.facebook.com/pages/Musiteca-Discos/225619224197229

4

Podrías publicar un ejemplo para ver el resultado? Gracias :slight_smile:

5

Hola, amigos

No me queda claro si el panorama puede visualizarse desde Facebook para no tener que salir de esta pagina, a veces hay paginas que solo funcionan en Facebook y un panorama dentro de la pagina seria mucho mas útil porque funcionaria para Facebook y los créditos pueden ir en un menú conceptual o algo así

salu2

Alvaro Casanova

6

Hola Andres buenas noches, me puedes explicar un poco mejor la parte de como incluir una imagen (estatica) en Facebook y que al darle clic sobre ella me abra el tour virtual.
el código como lo incluyo dentro del HTML?, es sobrescribir alguna información del código original o es adicionar dicho código al final del código original?

Ojala me haya hecho entender,

7

Saludos leoidzora. El asunto es el siguiente:

Si subes el archivo HTML del tour tal y como lo genera Panotour te darás cuenta que al pegar la URL en Facebook te aparece un feo y pixelado ícono de Flash.

Lo que debes hacer es modificar el código HTML del archivo que carga la 360 para que en Facebook puedas previsualizar una imagen personalizada.

Aquí hay un ejemplo real.

Prueba pegando esta URL en tu “status” en Facebook. No le tienes que dar publicar, es solo una prueba.

http://visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/

Verás que aparece un little planet como preview.
OJO: A veces pasa y esto es un error de Facebook, que no carga nada y sólo te aparece el link… me sucede con links de Youtube por ejemplo.
Lo que hago es recargar el navegador y vuelvo a pegar la URL hasta que muestre la imagen.

Debes poner en tu servidor la imagen que quieres que aparezca y llamar la ruta absoluta, no recomiendo usar rutas relativas (asumo que entiendes algo de HTML)… o mejor lo aclaro:

Ruta absoluta: http://www.midominio.com/mis360/360/imagen.jpg
Ruta relativa: 360/imagen.jpg

NOTA: Debes estar seguro de la imagen que vas a usar ya que Facebook guarda una especie temporal que por más que la reemplaces y borres la foto inicial, una vez carga esa imagen no la cambiará hasta después de mucho tiempo. Te recomiendo que tu imagen sea de un tamaño de 1200x625px o en su proporción.

Ahora si a lo que vinimos. Subo un par de imágenes para que veas la diferencia y como se debe intervenir el código.

También pego el código para que lo modifiques con tus datos. Espero haber sido claro y que sea de utilidad esta información.

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>Popayán Semana Santa 2016 : Visual Art Studio</title>

	&lt;meta name="description" content="Semana Santa Popayán 2016 - Visual Art Studio" /&gt;

	&lt;meta name="keywords" content="Popayán Semana Santa 2016,Fotografía 360 realizada por Visual Art Studio" /&gt;
	&lt;meta name="generator" content="Visual Art Studio - Andrés Burbano" /&gt;


	&lt;meta name="author" content="Visual Art Studio" /&gt;
	&lt;meta content="AUTHOR_NAME" name="Visual Art Studio - Andrés Burbano"&gt;&lt;/meta&gt;
	&lt;meta content="COPYRIGHTS" name="VisualArtStudio.net 2016 - Andrés Burbano"&gt;&lt;/meta&gt;

&lt;meta content="http://www.visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/index.html" name="url"&gt;&lt;/meta&gt;
&lt;meta content="http://www.visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/index.html" property="og:site_name"&gt;&lt;/meta&gt;
&lt;meta content="http://www.visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/index.html" name="directory"&gt;&lt;/meta&gt;
&lt;meta content="http://www.visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/index.html" property="og:url"&gt;&lt;/meta&gt;
&lt;meta content="article" property="og:type"&gt;&lt;/meta&gt;

&lt;link href="http://www.visualartstudio.net/360/Foto360_SemanaSanta_Popayan2016/SemanaSanta.jpg" rel="image_src"&gt;&lt;/link&gt;
&lt;meta content="http://www.visualartstudio.net/Foto360_SemanaSanta_Popayan2016/SemanaSanta.jpg" property="og:image"&gt;&lt;/meta&gt; 
&lt;meta content="http://www.visualartstudio.net/Foto360_SemanaSanta_Popayan2016/SemanaSanta.jpg" property="og:image:secure_url"&gt;&lt;/meta&gt;
8

Andres muchas gracias por responder, pero tengo otra inquietud, es que mi tour es por hobbie y lo pienso subir a través de google drive, existe la posibilidad en este caso de como subir la foto (.jpg) y como pondría el link de dicha foto dentro del código html

9

leonidzora creo que el procedimiento es igual. Google Drive genera una URL de la ubicación de los archivos de tu Tour. Mira este video de Mario donde él explica como subir un Tour a Google Drive. Ahí muestra como se obtiene la url y de ese mismo modo la puedes aplicar a las imágenes.

Espero sea útil.

10

Leonidzora:

Recuerda que el servicio de hosting desde el google drive no estará más disponible desde agosto de este año,
Mira esta info

Allí te recomiendan usar el servicio que brinda Amazon Web Services
Y también se habla de este en el foro: ver hilo

Existe ya un tutorial de como configurar esta plataforma y que puedes ver en esta pagina (en ingles) del IVRPA.

Por otro lado están plataformas como Round.me, y 360 cities para cargar las esféricas y armar allí los recorridos.

Saludos desde la fantástica!

11

Ubarranco quede triste sobre esa notica, pues ya estoy terminando mi tour virtual de la ciudad de Quibdó y pesa 800 megas y ya lo iba a empezar a subir a google drive (todo lo he aprendido a través de ustedes). y pues todo esto es por hobbie y que conozcan mi tierrita.
La pregunta es Amazon Web Services, presta el servicio gratiuto? tengo entendio que Round.me y 360 cities, no soportan un tamaño tan grande (porque son muchas imágenes que hice)

a lo ultimo me va tocar hacerme a un dominio y un hosting jajajajaja

12

Leonidzora,

AWS tiene una opción gratuita de hasta 5Gb, pero recomiendo muchísimo Round.me

Alli puedes crear tantos espacios como gustes y en cada espacio cargar la cantidad que desees de equirectangulares, es decir aquí no necesitas para nada el panotour o cualquier otro software de generación de recorridos; solo bastará con las imágenes equirectangulares que obtienes de PTgui, Hugin, Photoshop o cualquier otro software de cosido siempre y cuando sean JPEGs de hasta 25Mb cada una.

Ademas la pagina o la aplicación móvil de la misma te permite compartir, ver con gafas VR, embeber etc. todo de una manera facil, intuitiva y gratis.

Puedes ver el material que Mario ha compilado en este enlace

Saludos desde la Fantástica!!!

13

lonidzora: Round.me es una excelente alternativa para crear y compartir tours. Además te evita este problema del preview porque lo hace automáticamente. Sin embargo, en mi opinión muy muy personal, cuando ya estás haciendo tours para clientes o como digo yo: cuando la cosa es en serio, lo mejor es hacerse a un servidor web con dominio y hosting.

Un saludo.

14

Gracias a todos por su ayuda otra preguntica mas, en Round.me el máximo por tour es 25 mg? o es el tamaño máximo que se permite por foto?
Es que tengo mas de 50 fotos para interconectarse entre ellas?

15

Hola Leonidzora:

La respuesta a esta pregunta esta aqui:

“Alli puedes crear tantos espacios como gustes y en cada espacio cargar la cantidad que desees de equirectangulares, es decir aquí no necesitas para nada el panotour o cualquier otro software de generación de recorridos; solo bastará con las imágenes equirectangulares que obtienes de PTgui, Hugin, Photoshop o cualquier otro software de cosido siempre y cuando sean JPEGs de hasta 25Mb cada una.”

Pero creo que es muy enredado como lo escribí… jejeje

Round.me permite cargar imágenes de hasta 25Mb cada una, puedes adicionar tantas como gustes bien sea una por espacio o todas en un solo espacio, y no hay limite de espacios.

Para mostrar tu ciudad podrías dividir las imágenes por zonas (barrio o puntos de interés) y crear un espacio para cada zona, que considero muy practico.

O bien puedes optar por montarlos todos en un solo espacio, ya es cuestión de gustos.

Te recomiendo que visites los perfiles de Mario Carvajal, o si quieres este muy bueno y te das una idea de como hemos montado nuestro trabajo allí.

Saludos desde la Fantástica!!!

16

Gracias Ubarranco, solo pensar el tiempo que me gaste haciendo el tour en Panotour jajajaja, al menos tengo las imágenes listas y solo es ir subiendo una por una Round.me
Hasta es mejor por Round.me ya que voy actualizando panorámicas jijij