Come incorporare gratuitamente un amazon astore in una pagina Facebook

Un aStore su Facebook?

Hai deciso che il marketing di affiliazione fa per te. Hai creato un Amazon aStore. Hai passato il tuo tempo, setacciando diligentemente i prodotti da aggiungere ad esso…

Sfruttando la potenza dei social media, hai persino una pagina Facebook dedicata alle tue attività di marketing di affiliazione… Hai creato una foto di copertina della sequenza temporale per esprimere chiaramente la pagina visivamente… Pubblichi aggiornamenti di stato su quella pagina Facebook con collegamenti a prodotti specifici nel tuo aStore…

Ma non sarebbe fantastico se potessi mostrare l'intero aStore proprio in quella pagina Facebook? Bene… puoi!

Le schede personalizzate sono abbastanza facili da gestire. Puoi persino personalizzare le immagini e il testo del titolo visualizzati nella scheda stessa.

Un esempio

Dai un'occhiata alla pagina Facebook dell'armadio comunista, per esempio. Notare la scheda intitolata "Negozio sovietico?"

Il Soviet Shop è un Amazon aStore incorporato direttamente nella pagina Facebook con un po 'di HTML e un'app "legale per Facebook". No, non stiamo hackerando nulla… solo facendo uso di risorse.

Cosa ti servirà

Accesso amministratore a una pagina Facebook (se l'hai creata, hai già accesso amministratore)
App gratuita per schede personalizzate (mi piace usare HTML statico: schede iframe)
Amazon aStore e il suo collegamento associato

Fatti un favore… apri Facebook e Amazon Associate Central in schede separate del browser (o anche browser separati, se preferisci). In questo modo, puoi andare avanti e indietro tra i due se necessario.

Aggiunta dell'app

Vai all'app all'interno di Facebook (con il link sopra) e fai clic sul pulsante "installa" per aggiungere l'app alla tua pagina. Nella schermata successiva, l'app ti chiederà di confermare la destinazione dell'installazione (la pagina in cui installerai l'app) se amministri più di una pagina Facebook.

Selezionare la pagina di destinazione corretta e fare clic sul pulsante "installa" per confermare. Si, e davvero cosi semplice.

Modifica il contenuto della scheda

Al termine dell'installazione dell'app, torna alla tua pagina. Troverai una nuova scheda intitolata "Benvenuto!" sullo schermo. Cliccaci e facciamo un po 'di magia!

Non preoccuparti ancora del titolo e dell'immagine della scheda, ci arriveremo a breve.

Facendo clic sulla nuova scheda di benvenuto si accederà a questa schermata di modifica. Qui potrai:

Ospita il tuo "codice" nella sezione index.html
Organizza ulteriormente il codice nelle sezioni style.css e script.js (per utenti più avanzati)
Modifica le impostazioni delle schede
Crea un Fan-Gate (lo faremo in un altro Hub)

Per impostazione predefinita, atterrerai nella sezione index.html dell'app (qui è dove faremo tutto il nostro lavoro). Elimina il testo esistente in quella sezione.

Ottieni il tuo codice aStore

In Associate Central di Amazon:

Usa il menu a tendina in alto a sinistra dello schermo per selezionare l'ID di tracciamento corretto del tuo aStore. (Questo è necessario solo se hai più aStore nello stesso account… se hai un solo aStore, non preoccuparti di questo passaggio.)
Fai clic su "Ottieni collegamento" nel menu a sinistra.
La pagina mostrerà una nuova schermata intitolata "Il tuo negozio è stato pubblicato!" Direttamente sotto l'annuncio, vedrai diverse versioni del tuo collegamento aStore.
Seleziona l'opzione "Incorpora il mio negozio utilizzando un frame in linea". Modificheremo leggermente questo codice per ottimizzarlo per l'integrazione con Facebook.
Copia tutto il codice nella casella di testo e incollalo nell'app (sezione index.html) all'interno di Facebook.

Il codice con cui lavoreremo dovrebbe essere qualcosa del tipo:

URL protetto

Quando incolli per la prima volta il codice del tuo collegamento nell'app, vedrai un messaggio di avvertimento che indica che l'URL di aStore non è sicuro. No, il collegamento non ti chiederà se il suo codice sorgente lo fa sembrare grasso. Tuttavia, alcuni browser potrebbero non visualizzare correttamente il tuo aStore perché non "pensano" che il negozio sia ospitato su un server sicuro. Questo è particolarmente importante qui perché, dopo tutto, non vogliamo rendere i tuoi potenziali clienti paranoici durante gli acquisti.

Quindi, per prima cosa, cambia http: // all'interno del tuo codice in http s: //

Regola le dimensioni del display

Ora modificheremo le dimensioni visualizzate del tuo aStore nella pagina Facebook.

Notare che la larghezza è impostata al 90%? Bene, questo è il 90% di ciò che il browser calcola come dimensione della pagina corrente. Questo sarà assolutamente impreciso… Specificheremo la larghezza di 815 pixel per adattarsi all'app iframe.

Cambia larghezza = "90%" in larghezza = "815 px"

Consiglio anche di accorciare l'altezza (in modo significativo) a 1000 o addirittura 1200 pixel. Renderà i tuoi contenuti un po 'più contenuti…

Cambia altezza = "4000" in altezza = "1200 px"

Consenti scorrimento

Il tuo aStore può diventare piuttosto lungo (anche più lungo dei 4000 pixel originali specificati). Questo generalmente accade se le descrizioni dei prodotti sono lunghe e ci sono anche diverse recensioni di prodotti pubblicate. Per impostazione predefinita, lo scorrimento è disabilitato… e questo taglierà il contenuto oltre l'altezza specificata. Dato che non vogliamo limitare il tuo aStore, abiliteremo lo scorrimento.

Cambia scrolling = "no" in scrolling = "yes"

Il tuo codice finito dovrebbe ora assomigliare a questo:

Non dimenticare di premere il pulsante "Salva e pubblica" nell'angolo in alto a destra. Puoi anche visualizzare in anteprima il tuo lavoro in qualsiasi momento con il pulsante "Anteprima" adiacente…

Schizzinoso, schizzinoso…

OK, sto pignolo… Abbiamo il codice iframe all'interno di un'app iframe. Sì, è ridondante. Sì, dovrebbe essere risolto. Ma, per facilità d'uso in questa guida ai livelli per principianti, la lascerò così com'è. Non giudicarmi.

Pulsante personalizzato

Ora che la tua integrazione aStore è completa, vorrai quel fastidioso "Benvenuto!" pulsante in prima pagina per sembrare un po 'più significativo, giusto?

Torna al "front-end" della tua pagina Facebook.
Fare clic sul pulsante piccolo (con un triangolo rivolto verso il basso) immediatamente a destra di tutte le schede della pagina.
Man mano che la pagina si espande, passa il mouse sul nuovo "Benvenuto!" tab.
Noterai una nuova icona (matita) apparire sulla scheda. Fare clic su questa icona per un nuovo menu a discesa.

Dal menu a discesa, fai clic su "Modifica impostazioni".
Verrà visualizzata una finestra popup in cui è possibile modificare il nome della scheda e aggiungere un'immagine personalizzata da visualizzare come pulsante.
Personalizza la scheda come preferisci.