≡ Menu
Iconos de redes sociales en tours virtuales 360

Los botones para compartir en redes sociales son muy útiles para que el tour virtual tenga una mayor difusión. Agregar estos iconos de redes sociales es muy sencillo. En este tutorial podrás lograrlo en 5 minutos. Con ello, lograrás tener un tour virtual con mayores posibilidades de visualización.

En mi caso particular, he experimentado buenos resultados. La gente comparte más de lo que uno podría imaginarse. Por ejemplo, al día de hoy, una fotografía esférica como la de Caño Cristales, fue compartida así:

  • Facebook: 5.920 veces
  • Twitter: 235 veces
  • Linkedin: 42 veces
  • Pinterest: 97 veces
  • Enviada a un email: 1.186 veces

Toda esta difusión, ha sido gracias a los botones de redes sociales que he incluido en la fotografía 360. Así que si tienes un tour virtual virtual, te recomiendo incluir estos botones. En programas como KR Pano, estos botones no vienen de forma predeterminada en el código. En PanoTour Pro 2 esta solicitud sí fue atendida. Sin embargo, la verdad que la interfaz que trae de forma predeterminada PanoTour Pro 2 deja bastante qué desear. Particularmente, me resulta muy poco fina. Así que si lo tuyo es la atención en el detalle, en el siguiente tutorial te enseño cómo incluir botones o iconos de redes sociales en el tour virtual.

1. Consigue los iconos de redes sociales en ShareThis (2 minutos)

Aunque podrías manualmente poner cada botón, una alternativa que he encontrado interesante es “ShareThis”. Se trata de un servicio con el que puedes incluir botones o iconos de redes sociales. Y lo mejor, te guarda una estadística interesante del comportamiento de estos iconos.

Así que ingresa a la página web de Share This: www.sharethis.com:

ShareThis para usar iconos en redes sociales

Haz clic en el botón “Get the code — It’s free!” (Obtener el código – ¡Es gratis!). Te aparecerá la siguiente pantalla:

Escoger el tipo de destino donde se utilizarán los iconos de redes sociales

Escoge en este caso la primera opción “Website” y haz clic en el enlace “Next: Style” (Siguiente: Estilo). En la siguiente pantalla vas a poder seleccionar el estilo. A mí particularmente me gusta el de botones que despliega la información de cuántas veces ha sido compartido. También he utilizado, con menos frecuencia, la barra con botones. Así que según tu preferencia, escoge el que más te gusta y haz clic en el enlace “Next: Customize” (Siguiente: Personalizar).

Seleccionar los iconos de redes sociales en ShareThis

 

Ahora podrás escoger cuáles botones o iconos de redes sociales deseas utilizar. En mi experiencia, me funcionan muy bien: Facebook, Twitter, Google Plus, LinkedIn, Pinterest y uno muy especial: enviar a un e-mail. Te recomiendo que selecciones únicamente los más representativos, para que no llenes de iconos innecesarios el tour virtual. Cuando tengas todo listo, haz clic en el botón “Get the Code!” (Obtener el código).

sharethis-4

2. Incluye el código en tu página web o tour virtual (3 minutos)

ShareThis te proporciona dos códigos. El primero, es para que ubiques los iconos entre las etiquetas <body> y </body> de tu página web. Y el segundo, es para que lo ubiques entre las etiquetas <head> y </head>. ¿Pero de qué se trata esto? Si no tienes mucha experiencia en código HTML, trataré de explicártelo de forma muy sencilla.

Cuando creas un tour virtual a través de software como KR Pano, PanoTour Pro, Pano2VR, Flash Panorama Player, TourWeaver, PTGUI (sí, con PTGUI puedes generar la visita virtual en HTML), Salado Player o cualquier otro, lo más probable es que obtengas una serie de archivos y carpetas como resultado de la creación del tour virtual. En ese grupo de archivos debe existir un archivo con extensión HTML, que muy probablemente se llame “index.html”. Este es el archivo que debes editar.

