Questo tutorial ti aiuterà ad inserire il feed del tuo profilo Instagram all'interno del tuo blog su Blogger, o qualsiasi altra piattaforma che non sia WordPress. Se farai le cose per bene, e se il tuo tema non ti darà complicazioni, il risultato sarà quello che vedi nel footer del mio blog.

---

Per prima cosa, sappi che non basta solo inserire alcuni codici per far apparire le anteprime dei tuoi post di instagram: devi creare un'app su Facebook Developer e generare un Token che permetterà di raccogliere i dati del tuo profilo (che deve essere pubblico).

Sappi anche che il Token ha qualche mese di vita, quindi, quando non visualizzerai più il feed nel tuo blog, vorrà dire che dovrai rigenerarlo. Ma non preoccuparti, una volta fatto tutto il procedimanto, rigenerare il Token sarà facile e veloce.

Come creare un'app per il feed di Instagram su Facebook Developer.

Per poter visualizzare il feed di instagram nel tuo blog, devi generare il Token, una sorte di chiave fatta da una serie lunghissima di numeri e lettere. Per poterlo generare hai bisogno di creare un'app.

Non andare nel panico, non è una vera e propria app, ma è un modo di dire a Facebook che hai creato qualcosa che raccoglierà i dati dell'utente, in questo caso i tuoi, perché il profilo che inserirai sarà il tuo.

Creare l'app è davvero semplice, ti consiglio di fare tutto il procedimento da pc e tenere una finestra aperta sul tuo account Instagram.

Ok, siamo pronti. Vai su Facebook Developer e clicca su Crea un'app.

Ti chiederà di scegliere il tipo di app da creare: tu scegli Consumatore e clicca su Avanti.

Dopo aver scelto la tipologia, dovrai inserire alcune informazioni di base, come il nome dell'app e la tua email. Nel campo del nome puoi insere anche il nome del tuo blog, non ha importanza.

A questo punto ti chiederà di aggiungere un prodotto alla tua app: tu scegli Instagram Basic Display cliccando su Configura, perché è quello che ti consentirà di visualizzare le foto del feed.

Nella nuova pagina che ti si aprirà, scorri fino in fondo e anche se vedi un messaggio di avvertimento, tu clicca Create new app. 

Ti mostrerà di nuovo il nome dell'app che tu hai scelto (il nome del tuo blog) e ti chiederà conferma di creare un'app (cioè... che bolas!).

Dopo avergli detto per l'ennesima volta che deve creare sta benedetta app, ti troverai davanti la schermata di Instagram Basic Display. Scorri fino ad arrivare alla sezione User Token Generator, e qui dovrai aggiungere un Tester (ossia tu) che dovrà autorizzare la tua app a leggere i dati del tuo profilo ig.

Verrai reindirizzata (di nuovo) nella pagina dei Ruoli. Scorri fino alla sezione Tester e clicca su Aggiungi Tester.

Comparirà una finestra pop-up nella quale dovrai scrivere il tuo username di Instagram.

Ricordi la finestra aperta sul tuo account Instagram?

Ecco vai lì e clicca su Impostazioni; dal menu a sinistra vai su App e siti web e clicca su Inviti relativi a test. Qui troverai l'invito a dare l'autorizzazione alla tua app: ovviamente clicca su accetta.

Da qui puoi anche rimuovere le autorizzazioni date per loggarti in alcuni siti.

Ora vai in Instagram Basic Display → Basic display, e scorri nuovamente fino alla sezione User Token Generator. Questa volta troverai il tuo account ig come tester. Clicca Genera Token.

Arrivati a questo punto bisogna seguire la procedura guidata, terminata la quale potrai visualizzare il tuo Token, un codice lunghissimo che ti consiglio di incollare su un blocco note, per non rischiare di perderlo.

Inserisci il codice per il feed di Instagram nel blog.

Ok, ora passiamo al tuo blog. Finalmente.

Per prima cosa vai in Tema → Modifica HTML. Inserisci nel tuo CSS questo codice (se non sai come fare guarda questo tutorial su dove inserire il CSS in Blogger)

/* INSTAFEED
--------------- */

#instafeed {
 display: grid; gap: 1em;  width: 100%; margin: 50px auto; line-height: 0; grid-template-areas: '1 2 3 4 5 6'; align-items: center;   
}
#instafeed .square {
 overflow: hidden; width: 100%; padding-bottom: 100%; position: relative;
}
#instafeed .square::after {
 content: ""; display: block;
}
#instafeed .square a {
display: block; text-align: left;
}
#instafeed .square a:hover {
 opacity:0.9;
}
#instafeed .square a img {
width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;
}

@media only screen and (max-width: 992px) {
#instafeed {
 grid-template-areas: '1 2'; padding: 0 25px;
}
}


Salva le modifiche e vai in Layout e aggiungi un gadget HTML/Javascript, meglio ancora se lo fai nel footer del tuo blog. All'interno del gadget, copia e incolla il codice che trovi qui sotto ricordandoti di incollare il Token che hai generato lì dove è richiesto.

<div id="instafeed"></div>

<script src="//jj4me.altervista.org/igfeed/instafeed.min.js.js"></script>

<!-- Configure and run instafeed -->
<script>
var feed = new Instafeed({
limit: 6,
accessToken: 'INSERISCI-IL-TUO-TOKEN-QUI',
template: '<div class="square"><a href="{{link}}" target="_blank"><img alt="seguimi su instagram" src="{{image}}" /></a></div>',
transform: function(item) {
var d = new Date(item.timestamp);
item.date = [d.getDate(), d.getMonth(), d.getYear()].join('/');
return item;
}
});

feed.run();
</script>

---

È tutto! (dopo tutto questo sbattimento, aggiungo io)
Fammi sapere se questo tutorial ti è stato utile o se proverai a farlo.
Se hai bisogno di aiuto, sappi che puoi scrivermi e se mi offri un cappuccino ti aiuto molto volentieri 😊