Integración de fotografía panorámica con redes sociales

Hola amigos, encontrar este foro es lo mejor que me ha pasado dede hace como dos meses que me estoy interesando en esto de las fotos panorámica… felicidades y gracias a todos por compartir sus conocimientos…

Mi pregunta es sobre cómo integrar las redes sociales en un tour virtual…

yo ya logré hacer mi foto panorámica pero creo que ponerle los botones de Facebook por ejemplo estaría estupendo… alguna idea por donde empiezo?..

la foto la hice con easy tourweaver

Lucho, bienvenido al foro. Integrar una fotografía panorámica con redes sociales es muy sencillo. Debes tener algún conocimiento en lenguaje HTML para que se te facilite la labor. Pero vamos, que es muy fácil.

En este tutorial te explicaremos cómo integrar los botones de redes sociales con tu panorámica en tan solo 5 minutos.

Yo he utilizado el servicio de Share This que te ahorrará mucho código es realmente fácil. Entonces te sugiero seguir estos pasos:

1. Crea una cuenta con Share This. (1 minuto)

Esto lo puedes hacer con tu cuenta de Facebook o Twitter, inclusive, en un solo clic. Es fácil. Entra aquí: http://www.sharethis.com/

2. Crea tu widget (2 minutos)

En el menú de Share This haz clic en el vínculo “Get Sharing”. Escoge la plataforma que vas a usar, que para este caso es un sitio web “WWW”. Haz clic en el vínculo “Next” y selecciona el estilo que más te guste. Continúa al tercer paso y escoge qué botones de redes sociales deseas utilizar, así como el tamaño. Finalmente haz clic en el botón “GET THE CODE”. ¡Genial! Ya tienes el código que vas a incluir en tu panorama.

3. Pega el código en tu panorama (2 minutos)

Bien sea que produzcas el tour virtual con Easy Pano, KR Pano, PanoTour, Flash Panorama Player, PTGUI, Salado Player o Pano2VR, siempre tendrás un archivo HTML, normalmente llamado “index.html”.

++++++++++++++++

Nota 1: En caso de que no lo tengas con este nombre, puedes hacer clic en cualquier archivo de extensión HTML que tengas en la raíz de la carpeta de tu panorama generado. Algunos programas lo nombran como “tour.html”.

Nota 2: Y en caso de que no tengas ningún archivo HTML, deberías revisar el proceso de exportación del tour virtual con el software que manejes, pues algunas veces los programas solo crean el archivo SWF. Si ese es tu caso, será imposible incluir los iconos de redes sociales al interior del archivo SWF. Debes tener, por lo tanto un archivo HTML para poder continuar.

++++++++++++++++

Abre en un programa como Dreamweaver o en un bloc de notas el archivo HTML. Debes introducir el código generado por ShareThis de la siguiente forma:

El primer bloque de código debes incluirlo en cualquier parte que desees, entre las etiquetas y . Estamos hablando de este fragmento de código:

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>

El segundo bloque de código, debes incluirlo justo entre las etiquetas y , estamos hablando de este fragmento de código:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "c2a50396-9e09-4087-ab0d-0938c9356180", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

¡Y eso es todo! Ya deberías tener funcionando tus botones de redes sociales, con una gran ventaja. Cuando ingreses a tu cuenta de ShareThis tendrás una estadística detallada de cómo han interactuado los usuarios con estas redes sociales.

Si logras hacerlo, cuéntanos cómo te fue. Saludos.

Mil gracias por tu pronta respuesta Mario…

ya lo estoy logrando, solo que estoy batallando para que los botones salgan dentro de la foto… ya puse el codi por todos lados y no se mueve de arriba y la foto me la baja…

Este es el ejemplo…
http://penascovirtual.hol.es/muelle/Tourweaver_muelle%20viejo.html

El programa me crea un archivo HTML… al cual le puse los codigos de ShearThis

este es el codigo completo… del HTML

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html"/> 
 <title>Penascovirtual.com</title> 
 </head> 
 <body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0"> 
 <div  style="i"></div>
  <script type="text/javascript" src="swfobject.js"></script> 
  