¿Cómo editarlo? Muy fácil: lo abres en un editor como el Bloc de Notas, TextEdit, o tal vez en uno avanzado como Dreamweaver. Allí verás una gran cantidad de código, en lenguaje HTML. Entonces vas a copiar el primer código que te proporcionó ShareThis y lo vas a pegar justo antes de la etiqueta </body>:

<span class='st_sharethis_vcount' displayText='ShareThis'></span>
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_linkedin_vcount' displayText='LinkedIn'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span>
<span class='st_email_vcount' displayText='Email'></span>

Luego, vas a copiar y pegar el segundo código que te da ShareThis, justo antes de la etiqueta </head>, ejemplo:

<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! Los botones funcionarán muy bien y el tour virtual tendrá ahora unas opciones muy interesantes para que tus usuarios compartan la foto esférica en redes sociales.

Si te queda alguna duda, puedes descargar el archivo index.html en ZIP para que puedas analizarlo, correspondiente a la fotografía esférica de Caño Cristales, sector Los Ochos.

Y si tienes dudas, puedes plantearlas en el Foro.

{ 10 comentarios… add one }
  • Aldo Javier 23 Diciembre, 2014, 5:47 pm

    Hola, Mario! Tengo una duda a cerca de esto, seguí el tutorial, pero al compartir en facebook, no me aparece ninguna imagen en el enlace :c
    Sabes como puedo arreglar eso?
    Saludos desde Paraguay!

  • Mario Carvajal 23 Diciembre, 2014, 9:30 pm

    Aldo, una opción para que puedas determinar en qué está fallando tu código, es pasarlo por el Facebook Debugger: https://developers.facebook.com/tools/debug/ Ahí puedes introducir el URL de tu página y el sistema te dará la información de qué puede estar fallando. No obstante, ten presente que a veces esto tiene un tiempo que tarda en actualizar, como si existiera un caché que se guarda, entonces los cambios que realices se producen con unos minutos de retraso. Saludos.

  • Jesús 21 Enero, 2015, 8:32 pm

    Que tal, disculpa en el panotour pro desde la interfaz del sofware como puedes usar la funcion “mailto” ?? Espero me puedas ayudar , saludos.

    • Mario Carvajal 23 Enero, 2015, 3:31 pm

      Jesús, el icono para enviar por mail que está junto con los iconos de redes sociales lo activas en la pestaña “Style”, en el panel “Plugins Library”… Ahí verás una librería llamada “Social Share”. Haz doble clic para agregarla al espacio de trabajo o interfaz y vas a notar que al modificar sus propiedades, aparece la posibilidad de seleccionar “Email” dentro de sus opciones.

      Con esto no necesitas poner alguna función de “mailto” de forma manual y tiene algo muy pero muy interesante y es que el url que te forma, queda con parámetros individualizados, es decir, será el link de esa vista (con esas coordenadas) y además de ESA escena, y no un link genérico hacia el tour.

      Saludos,

  • sebastián 7 Febrero, 2015, 10:49 pm

    Hola, se pueden pasar al español?

  • Irene 24 Abril, 2015, 2:43 pm

    Hola . ya lo intente con krpano y me da error, quisiera saber si me puedes ayudar. me gusta el ejemplo que pusiste de cano cristales . pero no se que sucede, yo soy fotógrafa aquí en Venezuela pero no se nada de los xml.

    • Mario Carvajal 24 Abril, 2015, 3:25 pm

      Claro que sí, te podemos ayudar. Lo podemos hacer a través del foro, si quieres regístrate y nos das un poco más de información sobre el error que te está saliendo, si quieres nos envías la URL para poderla ver y analizar el código fuente. Seguro es una tontería, alguna sintaxis incorrecta, alguna etiqueta faltante… vas a ver cómo lo solucionamos. Saludos

      • Irene 24 Abril, 2015, 5:48 pm

        hola jajaj ya lo logre, lo coloque bien era que no estaba siguiendo las instrucciones correctamente. pero lo unico que no consigo dar es con el icono que tiene de MEGUSTA con la cantidad . le he dado varias veces y no aparece . lo ignora .. y solo paracen los otros iconos .

Dejar un comentario