Como exibir a ultima foto do Instagram no site

Salve salve galáxia hoje venho apresentar pra vocês um tutorial muito bacana, eu vou mostrar como exibir a ultima foto do Instagram no site, ou seja, vamos definir um usuário e mostrar as ultimas postagens desse perfil.

Clique aqui e veja o exemplo

Clique aqui e veja o exemplo no WordPress

Como exibir a ultima foto do Instagram no site ou WordPress

Passo 1: Gerando o Cliente

Bom para gerar o cliente, basta você clicar nesse link e preencher os seguintes campos:

Application Name: como o próprio nome já diz, é o nome da aplicação, é proibido o uso de: instagram, IG, insta ou gram no nome.
Description: Descrição da aplicação é bom definir uma boa descrição quando se tem várias aplicações na mesma conta.
Website: URL do site que será usada a aplicação.
OAuth redirect_url: URL de redirecionamento da aplicação.

Você deve deixar desmarcados os checkbox das outras opções.

Clique no exemplo abaixo

magento-foto-01

Depois clique em Register e abrirá uma nova tela conforme exemplo abaixo

magento-foto-02

É isso, agora você já tem um cliente registrado no Instagram, vamos para o próximo passo.

Passo 2: Gerando o Token de Acesso (Access Token)

O segundo passo do tutorial de como exibir a ultima imagem do Instagram no site, é gerar um token de acesso para sua aplicação. Você já possui um Client ID e um Client Secret que são gerados automaticamente quando se registra um novo cliente.

Abaixo temos uma URL para obter o Token, mas primeiro, você precisa alterar duas partes da URL abaixo, são elas:

ID_DO_CLIENTE_AQUI: Insira o Client ID gerado com o seu cliente registrado no passo anterior.

URL_DE_REDIRECIONAMENTO_DA_APLICACAO: Insira a URL de redirecionamento (com http://) da aplicação definida no passo anterior

https://instagram.com/accounts/login/?force_classic_login=&next=/oauth/authorize/%3Fclient_id%3DID_DO_CLIENTE_AQUI%26amp%3Bredirect_uri%3DURL_DE_REDIRECIONAMENTO_DA_APLICACAO%26amp%3Bresponse_type%3Dtoken

Agora cole a URL já alterada em uma nova aba do seu navegador e aperte enter. Mesmo que retorne um erro, ou você seja redirecionado para o site que você quer exibir a ultima foto do instagram, repare na URL que gerou depois de você apertar o Enter, se tudo correu bem, a sua URL será mais ou menos assim.

http://url_de_redirecionamento.com.br/

Guarde bem esse Token de Acesso (access token) pois vamos utilizá-lo nos próximos passos.

Passo 3: Descobrindo o ID de um usuário do Instagram

Por padrão, nós temos acesso ao nome de usuário e não ao ID do usuário, é através do nome de usuário que na maioria das vezes seguimos alguns perfis, então com o nome de usuário na mão vamos obter o ID desse usuário.

No exemplo, eu escolhi exibir as ultimas fotos do perfil do Wonderful Places no Instagram, então eu preciso descobrir qual o ID do Usuário wonderful_places, para isso, basta clicar nesse link, colocar o usuário do Instagram e clicar em GO, logo abaixo, você verá o resultado, conforme exemplificado na imagem.

magento-foto-03

Guarde bem o user_id gerado, pois você vai precisar dele no próximo passo.

Passo 4: O código

Para você montar o código do tutorial de como exibir a ultima foto do Instagram no site, vai precisar de duas informações que foram geradas nos passos anteriores, são elas

Token de Acesso: obtido no passo 3

User ID: obtido no passo 4

Abaixo o código completo para exibir a ultima foto do Instagram no site, vou detalhar melhor as partes importantes pra vocês.

Linha 16: Após o /users/ adicione o ID do usuário gerado no passo 3
Linha 16: Substitua o AQUI-VAI-O-ACCESS-TOKEN pelo seu Token de acesso gerado no passo 4
Linha 16: Escolha o número de imagens a ser utilizada, no exemplo, são 3 imagens.
Linha 27: Define se ao clicar na imagem o visitante será redirecionado para o perfil do Instagram ou para a imagem em questão. No exemplo o link é para o perfil.
Linha 27: Define o tamanho das imagens (width e height) que serão exibidas, no exemplo 300px X 300px.

PHP

// Pega os dados externos
 function fetchData($url)
 {
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 $result = curl_exec($ch);
 curl_close($ch);
 return $result;
 }

// Após o /users/ adicione o ID do usuário.
// access_token=AQUI-VAI-O-ACCESS-TOKEN
// &count=3 define o numero de imagens a serem exibidas
$result = fetchData("https://api.instagram.com/v1/users/ID_DO_USUARIO/media/recent/?access_token=AQUI-VAI-O-ACCESS-TOKEN&count=3");
 $result = json_decode($result);
?>
<?php foreach ($result->data as $post): ?>
<?php
 // Pega os caminhos das imagens com HTTP
 $insegura = $post->images->standard_resolution->url;
 // Transforma os caminhos das imagens em HTTPS
 $segura = preg_replace("/^http:/i", "https:", $insegura);
?>
<!-- Link para o perfil do instagram -->
<a href="https://instagram.com/wonderful_places" target="_blank"><img src="<?php echo $segura;?>" width="300px" height="300px"></a>
<?php endforeach ?>

Agora com o código em mãos vamos para o último passo para mostrar imagens do Instagram no site.

Passo 5: Adicionando ao site

Você pode inserir o código acima no arquivo footer do seu site, ou então na página inicial ou onde você quiser exibir a ultima imagem do Instagram no site.

Passo 5: Adicionando ao WordPress

Você pode inserir o código acima no arquivo footer.php do seu WordPress, ou então na coluna lateral (sidebar.php) ou onde você quiser exibir a ultima imagem do Instagram no WordPress. Os arquivos do tema, geralmente ficam no seguinte caminho: /wp-content/themes/nome-do-seu-tema/ escolha o arquivo, insira o código e envie novamente para o servidor.

O código final para quem quiser colocar na coluna da lateral do WordPress, ficou como o abaixo

<div id="instagram" class="widget-area" role="complementary">
<aside class="widget">
<h3 class="widget-title">Instagram - Wonderful Places</h3>
<?php
 // Pega os dados externos
 function fetchData($url){
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 $result = curl_exec($ch);
 curl_close($ch);
 return $result;
 }

 // Após o /users/ adicione o ID do usuário.
 // access_token=AQUI-VAI-O-ACCESS-TOKEN
 // &count=3 define o numero de imagens a serem exibidas
 $result = fetchData("https://api.instagram.com/v1/users/ID_DO_USUARIO/media/recent/?access_token=AQUI-VAI-O-ACCESS-TOKEN&count=1");
 $result = json_decode($result);
 ?>

 <?php foreach ($result->data as $post): ?>
 <?php
 // Pega os caminhos das imagens com HTTP
 $insegura = $post->images->standard_resolution->url;
 // Transforma os caminhos das imagens em HTTPS
 $segura = preg_replace("/^http:/i", "https:", $insegura);
 ?>
 <!-- Link para o perfil do instagram -->
 <a href="https://instagram.com/wonderful_places" target="_blank"><img src="<?php echo $segura;?>" width="240px" height="240px"></a>
 <?php endforeach ?>
 </aside>
</div>

Clique aqui e veja o exemplo

Clique aqui e veja o exemplo no WordPress

Clique aqui e veja o código completo no GitHub

Clique aqui e faça download do arquivo do exemplo.

2017-09-26T23:42:06+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x