Como adicionar fotos do Instagram ao seu site sem a API

Você pode ter encontrado um site no passado que inclui um bloco de postagens do Instagram, geralmente na parte inferior de sua página inicial. Por exemplo, este site de fotografia com sede no Reino Unido tem uma barra com várias fotos do Instagram lado a lado na parte inferior de sua página inicial. Se você visitar o feed do Instagram diretamente, verá que são as postagens mais recentes, organizadas em uma grade. Sempre que eles publicam algo novo, a nova foto também aparece em seu site.

Essa é uma maneira muito legal de integrar o Instagram ao seu site com foco visual. Você mostra suas postagens recentes e tem links prontos para sua conta do Instagram para qualquer um clicar para explorar.

Esse tipo de configuração é envolvente e pode fazer um ótimo trabalho ao encaminhar os visitantes do seu site para sua página do Instagram. No entanto, é realmente mais complicado de configurar do que você imagina.

A API do Instagram

Agora, você pode estar me dizendo “por que não usar apenas um dos plugins disponíveis?” A resposta é, geralmente, “vá em frente”. Existem muitos plugins que oferecem essas opções de exibição de feeds, e falarei sobre eles no final deste post.

Aqui está o problema. Cada um desses plugins precisa usar a API do Instagram para acessar o conteúdo e extrair os dados para uma incorporação oficial. Se você não estiver usando a API, precisará raspar a página, e raspar a página geralmente é contra os termos de uso de um site como o Instagram. Afinal, eles não querem lidar com ladrões de conteúdo e coisas do gênero.

Isso não quer dizer que não aconteça. Tenho certeza que você já viu algumas das dezenas de sites que não fazem nada além de raspar o Instagram. Sites como Picdeer, Pictame e Piknow têm uma história interessante por trás deles, então deixe-me divagar por um momento.

Anos atrás, o Instagram era apenas uma plataforma móvel. Não havia como acessá-lo diretamente por meio do aplicativo Instagram. Isso significava que as plataformas de desktop não podiam usar o site e limitavam bastante o acesso comercial.

Como muitas pessoas queriam acessar os feeds do Instagram sem precisar usar um dispositivo móvel ou aplicativo móvel, todos esses sites surgiram. Tudo o que eles fizeram foi raspar as postagens do Instagram e exibi-las publicamente.

Eventualmente, o Instagram tornou sua rede visível para desktops, embora você ainda esteja limitado em algumas formas de ação que pode executar. Você não pode postar de um desktop, por enquanto, por exemplo.

Nenhum desses sites era oficialmente suportado e nenhum deles usava a API do Instagram. Tudo o que eles fizeram foi extrair conteúdo usando aplicativos personalizados. Agora, o Instagram não gostou disso, e tornar sua plataforma pública ajudou a combatê-los. Muitos morreram da noite para o dia, mas alguns que ainda existem, como os mencionados acima, adicionam alguns recursos adicionais. Eles podem ter um tipo diferente de pesquisa de conteúdo, ou uma maneira de navegar e descobrir novos conteúdos, ou talvez apenas uma maneira única de exibir o conteúdo. O ponto é que eles foram forçados a fornecer um valor agregado em vez de apenas extrair conteúdo para exibir.

Tudo isso é basicamente apenas para ilustrar um ponto. Embora a raspagem possa tecnicamente ser contra os termos de serviço do Instagram, eles realmente não fizeram muitos processos ou ações contra os sites que o fazem. Como algumas das opções que tenho para você abaixo envolvem essa raspagem manual, você pode ver por que isso pode ser uma preocupação.

De volta à questão principal, no entanto. Por que não usar apenas um desses plugins? Bem, a API do Instagram é uma amante inconstante. De fato, em dezembro de 2018, o Instagram fez uma grande mudança em sua API e preteriu a versão mais antiga. Veja o grande aviso/disclaimer no topo desta página? Isso foi tudo que as marcas de aviso que usaram a API receberam.

