Programação

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

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

É 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/oauth/authorize/?client_id=ID_DO_CLIENTE_AQUI&redirect_uri=URL_DE_REDIRECIONAMENTO_DA_APLICACAO&response_type=token

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#access_token=AQUI_VAI_ESTAR_SEU_TOKEN_DE_ACESSO

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.

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.

E ae, o que achou do tutorial de Como exibir a ultima foto do Instagram no site ou no WordPress? Deu tudo certo? Foi fácil? Comente

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado