Comment intégrer gratuitement un Amazon Store dans une page Facebook

Un aStore sur Facebook?

Vous avez décidé que le marketing d'affiliation est fait pour vous. Vous avez construit un Amazon aStore. Vous avez passé votre temps à passer au crible les produits avec diligence pour y ajouter…

En exploitant la puissance des médias sociaux, vous avez même une page Facebook dédiée à vos efforts de marketing d'affiliation… Vous avez créé une photo de couverture chronologique pour exprimer clairement la page visuellement… Vous publiez des mises à jour de statut sur cette page Facebook avec des liens vers des produits spécifiques dans votre aStore…

Mais ne serait-il pas génial si vous pouviez montrer tout l'aStore directement sur cette page Facebook? Eh bien… vous pouvez!

Les onglets personnalisés sont assez faciles à gérer. Vous pouvez même personnaliser les images et le texte du titre qui s'affichent sur l'onglet lui-même.

Un exemple

Jetez un œil à la page Facebook de Communist Closet, par exemple. Remarquez l'onglet intitulé "Boutique soviétique?"

La boutique soviétique est un Amazon aStore intégré directement dans la page Facebook avec un peu de HTML et une application «Facebook-legal». Non, nous ne piratons rien… nous utilisons simplement des ressources.

Ce dont vous aurez besoin

• Accès administrateur à une page Facebook (si vous l'avez créée, vous disposez déjà d'un accès administrateur)
• Application gratuite d'onglets personnalisés (j'aime utiliser le HTML statique: onglets iframe)
• Amazon aStore et son lien associé

Faites-vous une faveur… ouvrez Facebook et Amazon Associate Central dans des onglets de navigateur séparés (ou même des navigateurs séparés, si vous préférez). De cette façon, vous pouvez aller et venir entre les deux si le besoin s'en fait sentir.

Ajout de l'application

Accédez à l'application dans Facebook (avec le lien ci-dessus) et cliquez sur le bouton «installer» pour ajouter l'application à votre page. Sur l'écran suivant, l'application vous demandera de confirmer la destination d'installation (la page sur laquelle vous installerez l'application) si vous administrez plusieurs pages Facebook.

Sélectionnez la page de destination appropriée et cliquez sur le bouton «installer» pour confirmer. Oui, c'est aussi simple que cela.

Modifier le contenu de l'onglet

Une fois l'installation de l'application terminée, revenez à votre page. Vous trouverez un nouvel onglet intitulé "Bienvenue!" sur votre écran. Cliquez dessus et faisons de la magie!

Ne vous inquiétez pas pour l'instant du titre et de l'image de l'onglet, nous y reviendrons sous peu.

Cliquer sur votre nouvel onglet Bienvenue vous amènera à cet écran d'édition. Ici, vous pourrez:

• Hébergez votre "code" dans la section index.html
• Organisez davantage le code dans les sections style.css et script.js (pour les utilisateurs plus avancés)
• Modifier les paramètres de l'onglet
• Créez un Fan-Gate (nous le ferons dans un autre Hub)

Par défaut, vous accéderez à la section index.html de l'application (c'est ici que nous ferons tout notre travail). Veuillez supprimer le texte existant dans cette section.

Obtenez votre code aStore

Dans Associate Central d'Amazon:

• Utilisez le menu déroulant en haut à gauche de l'écran pour sélectionner l'ID de suivi approprié de votre aStore. (Ceci n'est nécessaire que si vous avez plusieurs aStores dans le même compte… si vous n'avez qu'un seul aStore, ne vous inquiétez pas de cette étape.)
• Cliquez sur "Obtenir le lien" dans le menu de gauche.
• La page affichera un nouvel écran intitulé "Votre boutique a été publiée!" Directement sous l'annonce, vous verrez plusieurs versions de votre lien aStore.
• Sélectionnez l'option "Intégrer ma boutique à l'aide d'un cadre en ligne". Nous modifierons légèrement ce code pour l'optimiser pour l'intégration Facebook.
• Copiez tout le code dans la zone de texte et collez-le dans l'application (section index.html) dans Facebook.

Le code avec lequel nous allons travailler devrait être quelque chose comme:

URL sécurisée

Lors du premier collage de votre code de lien dans l'application, vous verrez un message d'avertissement indiquant que votre URL aStore n'est pas sécurisée. Non, le lien ne vous demandera pas si son code source lui donne un aspect gras. Cependant, certains navigateurs peuvent ne pas afficher correctement votre aStore car ils ne «pensent» pas que le magasin est hébergé sur un serveur sécurisé. Ceci est particulièrement important ici car, après tout, nous ne voulons pas rendre vos clients potentiels paranoïaques lors de leurs achats.

Alors, la première chose à faire… Changez le http: // dans votre code en http s: //

Ajuster les dimensions d'affichage

Maintenant, nous allons changer les dimensions affichées de votre aStore dans la page Facebook.

Remarquez que la largeur est définie sur 90%? Eh bien, c'est 90% de ce que le navigateur calcule comme taille de page actuelle. Ce sera absolument inexact… Nous spécifierons la largeur à 815 pixels pour s'adapter à l'application iframe.

Remplacez width = "90%" par width = "815px"

Je recommande également de raccourcir la hauteur (de manière significative) à 1000 voire 1200 pixels. Cela rendra votre contenu un peu plus contenu…

Remplacez height = "4000" par height = "1200px"

Autoriser le défilement

Votre aStore peut devenir assez long (même plus long que les 4000 pixels d'origine spécifiés). Cela se produit généralement si les descriptions de produits sont longues et que plusieurs avis sur les produits sont également publiés. Par défaut, le défilement est désactivé… et cela coupera le contenu au-delà de la hauteur spécifiée. Puisque nous ne voulons pas limiter votre aStore, nous activerons le défilement.

Remplacez scrolling = "no" par scrolling = "yes"

Votre code fini devrait maintenant ressembler à ceci:

N'oubliez pas de cliquer sur le bouton "Enregistrer et publier" dans le coin supérieur droit. Vous pouvez également prévisualiser votre travail à tout moment avec le bouton "Aperçu" adjacent…

Pointilleux, pointilleux…

OK, je suis pinailleur… Nous avons du code iframe dans une application iframe. Oui, c'est redondant. Oui, cela devrait être corrigé. Mais, pour faciliter l'utilisation de ce guide de niveau débutant, je vais le laisser tel quel. Ne me jugez pas.

Bouton personnalisé

Maintenant que votre intégration aStore est terminée, vous aurez envie de ce petit "Bienvenue!" bouton sur la première page pour avoir l'air un peu plus significatif, non?

• Revenez au "front end" de votre page Facebook.
• Cliquez sur le petit bouton (avec un triangle pointé vers le bas) immédiatement à droite de tous les onglets de page.
• Au fur et à mesure que la page s'agrandit, passez votre souris sur le nouveau "Bienvenue!" languette.
• Vous remarquerez qu'une nouvelle icône (crayon) apparaît sur l'onglet. Cliquez sur cette icône pour un nouveau menu déroulant.

• Dans le menu déroulant, cliquez sur "Modifier les paramètres".
• Une fenêtre contextuelle apparaîtra dans laquelle vous pourrez modifier le nom de l'onglet et ajouter une image personnalisée à afficher comme bouton.
• Personnalisez l'onglet à votre guise.

Et tu as fini!