Agora, os plugins que você encontra para exibir feeds do Instagram dependem da API do Instagram ou de raspagem. Se o Instagram agir contra os scrapers, esses plugins morrerão. Se o Instagram mudar drasticamente sua API, esses plugins morrerão. De qualquer forma, você está contando com um terceiro para manter seu código adaptado a quaisquer alterações que o Instagram faça, o que pode não ser confiável.

Ainda vou listar alguns plugins depois, porque eles provaram que se mantêm atualizados e que funcionam mesmo com mudanças no Instagram. No entanto, lembre-se de que outra solução pode funcionar para você.

A outra razão pela qual esses plugins podem ter problemas é se eles exigirem seu acesso à API em vez do seu próprio. Alguns usam seu acesso à API para contornar os limites de taxa; eles buscam conteúdo com o acesso à API de cada indivíduo, em vez de um acesso centralizado que pode ficar sobrecarregado. O problema aqui é que se o seu acesso à API for revogado por um motivo ou outro, você não poderá continuar usando esses plugins.

Se você ainda está interessado em exibir seu conteúdo do Instagram em seu site depois de tudo isso – e você deve estar, é bastante útil e muito legal – aqui estão suas opções.

Opção 1: Fingindo

A primeira opção que você tem é fingir com muito trabalho manual. Não é difícil, mas pode ser demorado, e é algo que você terá que fazer se quiser manter a paridade entre sua conta do Instagram e as “incorporações” do seu site. Eu coloco embeds em citações assustadoras aqui porque eles nem são tecnicamente embeds.

Então, como esse método funciona? Bem, você provavelmente está tirando fotos com uma câmera digital e editando-as em um computador antes de carregá-las em seu dispositivo móvel para postar no Instagram. Enquanto você os está editando, faça duas cópias. Uma cópia será enviada para o Instagram normalmente. A outra cópia será carregada em sua hospedagem na web.

Quando você publica o conteúdo no Instagram, você cria uma postagem no Instagram. Isso tem sua legenda, o link permanente e outras informações associadas a ela. Faça e publique esse post.

Agora vá para o seu site e crie uma grade onde você deseja que seu conteúdo do Instagram esteja. Carregue sua foto no seu host e incorpore-a em uma das células da grade. Copie o link permanente para a postagem do Instagram e transforme a foto em um link. Se você quiser algo que use um script de foco para exibir sua legenda de imagem, isso exigirá um pouco mais de codificação, mas você também pode copiar e colar sua legenda.

Existem duas grandes desvantagens para esta opção. A primeira é que leva tempo , e é algo que você precisa lembrar de fazer com cada imagem que postar no Instagram. Se você esquecer de enviar a imagem para o seu site, deslocar todas as imagens para baixo na grade e adicionar a nova imagem ao primeiro slot, seus feeds acabarão com uma aparência diferente.

A segunda grande desvantagem é que ocupa espaço em sua hospedagem . O benefício de usar o acesso ou raspagem da API do Instagram é que as imagens ainda estão hospedadas no CDN do Facebook, o que significa que elas carregam rapidamente sem precisar usar seus próprios recursos do servidor. Esta opção de incorporação falsa não tem esse benefício.

Opção 2: Incorporações manuais

Sua segunda opção possível é usar algum código personalizado e incorporações manuais do Instagram. Cada postagem do Instagram tem a opção de incorporá-la. Clique na postagem e clique nos três pontos no canto superior direito da legenda, e uma das opções será incorporada. Isso copia algum código longo e usa a API do Instagram. O principal benefício aqui é que, apesar de usar a API, é um recurso central do Instagram e é improvável que mude. Quando o Instagram faz alterações na API, eles garantem que seus próprios serviços não sejam afetados.

Quando você incorpora a postagem em seu próprio site, ela geralmente aparece em tamanho real e com a legenda da postagem, embora você possa dizer para não incluir a legenda, se preferir. Isso obviamente não é ideal para uma pequena grade de várias imagens. Para exibi-lo dessa maneira, você precisará usar algum código personalizado para reduzir e posicionar as imagens.

