Fotos do Instagram com Instafeed


Resolvi juntar todas as informações em um único post, pois quando comecei a usar o Instafeed no blog, não encontrei um site que explicasse tudo. Alguns explicavam apenas como gerar o token e em outros encontrei o javascript necessário para criar o widget com as fotos do Instagram. Então para facilitar, todas as informações ficaram em um único post para vocês.

1. Criando o aplicativo

Acesse a página instagram/developer e faça o login com os dados da sua conta no Instagram. No primeiro acesso, irá solicitar um cadastro para a criação da conta desenvolvedor. Confirme as informações e na tela seguinte clique no botão Register a New Client.

Em seguida, irá abrir a tela para cadastrar o seu aplicativo. Você deve preencher com as informações na aba Details:



Não clique para registrar ainda. Acesse a aba Security e desmarque a opção Disable implicit OAuth. Feito isso, clique em Register no final da página.


Na tela seguinte irá apresentar o client id necessário para gerar o access token.


2. Criando o Access Token

Para criar o access token utilize a URL abaixo. Você deve substituir o YOUR_CLIENT_ID pelo código client id gerado nos passos anteriores.



Feito isso, cole essa URL no seu navegador. Ao acessar o este link, irá abrir a página do Instagram solicitando a autorização para o aplicativo.


Após esta tela, você será direcionado para outra página. O conteúdo dela não é importante, o que você precisa estará na URL da página. Tudo o que aparecer após "access_token=" é o que você precisa guardar.


3. Criar gadget com as imagens do Instagram

Antes de utilizar o código que irá mostrar as imagens do seu perfil no Instagram, você deve localizar o userId do seu perfil. Portanto, acesse este link e informe o seu User.

Em seguida, clique em Get Instagram User Id.



Agora, para adicionar um gadget com as fotos no seu blog, basta utilizar o código abaixo. Você pode testar o código com os seus dados acessando esta página aqui.

See the Pen Instafeed by Michelly Melo (@michellymelo) on CodePen.


Entenda o que você deve alterar no código acima:

userId: É o ID que você gerou no passo número 3.
clientId: É o ID gerado ao criar o aplicativo na página do Instagram (passo 1).
accessToken: Follow this post to get your Access Token (passo 2).
limit: É o limite de imagens que irão aparecer no seu gadget. O Instagram tem um limite de 20 imagens.

4.Incluir o código no seu blog (blogger)

Acesse a guia Modelo do seu blog, procure pela linha ]]></b:skin> e ANTES dela inclua o código o código CSS que consta no 3º passo.

Já na guia Layout, adicione o gadget HTML/JAVSCRIPT e cole o código editado da guia HTML do 3º passo.

Feito isso, basta salvar as alterações.

0 comentários:

Deixe um comentário