Hace un tiempo que estamos trabajando en una plataforma 100% móvil, la cual contempla un Marketplace y publicidad para Comercio. La plataforma es una versión de nuestro servicio ADASUITE
La primera versión productiva salio con el nombre de Vallevende APP la cual a la fecha ya lleva un año haciendo comunidad en Valle Grande Lampa.
Pero bueno, vamos al grano, la plataforma necesita compartir en redes sociales el aviso o el comercio, a lo cual en Genexus que es en lo que esta desarrollada la plataforma se necesitaba integrar los metadatos de forma dinámica a un procedimiento, dejo el screenshot de la configuración
Empecemos con los metadatos, (no necesitamos usar todos) y aquí un ejemplo, pueden encontrar mucho en la web sobre esto, es cosa que googlen metadatos facebook y listo
<meta property="og:url" content="http://admainconsultores.com" /> <meta property="og:type" content="article" /> <meta property="og:title" content="ADMAIN Consultores" /> <meta property="og:description" content="Consultores en TI, Mejoraramos procesos y acercamos a las empresas a la Transformación Digital" /> <meta property="og:image" content="http://admainconsultores.com/wp-content/uploads/2018/06/logo-color2.jpg" />
Con respecto a la logica del procedimiento,
El procedimiento recibe como parámetro el ID de la tienda, el cual busca y completa los campos requeridos para los metadatos. OJO esto es solo para compartir, nosotros redireccionamos a otra pagina para que descarguen la app o se dirijan al sitio.
Copio el código y comento
Rules Parm(IdTienda) Source
&PublitTempStorage = 'PublicTempStorage/multimedia/'
&HttpResponse.AddString('<html>')
&HttpResponse.AddString('<head>')
&HttpResponse.AddString('<title>Redireccionando a ValleVende.cl</title>') //Titulo de la pagina mientras carga..
for each
&Height.SetEmpty() //N(9) Se utiliza para obtener la resolución de la imagen
&Width.SetEmpty() //N(9) Se utiliza para obtener la resolución de la imagen
&AvisosImagenPreview = TiendaImagenPreview //Obtenemos la Imagen
&OriginalFilePath = &PublitTempStorage + TiendaImagenPreview.ImageName+'.' + TiendaImagenPreview.ImageType
ImageTools.GetSize(&OriginalFilePath, &Width, &Height)
&HttpResponse.AddString('<meta property="og:type" content="article" />') //Esto lo dejamos por defecto
&Texto = '<meta property="og:title" content="Comercio en Valle Grande: '+TiendaNombre.Trim()+'"/>' //Asignamos el Nombre de la Tienda
&HttpResponse.AddString(&Texto)
&Texto = '<meta property="og:description" content="'+ TiendaDescripcion +' - Descarga APP en www.vallevende.cl" />' //Asignamos la descripción de la Tienda
&HttpResponse.AddString(&Texto)
&AvisosImagenPreview = TiendaImagenPreview //Volvemos a cargar la Imagen Preview
&Texto = '<meta property="og:image" content="'+ TiendaImagenPreview.ImageURI +'"/>' //Asignamos el Tag de Imagen
&HttpResponse.AddString(&Texto)
&Texto = '<meta property="og:image:width"content="'+ &Width.ToString().Trim() +'"/>' //Asignamos la Resolución
&HttpResponse.AddString(&Texto)
&Texto = '<meta property="og:image:height" content="'+ &Height.ToString().Trim() +'"/>' //Asignamos la Resolución
&HttpResponse.AddString(&Texto)
endfor
&HttpResponse.AddString('</head>')
&HttpResponse.AddString('<body>')
&HttpResponse.AddString('<script type="text/javascript">')
&HttpResponse.AddString('window.location="http://vallevende.admainconsultores.com/redireccionar.html";') //Redireccionamos
&HttpResponse.AddString('</script>')
&HttpResponse.AddString('</body>')
&HttpResponse.AddString('</html>')
OK!
Que les pareció? quizás no es tan claro y en base a sus comentarios lo vamos a ir mejorando.
Ahora como queda esto cuando se comparte
En Whatsaap
En Facebook
Y EL LINK
http://vallevende.adasuite.com/acompartirtienda.aspx?25
BONUS: Una herramienta de Facebook para depurar https://developers.facebook.com/tools/debug/
Si tienen dudas o consultas o creen que podemos mejorar el proceso, déjanos un comentario.
Saludos!
