Como incorporar um astore amazônico em uma página do Facebook gratuitamente

Uma aStore no Facebook?

Você decidiu que o marketing de afiliados é para você. Você construiu uma Amazon aStore. Você gastou seu tempo, peneirando diligentemente produtos para adicionar a ele…

Aproveitando o poder da mídia social, você ainda tem uma página do Facebook dedicada aos seus esforços de marketing de afiliados… Você criou uma foto de capa da linha do tempo para expressar visualmente a página de forma clara… Você publica atualizações de status nessa página do Facebook com links para produtos específicos na sua aStore…

Mas não seria incrível se você pudesse exibir toda a aStore diretamente naquela página do Facebook? Bem… você pode!

As guias personalizadas são muito fáceis de gerenciar. Você pode até personalizar as imagens e o texto do título que aparecem na própria guia.

Um exemplo

Dê uma olhada na página do armário comunista no Facebook, por exemplo. Observe a guia intitulada "Loja soviética?"

A Loja soviética é uma Amazon aStore incorporada diretamente na página do Facebook com um pouco de HTML e um aplicativo "legal para o Facebook". Não, não estamos hackeando nada… apenas utilizando recursos.

O que você precisará

Acesso de administrador a uma página do Facebook (se você a criou, já tem acesso de administrador)
Aplicativo de guia personalizado gratuito (gosto de usar HTML estático: guias iframe)
Amazon aStore e seu link associado

Faça um favor a si mesmo… abra o Facebook e o Amazon Associate Central em guias de navegador separadas (ou mesmo em navegadores separados, se preferir). Dessa forma, você pode alternar entre os dois, se necessário.

Adicionando o aplicativo

Navegue até o aplicativo no Facebook (com o link acima) e clique no botão "instalar" para adicionar o aplicativo à sua página. Na próxima tela, o aplicativo solicitará que você confirme o destino da instalação (a página na qual você instalará o aplicativo) se você administrar mais de uma página do Facebook.

Selecione a página de destino adequada e clique no botão "instalar" para confirmar. Sim, é realmente tão simples.

Edite o conteúdo da guia

Depois que a instalação do aplicativo for concluída, volte para sua página. Você encontrará uma nova guia intitulada "Bem-vindo!" em sua tela. Clique e vamos fazer mágica!

Não se preocupe com o título e a imagem da guia ainda, veremos isso em breve.

Clicar em sua nova guia Bem-vindo o levará a esta tela de edição. Aqui, você será capaz de:

Hospede seu "código" na seção index.html
Organize ainda mais o código nas seções style.css e script.js (para usuários mais avançados)
Alterar as configurações da guia
Crie um Fan-Gate (faremos isso em outro Hub)

Por padrão, você chegará à seção index.html do aplicativo (é aqui que faremos todo o nosso trabalho). Exclua o texto existente nessa seção.

Obtenha seu código aStore

Na Central de Associados da Amazon:

Use o menu suspenso no canto superior esquerdo da tela para selecionar o ID de rastreamento adequado de sua aStore. (Isso só é necessário se você tiver vários aStores na mesma conta… se você tiver apenas um aStore, não se preocupe com esta etapa.)
Clique em "Obter link" no menu à esquerda.
A página exibirá uma nova tela intitulada "Sua loja foi publicada!" Diretamente abaixo do anúncio, você verá várias versões do seu link aStore.
Selecione a opção "Incorporar minha loja usando um quadro embutido". Vamos modificar este código ligeiramente para otimizá-lo para integração com o Facebook.
Copie todo o código na caixa de texto e cole-o no aplicativo (seção index.html) dentro do Facebook.

O código com o qual trabalharemos deve ser algo como:

URL seguro

Ao colar o código do link no aplicativo pela primeira vez, você verá uma mensagem avisando sobre o URL aStore inseguro. Não, o link não perguntará se o código-fonte o faz parecer grande. Porém, alguns navegadores podem não exibir sua aStore corretamente porque eles não "pensam" que a loja está hospedada em um servidor seguro. Isso é particularmente importante aqui porque, afinal, não queremos deixar seus clientes em potencial paranóicos ao comprar.

Portanto, a primeira coisa é… Altere o http: // no seu código para http s: //

Ajustar dimensões de exibição

Agora, vamos alterar as dimensões exibidas de sua aStore na página do Facebook.

Observe que a largura está definida para 90%? Bem, isso é 90% do que o navegador calcula como o tamanho da página atual. Isso será absolutamente impreciso… Especificaremos a largura como 815 pixels para caber no aplicativo iframe.

Alterar largura = "90%" para largura = "815px"

Também recomendo encurtar a altura (significativamente) para 1000 ou até 1200 pixels. Isso tornará seu conteúdo um pouco mais contido…

Alterar altura = "4000" para altura = "1200px"

Permitir rolagem

Sua aStore pode ser bem longa (ainda mais longa do que os 4000 pixels originais especificados). Isso geralmente acontece se as descrições dos produtos forem longas e houver várias análises de produtos publicadas também. Por padrão, a rolagem está desabilitada… e isso cortará o conteúdo além da altura especificada. Como não queremos limitar o seu aStore, vamos habilitar a rolagem.

Alterar scrolling = "não" para scrolling = "sim"

Seu código concluído agora deve ser semelhante a este:

Não se esqueça de clicar no botão "Salvar e publicar" no canto superior direito. Você também pode visualizar seu trabalho a qualquer momento com o botão "Visualizar" adjacente…

Exigente, Exigente…

OK, estou criticando… Temos um código iframe em um aplicativo iframe. Sim, é redundante. Sim, deve ser consertado. Mas, para facilitar o uso neste guia de nível para iniciantes, vou deixar como está. Não me julgue.

Botão Personalizado

Agora que sua integração aStore está completa, você vai querer aquele pequeno "Bem-vindo!" botão na primeira página para parecer um pouco mais significativo, certo?

Volte para o "front end" da sua página do Facebook.
Clique no botão pequeno (com um triângulo apontando para baixo) imediatamente à direita de todas as guias da página.
Conforme a página se expande, passe o mouse sobre o novo "Bem-vindo!" aba.
Você notará que um novo ícone (lápis) aparecerá sobre a guia. Clique neste ícone para um novo menu suspenso.

No menu suspenso, clique em "Editar configurações".
Uma janela pop-up aparecerá na qual você pode alterar o nome da guia e adicionar uma imagem personalizada para exibir como o botão.
Personalize a guia como quiser.