Come aggiungere foto di Instagram al tuo sito Web senza l'API

Potresti esserti imbattuto in un sito Web in passato che include un blocco di post di Instagram, di solito nella parte inferiore della sua home page. Ad esempio, questo sito di fotografia con sede nel Regno Unito ha una barra con un sacco di foto di Instagram affiancate nella parte inferiore della loro home page. Se visiti direttamente il loro feed di Instagram, puoi vedere che sono i loro post più recenti, disposti in una griglia. Ogni volta che pubblicano qualcosa di nuovo, la nuova foto appare anche sul loro sito web.

Questo è un modo davvero interessante per integrare Instagram con il tuo sito Web incentrato sulla vista. Metti in mostra i tuoi post recenti e hai collegamenti già pronti al tuo account Instagram su cui chiunque può fare clic per esplorare.

Questo tipo di configurazione è coinvolgente e può fare un ottimo lavoro nel indirizzare i visitatori del tuo sito web alla tua pagina Instagram. Tuttavia, in realtà è più complicato da configurare di quanto potresti pensare.

L'API di Instagram

Ora, potresti dirmi "perché non usare semplicemente uno dei plugin disponibili?" La risposta è, generalmente, "vai avanti". Ci sono molti plugin che ti offrono queste opzioni di visualizzazione dei feed e ne parlerò alla fine di questo post.

Ecco il problema. Ognuno di questi plugin deve utilizzare l'API di Instagram per accedere ai contenuti ed estrarre i dati per un incorporamento ufficiale. Se non stai utilizzando l'API, devi raschiare la pagina e raschiare la pagina è generalmente contro i termini di utilizzo di un sito come Instagram. Dopotutto, non vogliono avere a che fare con ladri di contenuti e simili.

Questo non vuol dire che non accada. Sono sicuro che hai visto alcune delle dozzine di siti Web che non fanno altro che raschiare Instagram. Siti come Picdeer, Pictame e Piknow hanno una storia interessante alle spalle, quindi lasciami fare una digressione per un momento.

Anni fa, Instagram era esclusivamente una piattaforma mobile. Non c'era modo di accedervi direttamente tramite l'app di Instagram. Ciò significava che le piattaforme desktop non erano in grado di utilizzare il sito e limitava un po' l'accesso aziendale.

Poiché molte persone volevano accedere ai feed di Instagram senza dover utilizzare un dispositivo mobile o un'app mobile, tutti questi siti sono nati. Tutto quello che hanno fatto è stato raschiare i post di Instagram e mostrarli pubblicamente.

Alla fine, Instagram ha reso la sua rete visibile ai desktop, anche se sei ancora limitato in alcune forme di azione che puoi intraprendere. Non puoi postare da un desktop, per il momento, ad esempio.

Nessuno di questi siti era ufficialmente supportato e nessuno di loro utilizzava l'API di Instagram. Tutto ciò che hanno fatto è stato raschiare i contenuti utilizzando app personalizzate. Ora, a Instagram non piacevano questi e rendere pubblica la loro piattaforma ha aiutato a combatterli. Molti sono morti durante la notte, ma alcuni che esistono ancora, come quelli menzionati sopra, aggiungono alcune funzionalità aggiuntive. Potrebbero avere un tipo diverso di ricerca dei contenuti, o un modo per navigare e scoprire nuovi contenuti, o forse solo un modo unico di visualizzare i contenuti. Il punto è che sono stati costretti a fornire un valore aggiunto invece di limitarsi a raschiare il contenuto da visualizzare.

Tutto questo è fondamentalmente solo per illustrare un punto. Sebbene lo scraping possa tecnicamente essere contrario ai termini di servizio di Instagram, in realtà non hanno fatto molti procedimenti giudiziari o altrimenti intrapreso azioni contro i siti che lo fanno. Poiché alcune delle opzioni che ho per te di seguito implicano tale raschiamento manuale, puoi capire perché potrebbe essere un problema.

Torniamo alla domanda principale, però. Perché non utilizzare semplicemente uno di questi plugin? Bene, l'API di Instagram è un'amante volubile. In effetti, fino a dicembre 2018, Instagram ha apportato una modifica importante alla propria API e ha deprecato la versione precedente. Vedi il grande disclaimer/avviso nella parte superiore di questa pagina? Questo è stato tutto ciò che hanno ottenuto i marchi di avviso che utilizzano l'API.

