Como hacer un botón para tu Website del Windows Store


En este post mostraré como hacer un botón muy parecido al que tiene el Windows Store en Internet… al menos en funcionalidad; este botón lo que hace es ejecutar la aplicación “Tienda” o “Store” (dependiendo del lenguaje de Windows 8 instalado) y buscar directamente la aplicación que se desea.

Aquí un ejemplo del botón original:

Ejemplo real

Y aquí se muestra como quedaría (Website todavía en contrucción):

Resultado

Ambos con la misma funcionalidad que es abrir la aplicación de escritorio.

Para eso usaremos las herramientas de desarrollo de Google Chrome, dandole click derecho al botón original para ver como está conformado y se seleccionar “Inspeccionar elemento”:

Inspeccionar elemento (Google Chrome)

Luego de eso se nos despliega una consola donde podemos editar y ver código en tiempo de ejecución. En este preciso instante está seleccionada la siguiente etiqueta:

<input id=”LaunchStoreButton” type=”button” value=”Ver en la Tienda Windows”>

Pero lo que necesitamos es la etiqueta que se llama iframe, que es la que contendrá la URL a la que se navega:

Vista de código con herramientas de desarrollo de Google Chrome

Ahora si expandimos esa etiqueta nos encontramos de que no tiene nada en especial, pero ejecutamos la acción del botón original dandole click, se nos abrirá el Windows Store común y corriente, en la siguiente foto medio alcancé a tomar el screenshot de cuando se le da click y se abre la aplicación:

Ejecución de la aplicación

Seguido de eso si volvemos a nuestra herramienta de desarrollo, Violá!!, tenemos la URL que necesitamos en el SRC del iframe:

Hacking Windows Store

Ahora lo que resta hacer es un editor de texto el código necesario para hacer muy parecido el estilo. Como quiero insertar ese código en WordPress y para que me quede más fácil haré un estilo inline:

<a style="text-decoration:none;font-family: Segoe UI, Arial, Verdana;font-weight:bold; font-size:14px;" href="ms-windows-store:PDP?PFN=53797CamiRodriguez.Listaderegalos_8a86raejzyjs0&amp;sessionId=d68cdf5739a44170b7bba39c005b8741" target="DBox">
 <div style="border:0.15em solid Black; background-color:#CBCF44; color:black;width:200px;height:35px;margin-left:50%">
       <p style="text-align:center;height: auto;margin-top: 7px;margin-bottom: 0px;">Ir a la tienda de Windows</p>
 </div>
</a>

Aparte en otro lado no olvidar poner el iframe, pero para que sea concordante el código debe tener la siguiente estructura:


<i frame src="site.com" name="DBox" style="display:none;"></i frame>

Corregir etiqueta, WordPress.com no me deja poner etiquetas tipo iframe

En mi caso que es WordPress, en el panel de apariencia se tiene una herramienta que se llama “Editor”:

Editar el código de WordPress

Aquí seleccionar el archivo “single.php” y añadir el iframe. Si no se tiene un servidor propio y se usa un blog gratis de WordPress busca la manera de introducir iframes, que la verdad creo que no se puede.