Mostrare le foto Instagram di qualsiasi profilo su una pagina web
Rieccoci qui!
Dopo un mese di assenza per motivi di lavoro e di studio, sono di nuovo qui tra voi. Oggi vi propongo una cosa molto interessante che ha a che fare con Instagram.
Se avete letto i miei articoli precedenti su Facebook, avrete visto che mal di testa pauroso è autenticarsi per fare qualsiasi cosa con il social di Mark Zuckerberg. Anche con Instagram è prevista l’autenticazione OAuth 2.0, ma la cosa interessante è che esistono ben due metodi per ottenere il feed di un utente Instagram senza autenticarsi!
Il primo metodo che vi propongo è quello, se vogliamo, un po’ “più ufficiale” dei due e consiste semplicemente nell’invocare un opportuno URL e nella lettura della risposta JSON contenente le foto.
Il secondo metodo, invece, è un trucco, e come tale voglio che vi ricordiate che attualmente funziona, ma è pur sempre un trucco e se un giorno Instagram modificasse la struttura delle sue pagine web, naturalmente questo sistema non funzionerebbe più.
Il secondo metodo, lo dico per correttezza, proviene da un plugin per WordPress che poi io ho riadattato per funzionare in Prestashop e Drupal.
Siamo pronti per tuffarci in questa nuova avventura!
Primo metodo: interrogazione del web service
Una curiosità: in realtà questo articolo doveva essere basato solo sul secondo metodo, ma facendo delle ricerche ho scoperto anche questo sistema e quindi ecco che abbiamo due metodi al prezzo di uno.
Vediamo per prima cosa il codice di questo esempio:
<?php
$json = file_get_contents("https://instagram.com/{UTENTE}/media/");
$dati = json_decode($json, true);
?>
<html>
<body>
<?php
if ($dati['status'] != "ok")
{
echo "Errore durante il caricamento delle foto da Instagram";
}
else
{
echo "<ul>";
foreach ($dati['items'] as $foto)
{
echo "<li>";
// recupero l'URL della foto e le sue dimensioni
$urlFoto = $foto['images']['standard_resolution']['url'];
$larghezza = $foto['images']['standard_resolution']['width'];
$altezza = $foto['images']['standard_resolution']['height'];
// NOTA: ho usato la versione standard_resolution, ma ci sono anche le versioni thumbnail e low_resolution
echo "<img src='$urlFoto' />";
// ora la descrizione
echo "<p>" . $foto['caption']['text'] . "</p>";
// ora i commenti
if ($foto['comments']['count'] != 0)
{
echo "<strong>Commenti:</strong>";
echo "<ul>";
for ($i = 0; $i < $foto['comments']['count']; $i++)
{
$commento = $foto['comments']['data'][$i];
$autore = $commento['from']['username'];
$testo = $commento['text'];
echo "<li><u>$autore</u> ha detto $testo</li>";
}
echo "</ul>";
}
echo "<hr>";
echo "</li>";
}
echo "</ul>";
}
?>
</body>
</html>
Ciò che dobbiamo fare per avere accesso alle foto di un utente è di inviare una richiesta HTTP a questo URL:
https://www.instagram.com/{UTENTE}/media/
La risposta è costituita da un array JSON che possiamo decodificare per mostrare le foto del profilo Instagram. Tale risposta contiene molti dati, io nel codice ne ho usati solo una minima parte, quindi vi invito in ogni caso a fare copia & incolla della risposta dentro a un JSON formatter online (ce ne sono diversi) e a studiare tutti i vari campi nel dettaglio. Per esempio, io di solito uso uno di questi due:
Le foto in particolare le potete trovare iterando lungo l’array items della risposta, usando un classico foreach.
Ogni foto è disponibile in tre risoluzioni:
- Anteprima (
standard_resolution) - Bassa qualità (
low_resolution) - Qualità normale (
standard_resolution)
Ciascuna foto contiene quindi un array denominato images, il quale a sua volta contiene tre oggetti che identificano tre risoluzioni diverse. Ogni versione della foto contiene varie informazioni tra le quali:
- URL
- Larghezza (
width) - Altezza (
height)
Già con queste informazioni possiamo mostrare le foto su una qualsiasi pagina web, basta fare come ho fatto io una lista non ordinata di immagini. Ma in realtà, questa API di Instagram ci dà molto di più, come vedremo tra poco.
Per esempio, possiamo mostrare anche la descrizione della foto andando a recuperare la proprietà text del campo caption della foto corrente.
Possiamo inoltre mostrare i commenti! Per ogni foto è sempre presente un oggetto denominato comments, anche se di commenti non ce ne sono. Questo oggetto contiene la proprietà count, la quale ci dice quanti commenti ci sono (quindi se non ci sono il campo avrà valore 0) e l’array data, il quale contiene i commenti veri e propri.
Quindi, per mostrare i commenti, dovete per prima cosa valutare la proprietà count per sapere quanti ce ne sono, quindi iterare lungo l’array data per recuperare degli oggetti, ciascuno dei quali rappresenta un commento.
Ognuno di questi oggetti contiene diverse informazioni tra cui:
- L’autore del commento (
from) - Il contenuto del commento (
text)
Come vedete, è veramente molto semplice mostrare le foto di un utente Instagram usando questa API. Nel prossimo paragrafo vedremo invece un metodo più simile ad un hack.
Secondo metodo: recuperare la pagina web del profilo ed estrarre i dati con un trucchetto
Cioè che andremo a fare con questo secondo metodo è in linea di massima molto semplice: utilizzando la funzione file_get_contents di PHP caricheremo la pagina web del profilo Instagram desiderato in una stringa e poi utilizzando le funzioni di splitting delle stringhe isoleremo nel codice l’array JavaScript che contiene le foto.
Infatti, ogni pagina web di un profilo Instagram contiene un array denominato _sharedData, che contiene tutte le foto caricate all’interno della pagina.
Per prima cosa vediamo il codice di questo secondo esempio:
<?php
$html = file_get_contents("https://instagram.com/{UTENTE}");
$tokens = explode("window._sharedData = ", $html);
$instagramJSON = explode( ';</script>', $tokens[1]);
$instagram = json_decode($instagramJSON[0], true);
$arrayFoto = $instagram['entry_data']['ProfilePage'][0]['user']['media']['nodes'];
?>
<html>
<head>
<style>
img { width: 140px; height: auto; padding: 5px; }
</style>
</head>
<body>
<ul>
<?php
foreach ($arrayFoto as $foto)
{
echo "<li>";
echo "<a href='https://www.instagram.com/p/" . $foto['code'] . "/' target='_blank'><img src='" . $foto['thumbnail_src'] . "' alt='' /></a>";
echo "<p>" . $foto['caption'] . "</p>";
echo "</li>";
}
?>
</ul>
</body>
</html>
La prima cosa da fare è, come dicevo poco fa, quella di recuperare la pagina web del profilo Instagram desiderato e di salvare il codice HTML dentro una variabile come stringa. Dopodiché, ecco la magia.
Con la prima istruzione explode spezziamo il codice in corrispondenza dell’inizio dell’array Javascript e prendiamo il secondo token (quindi tutto ciò che viene dopo la dichiarazione dell’array _sharedData).
Con la seconda istruzione explode, spezziamo la nuova stringa ottenuta nel passo precedente in corrispondenza del punto dove termina l’array JavaScript, e stavolta ne prendiamo il primo token (cioè l’array che stiamo cercando). Il processo è il seguente:
Prima divisione:
<script type="text/javascript">window._sharedData = { … };</script>
Seconda divisione:
{ … };</script>
Arrivati a questo punto, decodifichiamo la stringa in un oggetto PHP usando la funzione json_decode e siamo quasi pronti! L’array delle foto caricate nella pagina è il seguente:
$arrayFoto = $instagram['entry_data']['ProfilePage'][0]['user']['media']['nodes'];
Non rimane altro che iterare lungo questo array per mostrare le foto. In questo caso la struttura dei dati è differente.
- L’URL della foto è contenuto nel campo
thumbnail_src - Il link alla pagina della foto lo ottenete unendo la base che non cambia mai (“https://www.instagram.com/p/”) con il codice della foto contenuto nel campo
code - La descrizione della foto è contenuta nel campo
caption.
Una volta fatto ciò, salvate il vostro codice e provate a eseguirlo.
Conclusione
Oggi vi ho mostrato due metodi totalmente differenti per mostrare le foto di un profilo Instagram su una qualsiasi pagina web. Il codice sorgente di questo articolo lo potete trovare a questo indirizzo.
A presto!
L'autore
Articoli correlati
Altri articoli
Ecco qualche altro articolo che potresti trovare interessante:
21 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo