Cómo insertar una tienda de Amazon en una página de Facebook de forma gratuita

¿Una tienda en Facebook?

Ha decidido que el marketing de afiliación es para usted. Ha creado una tienda de Amazon. Ha dedicado su tiempo a examinar diligentemente los productos para agregarlos…

Aprovechando el poder de las redes sociales, incluso tiene una página de Facebook dedicada a sus esfuerzos de marketing de afiliación… Creaste una foto de portada en la línea de tiempo para expresar claramente la página de manera visual… Publicas actualizaciones de estado en esa página de Facebook con enlaces a productos específicos en tu aStore…

¿Pero no sería genial si pudieras mostrar toda la aStore directamente en esa página de Facebook? Bueno… ¡puedes!

Las pestañas personalizadas son bastante fáciles de administrar. Incluso puede personalizar las imágenes y el texto del título que se muestran en la propia pestaña.

Un ejemplo

Eche un vistazo a la página de Facebook de Communist Closet, por ejemplo. Observe la pestaña titulada "¿Tienda soviética?"

La tienda soviética es una tienda de Amazon incrustada directamente en la página de Facebook con un poco de HTML y una aplicación "legal para Facebook". No, no estamos pirateando nada… simplemente haciendo uso de recursos.

Lo que necesitarás

• Acceso de administrador a una página de Facebook (si la creó, ya tiene acceso de administrador)
• Aplicación de pestaña personalizada gratuita (me gusta usar HTML estático: pestañas iframe)
• Amazon aStore y su enlace asociado

Hágase un favor… haga que Facebook y Amazon Associate Central se abran en pestañas del navegador separadas (o incluso en navegadores separados, si lo prefiere). De esa manera, puede ir y venir entre los dos si surge la necesidad.

Agregar la aplicación

Navegue a la aplicación dentro de Facebook (con el enlace de arriba) y haga clic en el botón "instalar" para agregar la aplicación a su página. En la siguiente pantalla, la aplicación le pedirá que confirme el destino de la instalación (la página en la que instalará la aplicación) si administra más de una página de Facebook.

Seleccione la página de destino adecuada y haga clic en el botón "instalar" para confirmar. Sí, realmente es así de simple.

Editar el contenido de la pestaña

Una vez completada la instalación de la aplicación, regrese a su página. Encontrarás una nueva pestaña titulada "¡Bienvenido!" en tu pantalla. ¡Haz clic y hagamos magia!

No se preocupe por el título de la pestaña y la imagen todavía, llegaremos a ellos en breve.

Al hacer clic en la nueva pestaña de bienvenida, accederá a esta pantalla de edición. Aquí podrás:

• Aloja tu "código" en la sección index.html
• Organice el código más en las secciones style.css y script.js (para usuarios más avanzados)
• Cambiar la configuración de la pestaña
• Crea un Fan-Gate (lo haremos en otro Hub)

De forma predeterminada, aterrizará en la sección index.html de la aplicación (aquí es donde haremos todo nuestro trabajo). Elimine el texto existente en esa sección.

Obtenga su código aStore

En Associate Central de Amazon:

• Utilice el menú desplegable en la parte superior izquierda de la pantalla para seleccionar el ID de seguimiento adecuado de su aStore. (Esto solo es necesario si tiene varias aStores en la misma cuenta… si solo tiene una aStore, no se preocupe por este paso).
• Haga clic en "Obtener enlace" en el menú de la izquierda.
• La página mostrará una nueva pantalla titulada "¡Tu tienda ha sido publicada!" Directamente debajo del anuncio, verá varias versiones de su enlace aStore.
• Selecciona la opción "Insertar mi tienda usando un marco en línea". Modificaremos este código ligeramente para optimizarlo para la integración de Facebook.
• Copie todo el código en el cuadro de texto y péguelo en la aplicación (sección index.html) dentro de Facebook.

El código con el que trabajaremos debería ser algo como:

URL segura

Cuando pegue por primera vez su código de enlace en la aplicación, verá un mensaje de advertencia sobre la inseguridad de la URL de su tienda. No, el enlace no le preguntará si su código fuente lo hace parecer gordo. Sin embargo, es posible que algunos navegadores no muestren su aStore correctamente porque no "piensan" que la tienda está alojada en un servidor seguro. Esto es particularmente importante aquí porque, después de todo, no queremos que sus clientes potenciales se vuelvan paranoicos cuando compran.

Entonces, lo primero es lo primero… Cambie http: // dentro de su código a http s: //

Ajustar las dimensiones de la pantalla

Ahora, cambiaremos las dimensiones mostradas de su aStore dentro de la página de Facebook.

¿Observa que el ancho está establecido en 90%? Bueno, eso es el 90% de lo que calcula el navegador como tamaño de página actual. Esto será absolutamente inexacto… Especificaremos el ancho como 815 píxeles para que quepan en la aplicación iframe.

Cambiar width = "90%" a width = "815px"

También recomiendo acortar la altura (significativamente) a 1000 o incluso 1200 píxeles. Hará que tu contenido sea un poco más contenido…

Cambiar altura = "4000" a altura = "1200 px"

Permitir desplazamiento

Su aStore puede ser bastante larga (incluso más que los 4000 píxeles originales especificados). Esto generalmente sucede si las descripciones de los productos son largas y también se publican varias reseñas de productos. De forma predeterminada, el desplazamiento está deshabilitado… y eso cortará el contenido más allá de la altura especificada. Como no queremos limitar su aStore, habilitaremos el desplazamiento.

Cambiar scrolling = "no" a scrolling = "yes"

Su código terminado ahora debería verse así:

No olvide presionar el botón "Guardar y publicar" en la esquina superior derecha. También puede obtener una vista previa de su trabajo en cualquier momento con el botón "Vista previa" adyacente…

Picky, Picky…

De acuerdo, soy quisquilloso… Tenemos un código de iframe dentro de una aplicación de iframe. Sí, es redundante. Sí, debería arreglarse. Pero, para facilitar su uso en esta guía de nivel para principiantes, la dejaré como está. No me juzgues.

Botón personalizado

Ahora que su integración aStore está completa, querrá ese pequeño y molesto "¡Bienvenido!" en la portada para que parezca un poco más significativo, ¿verdad?

• Regrese a la "interfaz" de su página de Facebook.
• Haga clic en el botón pequeño (con un triángulo apuntado hacia abajo) a la derecha de todas las pestañas de la página.
• A medida que la página se expande, coloque el mouse sobre el nuevo "¡Bienvenido!" lengüeta.
• Notará que aparece un nuevo icono (lápiz) sobre la pestaña. Haga clic en este icono para acceder a un nuevo menú desplegable.

• En el menú desplegable, haga clic en "Editar configuración".
• Aparecerá una ventana emergente en la que puede cambiar el nombre de la pestaña y agregar una imagen personalizada para mostrarla como botón.
• Personalice la pestaña a su gusto.

¡Y tu estas listo!