Este é basicamente um manual, saltando através do método de criação de uma grade de uma maneira que ignora o uso de um plug-in de terceiros. Ele hospeda cada postagem no Instagram, mas requer código personalizado e é uma solução meio esquisita. Você ainda precisa deslocar manualmente suas postagens para baixo em sua grade sempre que quiser adicionar uma nova, e ainda precisa buscar manualmente o código de incorporação para cada uma. Além disso, adicionar muitas incorporações no mesmo local pode aumentar significativamente seus tempos de carregamento. No geral, não é realmente a melhor opção.

Opção 3: usando um raspador de terceiros

Como mencionei antes, o Instagram não é necessariamente tão difícil de raspar. Você pode usar um serviço de raspagem de terceiros para apresentar dados, que você pode formatar e incorporar em seu site da maneira que escolher.

Feedity, por exemplo, é um desses serviços de raspagem de terceiros . Isso permite que você carregue uma página da Web em sua interface de raspagem personalizada e escolha quais partes de dados você deseja que ela procure e raspe quando ela for alterada. O Feedity, neste caso, formata especificamente esses dados como um feed RSS.

Você pode usar esse feed RSS para incorporar conteúdo em sua página. Dependendo do design do seu site, você pode fazer isso de algumas maneiras diferentes. Este é um tutorial para obter um feed RSS e incorporar o conteúdo e as imagens em seu site, quando seu site estiver usando uma arquitetura WordPress. Enquanto isso, este tutorial usa codificação HTML e PHP simples para fazer a mesma coisa para um design de site mais tradicional.

Esta opção é um pouco menos do que ideal por alguns motivos. Em primeiro lugar, requer uma quantidade significativa de codificação personalizada para o seu site. Se você não tiver experiência em codificar, precisará contratar um desenvolvedor, o que pode ser caro.

Além disso, você depende de um serviço de terceiros para fazer sua raspagem para você, e confia nele trabalhando no Instagram - o que é complicado - e confia no Instagram não alterando o design do site para impedir esses tipos exatos de tentativas de raspagem. O fato é que o Instagram não gosta de raspadores e, embora eles não os persigam individualmente, eles dificultam a vida deles.

Opção 4: criando um raspador personalizado

A raspagem, é claro, não é tão difícil de configurar. Pode parecer difícil raspar por causa das diferentes soluções de raspagem existentes, mas todas elas tentam ser “tamanho único” para vender seus serviços como um negócio. Se tudo o que você quer fazer é raspar algo por conta própria, seu código provavelmente será muito mais simples. Você pode, então, simplesmente criar algum código para raspar o Instagram uma vez por dia ou qualquer outra coisa, formatar os dados da maneira que desejar e configurar suas próprias incorporações personalizadas.

Tal como acontece com algumas outras opções, isso requer muita codificação pessoal ou tempo de desenvolvedor, o que não é o ideal. Se você gosta de codificar, pode fazê-lo sozinho, mas se não for fã, precisará pagar por um desenvolvedor. Você também tem que lidar com o Instagram mudando seu site e tornando mais difícil a raspagem, o que acontecerá a cada poucos meses com regularidade. Se você está disposto a enfrentar isso, vá em frente. Caso contrário, considere uma opção diferente.

Opção 5: usando um plug-in

Eu sei que eu revi as razões pelas quais você não deve usar um plugin antes, mas você ainda pode considerá-lo. Alguns plugins são bons para acompanhar as mudanças, não precisam de sua API para funcionar e são triviais de configurar.

Considere estas opções: EmbedSocial, Juicer, SnapWidget e Elfsight. Essas são todas as opções que realizarão exatamente o que você deseja com uma configuração mínima. Eles têm suas próprias vantagens e desvantagens, é claro, e alguns deles não são gratuitos, mas é exatamente isso que você precisa analisar.