Ora, i plug-in che trovi per visualizzare i feed di Instagram si basano sull'API di Instagram o sullo scraping. Se Instagram interviene contro gli scraper, quei plugin muoiono. Se Instagram cambia drasticamente la sua API, quei plugin muoiono. In ogni caso, ti affidi a una terza parte per mantenere il loro codice adattato a qualsiasi modifica apportata da Instagram, il che può essere inaffidabile.

In seguito elencherò ancora alcuni plugin, perché hanno dimostrato di tenersi aggiornati e di funzionare anche attraverso le modifiche di Instagram. Tuttavia, tieni presente che un'altra soluzione potrebbe funzionare per te.

L'altro motivo per cui questi plug-in potrebbero avere problemi è se richiedono l' accesso all'API anziché il proprio. Alcuni usano il tuo accesso API per aggirare i limiti di tariffa; recuperano il contenuto con l'accesso API di ogni individuo, piuttosto che con un accesso centralizzato che può essere sopraffatto. Il problema qui è che se l'accesso all'API viene revocato per un motivo o per l'altro, non sarai in grado di continuare a utilizzare questi plug-in.

Se dopo tutto ciò sei ancora interessato a visualizzare i contenuti di Instagram sul tuo sito Web – e dovresti esserlo, è abbastanza utile e davvero interessante – ecco le tue opzioni.

Opzione 1: fingere

La prima opzione che hai è fingere con molto lavoro manuale. Non è difficile, ma può richiedere molto tempo ed è qualcosa che dovrai fare se vuoi mantenere la parità tra il tuo account Instagram e gli "incorporamenti" del tuo sito web. Metto gli incorporamenti tra virgolette spaventose qui perché non sono nemmeno incorporamenti tecnicamente.

Allora come funziona questo metodo? Bene, probabilmente stai scattando foto con una fotocamera digitale e modificandole su un computer prima di caricarle sul tuo dispositivo mobile per pubblicarle su Instagram. Mentre li modifichi, fai due copie. Una copia verrà caricata su Instagram come di consueto. L'altra copia verrà caricata sul tuo web hosting.

Quando pubblichi il contenuto su Instagram, crei un post di Instagram. Questo ha la tua didascalia, il permalink e altre informazioni ad esso associate. Crea e pubblica quel post.

Ora vai sul tuo sito web e crea una griglia dove vuoi che siano i tuoi contenuti di Instagram. Carica la tua foto sul tuo host web e incorporala in una delle celle della griglia. Copia il permalink sul post di Instagram e rendi la foto un link. Se desideri qualcosa che utilizzi uno script al passaggio del mouse per visualizzare la didascalia dell'immagine, richiederà un po' più di codifica, ma puoi anche copiare e incollare la didascalia.

Ci sono due principali svantaggi di questa opzione. Il primo è che ci vuole tempo ed è qualcosa che devi ricordarti di fare con ogni immagine che pubblichi su Instagram. Se dimentichi di caricare l'immagine sul tuo sito web, sposta tutte le immagini lungo la griglia e aggiungi la nuova immagine al primo slot, i tuoi feed finiranno per avere un aspetto diverso.

Il secondo grande svantaggio è che occupa spazio sul tuo hosting . Il vantaggio dell'utilizzo dell'accesso o dello scraping dell'API di Instagram è che le immagini sono ancora ospitate sulla CDN di Facebook, il che significa che si caricano rapidamente senza la necessità di occupare le risorse del proprio server. Questa opzione di incorporamento falso non ha questo vantaggio.

Opzione 2: incorporamenti manuali

La tua seconda opzione possibile è utilizzare un codice personalizzato e incorporamenti manuali da Instagram. Ogni post di Instagram ha la possibilità di incorporarlo. Fai clic sul post e fai clic sui tre punti in alto a destra della didascalia e una delle opzioni viene incorporata. Questo copia un codice lungo e utilizza l'API di Instagram. Il vantaggio principale qui è che, nonostante l'utilizzo dell'API, è una funzionalità fondamentale di Instagram ed è improbabile che cambi. Quando Instagram apporta modifiche alle API, si assicura che i propri servizi non siano interessati.

Quando incorpori il post sul tuo sito, in genere viene visualizzato a grandezza naturale e con la didascalia del post, anche se puoi dirgli di non includere la didascalia se preferisci. Questo ovviamente non è l'ideale per una piccola griglia di più immagini. Per visualizzarlo in questo modo, dovrai utilizzare del codice personalizzato per rimpicciolire e posizionare le immagini.

Questo è fondamentalmente un metodo manuale, saltando attraverso i cerchi, per creare una griglia in un modo che eviti l'uso di un plug-in di terze parti. Ospita ogni post su Instagram, ma richiede un codice personalizzato ed è una specie di soluzione stravagante. Devi comunque spostare manualmente i tuoi post lungo la griglia ogni volta che vuoi aggiungerne uno nuovo e devi comunque recuperare manualmente il codice di incorporamento per ciascuno. Inoltre, l'aggiunta di molti incorporamenti tutti nello stesso posto potrebbe aumentare notevolmente i tempi di caricamento. Nel complesso, non è davvero l'opzione migliore.

Opzione 3: utilizzo di un raschietto di terze parti

Come ho detto prima, Instagram non è necessariamente così difficile da raschiare. Puoi utilizzare un servizio di scraper di terze parti per presentarti i dati, che puoi quindi formattare e incorporare nel tuo sito in qualsiasi modo tu scelga.

Feedity, ad esempio, è uno di questi servizi di scraper di terze parti . Ciò ti consente di caricare una pagina Web nella loro interfaccia di raschiamento personalizzata e scegliere quali dati desideri che cerchi e che estragga quando cambia. Feedity, in questo caso, formatta specificamente quei dati come feed RSS.

Puoi quindi utilizzare quel feed RSS per incorporare il contenuto nella tua pagina. A seconda del design del tuo sito, puoi farlo in diversi modi. Questo è un tutorial per prendere un feed RSS e incorporare sia il contenuto che le immagini sul tuo sito, quando il tuo sito utilizza un'architettura WordPress. Nel frattempo, questo tutorial utilizza una semplice codifica HTML e PHP per fare la stessa cosa per un design del sito più tradizionale.

Questa opzione è leggermente meno che ideale per alcuni motivi. Prima di tutto, richiede una quantità significativa di codice personalizzato per il tuo sito web. Se non hai esperienza con la codifica da solo, dovrai assumere uno sviluppatore, il che può essere costoso.

Inoltre, ti affidi a un servizio di terze parti per eseguire lo scraping per te e ti affidi al fatto che funzioni su Instagram - il che è complicato - e fai affidamento sul fatto che Instagram non modifichi il design del loro sito per ostacolare quel tipo esatto di tentativi di scraping. Il fatto è che a Instagram non piacciono gli scraper e, sebbene non li inseguano individualmente, gli rendono la vita difficile.

Opzione 4: creazione di un raschietto personalizzato

La raschiatura, ovviamente, non è poi così difficile da configurare. Può sembrare che lo scraping sia difficile a causa delle diverse soluzioni di scraping disponibili, ma tutti cercano di essere "taglia unica" per vendere i loro servizi come attività. Se tutto ciò che vuoi fare è raschiare qualcosa da solo, è probabile che il tuo codice sia molto più semplice. Quindi puoi semplicemente creare del codice per raschiare Instagram una volta al giorno o qualsiasi altra cosa, formattare i dati nel modo che preferisci e impostare i tuoi incorporamenti personalizzati.

Come con alcune altre opzioni, ciò richiede molto tempo per la programmazione o lo sviluppatore, il che non è l'ideale. Se ti piace programmare, puoi farlo da solo, ma se non sei un fan, dovrai pagare per uno sviluppatore. Devi anche fare i conti con Instagram che cambia il loro sito e lo rende più difficile da raschiare, cosa che accadrà ogni pochi mesi con regolarità. Se sei disposto a combattere con questo, fallo. Altrimenti, considera un'opzione diversa.

Opzione 5: utilizzo di un plug-in

So di aver esaminato i motivi per cui non dovresti usare un plug-in prima, ma puoi comunque prenderlo in considerazione. Alcuni plugin sono bravi a stare al passo con le modifiche, non hanno bisogno della tua API per funzionare e sono banali da configurare.

Considera queste scelte: EmbedSocial, Juicer, SnapWidget ed Elfsight. Queste sono tutte opzioni che realizzeranno esattamente ciò che desideri con una configurazione minima. Hanno i loro vantaggi e svantaggi, ovviamente, e alcuni di loro non sono gratuiti, ma è proprio quello che devi esaminare.