Comment ajouter des photos Instagram à votre site Web sans l'API

Vous avez peut-être rencontré un site Web dans le passé qui comprend un bloc de publications Instagram, généralement au bas de sa page d'accueil. Par exemple, ce site de photographie basé au Royaume-Uni a un bar avec un tas de photos Instagram en mosaïque au bas de leur page d'accueil. Si vous visitez directement leur flux Instagram, vous pouvez voir qu'il s'agit de leurs publications les plus récentes, disposées dans une grille. Chaque fois qu'ils publient quelque chose de nouveau, la nouvelle photo apparaît également sur leur site Web.

C'est une façon vraiment cool d'intégrer Instagram à votre site Web axé sur le visuel. Vous montrez vos publications récentes et vous avez des liens prêts à l'emploi vers votre compte Instagram sur lesquels n'importe qui peut cliquer pour explorer.

Ce type de configuration est engageant et peut faire un excellent travail pour renvoyer les visiteurs de votre site Web vers votre page Instagram. Cependant, il est en fait plus compliqué à mettre en place que vous ne le pensez.

L'API Instagram

Maintenant, vous pourriez me dire "pourquoi ne pas simplement utiliser l'un des plugins disponibles?" La réponse est généralement « allez-y ». Il existe de nombreux plugins qui vous offrent ces options d'affichage de flux, et j'en parlerai à la fin de cet article.

Voici le problème. Chacun de ces plugins doit utiliser l'API Instagram pour accéder au contenu et extraire les données pour une intégration officielle. Si vous n'utilisez pas l'API, vous devez gratter la page, et gratter la page est généralement contraire aux conditions d'utilisation d'un site comme Instagram. Ils ne veulent pas avoir affaire à des voleurs de contenu et autres, après tout.

Cela ne veut pas dire que cela n'arrive pas. Je suis sûr que vous avez vu quelques-unes des dizaines de sites Web qui ne font que gratter Instagram. Des sites comme Picdeer, Pictame et Piknow ont une histoire intéressante derrière eux, alors laissez-moi m'éloigner un instant.

Il y a des années, Instagram était uniquement une plate-forme mobile. Il n'y avait aucun moyen d'y accéder via autre chose que l'application Instagram directement. Cela signifiait que les plates-formes de bureau ne pouvaient pas utiliser le site, et cela limitait un peu l'accès des entreprises.

Étant donné que de nombreuses personnes souhaitaient accéder aux flux Instagram sans avoir à utiliser un appareil mobile ou une application mobile, ces sites ont tous vu le jour. Tout ce qu'ils ont fait, c'est gratter les publications Instagram et les afficher publiquement.

Finalement, Instagram a rendu son réseau visible sur les ordinateurs de bureau, bien que vous soyez toujours limité dans certaines formes d'action que vous pouvez entreprendre. Vous ne pouvez pas publier depuis un ordinateur, pour le moment, par exemple.

Aucun de ces sites n'était officiellement pris en charge et aucun d'entre eux n'utilisait l'API Instagram. Tout ce qu'ils ont fait, c'est récupérer du contenu à l'aide d'applications personnalisées. Maintenant, Instagram ne les aimait pas, et rendre leur plate-forme publique a aidé à les combattre. Beaucoup sont morts du jour au lendemain, mais certains qui existent encore, comme ceux mentionnés ci-dessus, ajoutent quelques fonctionnalités supplémentaires. Ils peuvent avoir un autre type de recherche de contenu, ou un moyen de parcourir et de découvrir de nouveaux contenus, ou peut-être simplement une manière unique d'afficher le contenu. Le fait est qu'ils ont été obligés de fournir une valeur ajoutée au lieu de simplement gratter le contenu à afficher.

Tout cela est essentiellement juste pour illustrer un point. Bien que le grattage puisse techniquement être contraire aux conditions d'utilisation d'Instagram, ils n'ont pas vraiment fait beaucoup de poursuites ou de mesures contre les sites qui le font. Étant donné que certaines des options que j'ai pour vous ci-dessous impliquent un tel grattage manuel, vous pouvez voir pourquoi cela pourrait être un problème.

Revenons à la question principale, cependant. Pourquoi ne pas simplement utiliser l'un de ces plugins ? Eh bien, l'API Instagram est une maîtresse volage. En fait, aussi récemment qu'en décembre 2018, Instagram a apporté un changement majeur à son API et a rendu obsolète l'ancienne version. Vous voyez la grande clause de non-responsabilité/avertissement en haut de cette page ? C'est tout ce que les marques d'avertissement utilisant l'API ont obtenu.

Désormais, les plugins que vous trouvez pour afficher les flux Instagram s'appuient sur l'API Instagram ou sur le scraping. Si Instagram prend des mesures contre les scrapers, ces plugins meurent. Si Instagram change radicalement son API, ces plugins meurent. Dans tous les cas, vous comptez sur un tiers pour adapter son code à toute modification apportée par Instagram, ce qui peut ne pas être fiable.

Je vais encore énumérer quelques plugins plus tard, car ils ont prouvé qu'ils se tiennent à jour et qu'ils fonctionnent même à travers les changements d'Instagram. Cependant, gardez à l'esprit qu'une autre solution peut fonctionner pour vous à la place.

L'autre raison pour laquelle ces plugins peuvent avoir des problèmes est s'ils nécessitent votre accès API au lieu du leur. Certains utilisent votre accès API pour contourner les limites de débit ; ils récupèrent le contenu avec l'accès API de chaque individu, plutôt qu'un accès centralisé qui peut être submergé. Le problème ici est que si votre accès à l'API est révoqué pour une raison ou une autre, vous ne pourrez pas continuer à utiliser ces plugins.

Si vous êtes toujours intéressé par l'affichage de votre contenu Instagram sur votre site Web après tout cela - et vous devriez l'être, c'est très utile et vraiment cool - voici vos options.

Option 1 : faire semblant

La première option que vous avez est de le simuler avec beaucoup de travail manuel. Ce n'est pas difficile, mais cela peut prendre du temps, et c'est quelque chose que vous devrez faire si vous voulez garder la parité entre votre compte Instagram et les « intégrations » de votre site Web. J'ai mis des intégrations entre guillemets effrayants ici parce qu'elles ne sont même pas techniquement intégrées.

Alors, comment fonctionne cette méthode ? Eh bien, vous prenez probablement des photos avec un appareil photo numérique et vous les modifiez sur un ordinateur avant de les télécharger sur votre appareil mobile pour les publier sur Instagram. Pendant que vous les modifiez, faites-en deux copies. Une copie sera téléchargée sur Instagram comme d'habitude. L'autre copie sera téléchargée sur votre hébergement Web.

Lorsque vous publiez le contenu sur Instagram, vous créez une publication Instagram. Cela a votre légende, le permalien et d'autres informations associées. Créez et publiez ce message.

Allez maintenant sur votre site Web et créez une grille où vous voulez que votre contenu Instagram soit. Téléchargez votre photo sur votre hébergeur et intégrez-la dans l'une des cellules de la grille. Copiez le lien permanent vers la publication Instagram et faites de la photo un lien. Si vous voulez quelque chose qui utilise un script de survol pour afficher votre légende d'image, cela nécessitera un peu plus de codage, mais vous pouvez également copier et coller votre légende.

Il y a deux inconvénients majeurs à cette option. La première est que cela prend du temps , et c'est quelque chose que vous devez vous rappeler de faire avec chaque image que vous publiez sur Instagram. Si vous oubliez de télécharger l'image sur votre site Web, déplacez toutes les images vers le bas de la grille et ajoutez la nouvelle image au premier emplacement, vos flux finiront par avoir un aspect différent.

Le deuxième inconvénient majeur est qu'il prend de la place sur votre hébergement . L'avantage d'utiliser l'accès ou le grattage de l'API Instagram est que les images sont toujours hébergées sur le CDN Facebook, ce qui signifie qu'elles se chargent rapidement sans avoir besoin d'utiliser vos propres ressources de serveur. Cette fausse option d'intégration n'a pas cet avantage.

Option 2 : intégrations manuelles

Votre deuxième option possible consiste à utiliser du code personnalisé et des intégrations manuelles d'Instagram. Chaque publication Instagram a la possibilité de l'intégrer. Cliquez sur le message et cliquez sur les trois points en haut à droite de la légende, et l'une des options est intégrée. Cela copie un code long et utilise l'API Instagram. Le principal avantage ici est que, malgré l'utilisation de l'API, il s'agit d'une fonctionnalité essentielle d'Instagram et il est peu probable qu'elle change. Lorsqu'Instagram apporte des modifications à l'API, il s'assure que ses propres services ne sont pas affectés.

Lorsque vous intégrez la publication sur votre propre site, elle apparaît généralement en taille réelle et avec la légende de la publication, bien que vous puissiez lui dire de ne pas inclure la légende si vous préférez. Ce n'est évidemment pas idéal pour une petite grille de plusieurs images. Afin de l'afficher de cette manière, vous devrez utiliser un code personnalisé pour réduire et positionner les images.

Il s'agit essentiellement d'un manuel, sautant à travers la méthode des cerceaux pour créer une grille d'une manière qui contourne l'utilisation d'un plugin tiers. Il héberge chaque publication sur Instagram, mais il nécessite un code personnalisé, et c'est une sorte de solution janky. Vous devez toujours déplacer manuellement vos messages vers le bas de votre grille chaque fois que vous souhaitez en ajouter un nouveau, et vous devez toujours récupérer manuellement le code d'intégration pour chacun. De plus, l'ajout de nombreuses intégrations au même endroit peut augmenter considérablement vos temps de chargement. Dans l'ensemble, ce n'est pas vraiment la meilleure option.

Option 3 : Utilisation d'un grattoir tiers

Comme je l'ai déjà mentionné, Instagram n'est pas nécessairement si difficile à gratter. Vous pouvez utiliser un service de scraper tiers pour vous présenter des données, que vous pouvez ensuite formater et intégrer sur votre site de la manière que vous choisissez.

Feedity, par exemple, est l'un de ces services de grattage tiers . Cela vous permet de charger une page Web dans leur interface de grattoir personnalisée et de choisir les éléments de données que vous souhaitez rechercher et racler lorsqu'ils changent. Feedity, dans ce cas, formate spécifiquement ces données sous forme de flux RSS.

Vous pouvez ensuite utiliser ce flux RSS pour intégrer du contenu sur votre page. Selon la conception de votre site, vous pouvez le faire de différentes manières. Il s'agit d'un tutoriel pour prendre un flux RSS et intégrer à la fois le contenu et les images sur votre site, lorsque votre site utilise une architecture WordPress. Pendant ce temps, ce didacticiel utilise un codage HTML et PHP simple pour faire la même chose pour une conception de site plus traditionnelle.

Cette option est légèrement moins qu'idéale pour plusieurs raisons. Tout d'abord, cela nécessite une quantité importante de codage personnalisé pour votre site Web. Si vous n'êtes pas expérimenté dans le codage vous-même, vous devrez embaucher un développeur, ce qui peut coûter cher.

De plus, vous comptez sur un service tiers pour faire votre grattage pour vous, et vous comptez sur lui pour travailler sur Instagram – ce qui est délicat – et vous comptez sur Instagram pour ne pas modifier la conception de son site pour contrecarrer ces types exacts de tentatives de grattage. Le fait est qu'Instagram n'aime pas les scrapers, et même s'ils ne les poursuivent pas individuellement, ils leur rendent la vie difficile.

Option 4 : Création d'un grattoir personnalisé

Le grattage, bien sûr, n'est pas si difficile à mettre en place. Il peut sembler que le grattage est difficile à cause des différentes solutions de grattage disponibles, mais ils essaient tous d'être "taille unique" pour vendre leurs services en tant qu'entreprise. Si tout ce que vous voulez faire est de gratter quelque chose par vous-même, votre code sera probablement beaucoup plus simple. Vous pouvez alors simplement créer du code pour gratter Instagram une fois par jour ou autre, formater les données comme bon vous semble et configurer vos propres intégrations personnalisées.

Comme pour certaines autres options, cela nécessite beaucoup de temps de codage personnel ou de développement, ce qui n'est pas idéal. Si vous aimez coder, vous pouvez le faire vous-même, mais si vous n'êtes pas fan, vous devrez payer un développeur. Vous devez également faire face à Instagram qui modifie son site et le rend plus difficile à gratter, ce qui se produira régulièrement tous les quelques mois. Si vous êtes prêt à faire face à cela, allez-y. Sinon, envisagez une autre option.

Option 5 : Utiliser un plugin

Je sais que j'ai passé en revue les raisons pour lesquelles vous ne devriez pas utiliser un plugin auparavant, mais vous pouvez toujours l'envisager. Certains plugins sont bons pour suivre les changements, n'ont pas besoin de votre API pour fonctionner et sont simples à configurer.

Considérez ces choix : EmbedSocial, Juicer, SnapWidget et Elfsight. Ce sont toutes des options qui accompliront exactement ce que vous voulez qu'elles fassent avec une configuration minimale. Ils ont leurs propres avantages et inconvénients, bien sûr, et certains d'entre eux ne sont pas gratuits, mais c'est exactement ce que vous devez examiner.