<strong><span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
</strong>  
  
 <div id="flashcontent" width = "100%" height ="100%" onmousewheel="return false;"> 
 To view virtual tour properly, Flash Player 9.0.28 or later version is needed. 
 Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
 </div> 
 <script type="text/javascript">
 var jsReady = true;
 function isJsReady() {
 	return jsReady;
 }
 function pageInit() {
 	jsReady = true;
 }
 function thisMovie(movieName) {
 	return document.getElementById(movieName);
 }
 function changeSceneOnLoad(){
 	var panoid=window.location.search.split("&")[0];
 	if(panoid.indexOf("firstscene") != -1)
 	{
 		panoid = panoid.split("=")[1];
 	}
 	if(panoid)
 	{
 		if(thisMovie("sotester").twAPI){
 			setTimeout(function(){thisMovie("sotester").twAPI("switchToScene", panoid);},500);
 		}else{
 			setTimeout(changeSceneOnLoad,1000);
 		}	
 	}
 }
 </script>

 
 <script type="text/javascript"> 
 
 // <![CDATA[ 
 var so = new SWFObject("twviewer.swf", "sotester", "100%", "100%", "9.0.0", "#FFFFFF"); 
 so.addParam("allowNetworking", "all"); 
 so.addParam("allowScriptAccess", "always"); 
 so.addParam("allowFullScreen", "true"); 
 so.addParam("scale", "noscale"); 
 so.addParam("wmode", "direct"); 
 //<!-%% Share Mode %%->
 so.addVariable("lwImg", ""); 
 so.addVariable("lwBgColor", "255,255,255,255"); 
 so.addVariable("lwBarBgColor", "255,255,255,255"); 
 so.addVariable("lwBarColor", "255,0,255,0"); 
 so.addVariable("lwBarBounds", "-240,-120,480,8"); 
 so.addVariable("lwlocation", "7"); 
 so.addVariable("lwShowLoadingPercent", "true"); 
 so.addVariable("lwTextColor", "255,0,0,0"); 
 so.addVariable("iniFile", "config_muelle viejo.bin"); 
 so.addVariable("progressType", "0"); 
 so.addVariable("swfFile", ""); 
 so.addVariable("percentType", "0"); 
 so.addVariable("sizeFile", "filesize.txt"); 
 so.addVariable("href", location.href); 
 so.addVariable("lwbounds", "<!-%% videobounds %%->");
 so.write("flashcontent"); 
 changeSceneOnLoad(); 
 // ]]> 
 </script> 

  <strong><script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "e960c433-3588-484c-b42f-2c5aebeb2c6e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script></strong>

</body> 
 </html>

Lucho, el problema de que los botones no te salgan sobre la panorámica es muy fácil de corregir, a través de CSS, reemplaza el código donde van los botones, es decir, este:

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>

Por este:

<div style="position:absolute">
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
</div>

Como verás, le he incluido una etiqueta de división, con un estilo CSS

<div style="position:absolute">
...
</div>

Con este estilo, la división va a “flotar” por encima de la panorámica y tus botones se integrarán de mejor forma.

Por otra parte, si lo que deseas es ubicar los botones en la parte derecha, deberás añadir esta línea en el código CSS:

<div style="position:absolute;right: 0px;">
...
</div>

Y si desearas poner estos botones en la parte inferior, debes añadir esta otra línea de código:

<div style="position:absolute;right: 0px;bottom: 0px;">
...
</div>

Las posibilidades son infinitas cuando trabajas con hojas de estilo CSS, entonces se trata de estudiar un poco tanto HTML como CSS y podrás hacer unos tours mucho más interesantes. Cuéntanos si logras hacerlo. Saludos

Hola Mario me pareció muy interesante el artículo, y para enrriquecer todavía más a este mismo artículo, tengo una duda parecida. Quiero anclar una foto fija a una esferica en krpano, y también cómo hacer el efecto mini planeta…es también con codigo a mano ?? saludos y gracias por adelantado

Daniel, cuando tengo que hacer este tipo de cosas, prefiero recurrir a PanoTour Pro, porque es muy desgastante cuando trabajas el código a mano. PanoTour Pro te agiliza el proceso, de tal forma que cuando necesitas hacer una introducción con efecto Little Planet, es tan sencillo como activarla en los parámetros del tour y ya, PanoTour se encarga de escribir el enredado código XML.

Lo mismo sucede para incluir fotografía fija. Prefiero utilizar KR Pano y ahorro gran cantidad de tiempo en codificación manual.

Saludos

Hola a todos, me gustaría que me ayuden con un tema en particular, he realizado el Tour Virtual en Panotour Pro y al momento de compartir en redes sociales me aparece un mensaje que dice y no se visualiza la descripción. A continuación esta la captura en Facebook


En el archivo html, tengo lo siguiente:

El problema está en la meta data. Fíjate que en la línea correspondiente a og:description, tienes código HTML. Ahí no deberías introducir texto formateado, porque la sintaxis de esta metadata quedaría con errores como actualmente tiene.

Mira como está:

<meta property="og:description" content="&lt;strong style="color: rgb(85, 85, 85); font-family: &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 13.3333px; text-align: justify; widows: auto;"&gt;Bienvenidos a su "Hostería el Reventador" ubicada a 159 kms. de Quito,&amp;nbsp;en la ruta E45 que conduce a Lago Agrio, siendo parte de la amazonia ecuatoriana,&amp;nbsp;se encuentra rodeada de importantes atractivos turísticos naturales dignos&amp;nbsp;de visitar.&lt;/strong&gt;&lt;div&gt;&lt;span style="text-align: justify; widows: auto;"&gt;&lt;font face="trebuchet ms, sans-serif" size="2"&gt;Tour Virtual por esteban360&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;" />

Y mira cómo debe quedar:

<meta property="og:description" content="Bienvenidos a su Hostería el Reventador ubicada a 159 kms. de Quito, en la ruta E45 que conduce a Lago Agrio, siendo parte de la amazonia ecuatoriana, se encuentra rodeada de importantes atractivos turísticos naturales dignos de visitar. Tour Virtual por esteban360.com" />

Si notas la diferencia entre los dos códigos, verás que en el primero tenías código de HTML que no pertenece a la metadata y que genera errores.

1 me gusta

Perfecto muchas gracias @Mario-Carvajal es que este lenguaje cuesta un poco entenderlo, pero poco a poco se va aprendiendo.
saludos desde las tierras amazónicas :slight_smile: