Integrare i post di Instagram in un sito web

Roberto Rizzo
Pubblicato da Roberto Rizzo
il 11/02/19 9.54

Tech Tricks by Mediaus
Se stai cercando il modo per integrare i post di Instagram, il grande network di immagini, in un sito o in un blog, questa è la guida che fa per te. La procedura richiede una serie di passaggi. Alla fine sarà possibile creare un oggetto/array degli ultimi 20 post pubblicati.

Per prima cosa è necessario conoscere l'ID dell’account Instagram. Ci sono alcuni siti web che forniscono un servizio grazie al quale è possibile scoprirlo. Ti segnalo questo link:https://codeofaninja.com/tools/find-instagram-user-id. Basterà inserire nel campo in testa alla pagina il nome utente, cliccare sul pulsante Find Instagram ID e ci verrà restituito un elenco di account Instagram. Una volta individuato l’account che interessa, basterà prendere nota del valore relativo al campo User ID.

A questo punto devi loggarti su Instagram con l’account del quale va pubblicato il feed e aprire la pagina https://www.instagram.com/developer/ da cui gestire i vari servizi forniti da Instagram.

Clicca in alto su Manage Clients.

Integrare i post di Instagram in un sito web

Lo scopo è quello di creare un Client autorizzato ad utilizzare le risorse dell’account di Instagram.
Nella schermata successiva clicca su Register a new Client.

Integrare i post di Instagram in un sito web

Compila il form con i dati richiesti e prendi nota dell'esatta url da inserire nel campo Website URL. Nel form troverai anche il campo Valid redirect URIs nel quale vanno inserite le url delle pagine alle quali è necessario che Instagram reindirizzi gli utenti che eseguono il login. Di questo però non preoccuparti, non è importante che gli utenti siano loggati sulla piattaforma. Trattandosi però di un campo obbligatorio devi nuovamente immettere la url del sito web. Ora puoi cliccare in fondo, sul pulsante Register che consentirà di salvare i dati inseriti.

Nello step successivo otterrai un codice associato al nuovo Client creato che servirà succcessivamente a generare un token necessario ad interrogare i servizi di Instagram. Nota che a quest'ultimo sono stati assegnati un Client ID ed un Client Secret di cui devi subito prendere nota.

Integrare i post di Instagram in un sito web

Integrare i post di Instagram in un sito web

Ora, sempre sul browser in cui sei loggato a Instagram, apri quest’indirizzo https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code avendo cura di sostituire i valori CLIENT-ID e REDIRECT-URI con quelli che precedentemente hai annotato.

Nella nuova schermata clicca sul pulsante Authorize. Instagram ti porterà alla pagina di reindirizzamento del sito web aggiungendo nella url un parametro in GET: code.

Grazie al valore di questo parametro potrai creare il tuo token autorizzato.

PS: ricorda che ll Redirect Uri, il Client Secret e il Client ID saranno sempre disponibili cliccando il pulsante Manage del relativo Client e scegliendo la tab Security, come mostrato nelle due immagini precedenti. 

È il momento di passare al codice PHP per interrogare i servizi di Instagram. Ho scritto una classe PHP che condivido con te e che puoi utilizzare per il tuo progetto:

<?php
class INSTAGRAM_API {          

            public $response;
            public $instagram_parameters;
            public function __construct($parameters) {                       
                        $this->instagram_parameters = $parameters; 
            }          

            public static function callExternalService($url, $data) {
                        $curl = curl_init($url);
                        curl_setopt($curl, CURLOPT_POST, true);
                        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
                        curl_setopt($curl, CURLOPT_REFERER, $_SERVER['HTTP_HOST']);
                        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
                        $response = curl_exec($curl);
                        curl_close($curl);
                        return $response;
            } 

            public static function callAPIGet($endpoint) { // Per chiamate GET

                        $curl = curl_init();
                        // Set some options - we are passing in a useragent too here
                        curl_setopt_array($curl, array(
                                   CURLOPT_RETURNTRANSFER => 1,
                                   CURLOPT_URL => $endpoint,
                                   CURLOPT_USERAGENT => 'Flo Magazine',
                                  
                        ));
                        // Send the request & save response to $resp
                       
                        $resp = curl_exec($curl);
                        // Close request to clear up some resources
                        curl_close($curl);
                       
                        return $resp;
            }
 
            public static function get_access_token($parameters) {
                                              
                        $endpoint = "https://api.instagram.com/oauth/access_token";
                        $response = json_decode(self::callExternalService($endpoint, $parameters));
                        $access_token = $response->access_token;
                       
                        return $access_token;
            }
           
            public function getPosts() {
                       
                        $endpoint = "https://api.instagram.com/v1/users/".$this->instagram_parameters['user_id']."/media/recent?access_token=".$this->instagram_parameters['access_token'];
                        $this->response = json_decode(self::callAPIGet($endpoint));
                       
            }
           
}
?>

Adesso è possibile creare uno script PHP che avrà il compito di ottenere l’access_token per il Client. Devi avere l’accortezza di sostituire i valori delle costanti ad inizio codice con quelli relativi al tuo Client Instagram. Salva lo script col nome che preferisci.

<?php
include("Instagram.class.php");
 
define("INSTAGRAM_CLIENT_ID", "INSERISCI QUI IL CLIENT ID");
define("INSTAGRAM_CLIENT_SECRET", "INSERISCI QUI IL CLIENT SECRET");
define("INSTAGRAM_USER_ID", "INSERISCI QUI IL USER ID");
define("INSTAGRAM_REDIRECT_URL", "INSERISCI QUI IL REDIRECT URI");
define("INSTAGRAM_GET_CODE", "INSERISCI QUI IL PARAMETRO GET['code']");
 
$tokenParameters = array(
            "client_id" => INSTAGRAM_CLIENT_ID,
            "client_secret" => INSTAGRAM_CLIENT_SECRET,
            "grant_type" => "authorization_code",
            "redirect_uri" => INSTAGRAM_REDIRECT_URL,
            "code" => INSTAGRAM_GET_CODE,
);
 
$access_token = INSTAGRAM_API::get_access_token($tokenParameters);
 
echo "Access Token = " . $access_token;
?>

Metti lo script su un server web insieme alla classe che avrai nominato "Instagram.class.php" e fai girare lo script. Se tutto va a buon fine vedrai sulla schermata l’access token che è stato generato da Instagram. Molto bene. Copia questa stringa e salvala. Questo sarà l’access token di Instagram relativo al tuo progetto.

Ora finalmente è il momento di creare uno script PHP che interrogherà Instagram per ottenere i dati degli ultimi 20 post pubblicati sull’account. Stavolta saranno sufficienti soltanto 2 costanti. Usa la stessa classe “Instagram.class.php” che, come puoi vedere, è inclusa a inizio script anche questa volta. In questo caso istanzia la classe e lancia il metodo che restituirà un JSON con tutti i dati dei post.

<?php
include("Instagram.class.php");
define("INSTAGRAM_USER_ID", "INSERISCI QUI LO USER ID");
define("INSTAGRAM_ACCESS_TOKEN", "INSERISCI QUI L'ACCESS TOKEN GENERATO NEL PRECEDENTE STEP");
 
$instagramParameters = array(
            "user_id" => INSTAGRAM_USER_ID,
            "access_token" => INSTAGRAM_ACCESS_TOKEN,
);
 
$Instagram = new INSTAGRAM_API($instagramParameters);
$Instagram->getPosts();
$posts = $Instagram->response->data;
 
echo "<div>";
echo "<h1>Post di Instagram</h1>";
echo "<pre>";
print_r($posts);
echo "</pre>";
echo "</div>";
 
?> 

Come vedi i dati dei post vengono salvati nell’array $posts. Lo script provvede a stampare tutti i dati restituiti dalle API di Instagram. Ora sta a te gestirli e generare l’output con la grafica che preferisci.

Buon lavoro!

Si parla di: social network, Instagram, codice PHP, Instagram ID, widget, flusso social on page

Hai letto il post? CONTATTACI
Vuoi commentare questo articolo?