In Blog, Facebook, Genexus, Procedimientos, Procedimientos, UI, UX

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!

Recommended Posts

Dejar un comentario