Com incrustar un amazon astore en una pàgina de Facebook de forma gratuïta

Una botiga a Facebook?

Heu decidit que el màrqueting d'afiliació és per a vosaltres. Heu creat una botiga Amazon. Heu dedicat el vostre temps a examinar els productes amb diligència per afegir-hi…

Aprofitant el poder de les xarxes socials, fins i tot teniu una pàgina de Facebook dedicada als vostres esforços de màrqueting d’afiliació… Heu creat una foto de portada de la línia de temps per expressar clarament la pàgina visualment… Publiqueu actualitzacions d’estat a aquesta pàgina de Facebook amb enllaços a productes específics. al vostre aStore…

Però no seria increïble que poguéssiu mostrar tot aStore directament en aquesta pàgina de Facebook? Bé… pots!

Les pestanyes personalitzades són fàcils de gestionar. Fins i tot podeu personalitzar les imatges i el text del títol que es mostren a la mateixa pestanya.

Un exemple

Feu un cop d'ull a la pàgina de Facebook de l'armari comunista, per exemple. Fixeu-vos en la pestanya titulada "Botiga soviètica?"

The Soviet Shop és una botiga d'Amazon incrustada directament a la pàgina de Facebook amb una mica d'HTML i una aplicació "legal per a Facebook". No, no estem piratejant res… només fem ús de recursos.

El que necessiteu

Accés d'administrador a una pàgina de Facebook (si la vau crear, ja teniu accés d'administrador)
Aplicació gratuïta de pestanyes personalitzades (m'agrada utilitzar HTML estàtic: pestanyes iframe)
Amazon aStore i el seu enllaç associat

Feu-vos un favor… feu que Facebook i Amazon Associate Central obrin en pestanyes separades del navegador (o fins i tot navegadors separats, si ho preferiu). D’aquesta manera, podeu anar endavant i enrere entre tots dos si sorgeix la necessitat.

Afegir l'aplicació

Aneu a l'aplicació de Facebook (amb l'enllaç superior) i feu clic al botó "instal·la" per afegir l'aplicació a la vostra pàgina. A la pantalla següent, l'aplicació us demanarà que confirmeu la destinació d'instal·lació (la pàgina on instal·larà l'aplicació) si administreu més d'una pàgina de Facebook.

Seleccioneu la pàgina de destinació adequada i feu clic al botó "instal·la" per confirmar. Sí, realment és tan senzill.

Editeu el contingut de la pestanya

Un cop finalitzada la instal·lació de l'aplicació, torneu a la vostra pàgina. Trobareu una nova pestanya titulada "Benvingut". a la pantalla. Feu-hi clic i anem a fer màgia!

Encara no us preocupeu pel títol i la imatge de la pestanya, en arribarem breument.

En fer clic a la nova pestanya de benvinguda, accedireu a aquesta pantalla d'edició. Aquí podreu:

Allotgeu el vostre "codi" a la secció index.html
Organitzeu el codi a les seccions style.css i script.js (per a usuaris més avançats)
Canvieu la configuració de la pestanya
Creeu un Fan-Gate (ho farem en un altre Hub)

Per defecte, arribareu a la secció index.html de l'aplicació (aquí farem tot el nostre treball). Suprimiu el text existent en aquesta secció.

Obteniu el vostre codi aStore

A l'Associate Central d'Amazon:

Utilitzeu el menú desplegable situat a la part superior esquerra de la pantalla per seleccionar l’identificador de seguiment adequat de la vostra botiga. (Això només és necessari si teniu diversos botigues aStore al mateix compte… si només en teniu un aStore, no us preocupeu per aquest pas.)
Feu clic a "Obtén enllaç" al menú de l'esquerra.
A la pàgina es mostrarà una pantalla nova titulada "Ja s'ha publicat la vostra botiga". Directament a sota de l’anunci, veureu diverses versions del vostre enllaç aStore.
Seleccioneu l'opció "Incrusta la meva botiga mitjançant un marc en línia". Modificarem lleugerament aquest codi per optimitzar-lo per a la integració de Facebook.
Copieu tot el codi del quadre de text i enganxeu-lo a l'aplicació (secció index.html) de Facebook.

El codi amb el qual treballarem hauria de ser semblant a:

URL segur

Quan enganxeu per primera vegada el codi d’enllaç a l’aplicació, veureu un missatge d’advertència sobre la inseguretat de l’URL aStore. No, l’enllaç no us preguntarà si el seu codi font fa que sembli gros. Tanmateix, és possible que alguns navegadors no mostrin el vostre aStore correctament perquè no "pensen" que la botiga està allotjada en un servidor segur. Això és especialment important perquè, al cap i a la fi, no volem que els vostres clients potencials siguin paranoics quan facin compres.

Per tant, primer és el primer… Canvieu el http: // del vostre codi a http s: //

Ajusteu les dimensions de la pantalla

Ara canviarem les dimensions mostrades del vostre aStore a la pàgina de Facebook.

Noteu que l'amplada s'estableix en un 90%? Bé, això és el 90% del que el navegador calcula com a mida de pàgina actual. Això serà absolutament imprecís… Especificarem l'amplada com a 815 píxels per ajustar-la a l'aplicació iframe.

Canvia ample = "90%" a ample = "815 px"

També recomano escurçar l'alçada (significativament) fins als 1000 o fins i tot els 1200 píxels. Farà que el vostre contingut sigui una mica més contingut…

Canvia l'alçada = "4000" a l'alçada = "1200 px"

Permet el desplaçament

El vostre aStore pot ser molt llarg (fins i tot més llarg que els 4000 píxels originals especificats). Això passa generalment si les descripcions de productes són llargues i també hi ha publicades diverses ressenyes de productes. Per defecte, el desplaçament està desactivat… i això tallarà el contingut més enllà de l'alçada especificada. Com que no volem limitar el vostre aStore, activarem el desplaçament.

Canvia scrolling = "no" a scrolling = "yes"

El vostre codi acabat hauria de tenir un aspecte semblant a aquest:

No oblideu prémer el botó "Desa i publica" a l'extrem superior dret. També podeu previsualitzar el vostre treball en qualsevol moment amb el botó "Visualització prèvia" adjacent…

Exigent, exigent…

D'acord, estic rebent… Tenim codi iframe dins d'una aplicació iframe. Sí, és redundant. Sí, s’hauria de solucionar. Però, per facilitar-ne l’ús en aquesta guia de nivell per a principiants, la deixaré tal qual. No em jutgeu.

Botó personalitzat

Ara que la vostra integració aStore s'ha completat, voldreu aquest molest "Benvingut". botó de la pàgina inicial per semblar una mica més significatiu, oi?

Torneu a la "portada" de la vostra pàgina de Facebook.
Feu clic al botó petit (amb un triangle apuntat cap avall) a la dreta immediata de totes les pestanyes de la pàgina.
A mesura que la pàgina s'amplia, passeu el cursor per sobre del nou "Benvingut". fitxa.
Notareu que apareix una icona nova (llapis) a la pestanya. Feu clic a aquesta icona per obtenir un menú desplegable nou.

Al menú desplegable, feu clic a "Edita la configuració".
Apareixerà una finestra emergent en què podeu canviar el nom de la pestanya i afegir una imatge personalitzada per mostrar-la com a botó.
Personalitzeu la pestanya com vulgueu.