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!