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 chiave segreta composta da una serie lunghissima di numeri e lettere. Per poter generare il Token hai bisogno di creare un'app su Facebook Developer.
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 - per visualizzare i post del tuo profilo Instagram.
Creare l'app è davvero semplice, ti consiglio di fare tutto il procedimento da pc e tenere una finestra aperta sul tuo account Instagram e il cellulare a portata di mano.
Ok, siamo pronti. Vai su Facebook Developer e clicca su Crea un'app.
Scrivi il Nome dell'app nel campo richiesto e clicca su Avanti.
Ti chiederà il tipo di uso che ne vuoi fare: scegli l'opzione in fondo 'Altro', e poi Avanti.
Ora devi scegliere il tipo di app da creare: tu scegli Azienda e clicca su Avanti.
Dopo aver scelto la tipologia, ti mostrerà un riepilogo: clicca su Avanti.
A questo punto ti chiederà di aggiungere un prodotto alla tua app: tu scegli Instagram cliccando su Configura, perché è quello che ti consentirà di visualizzare le foto del feed.
Dal menu a sinistra, nella tab Ruoli dell'App, clicca su Ruoli per entrare nella schermata che ti consentirà di aggiungere persone e dargli un ruolo all'interno del progetto.
In questo caso, il ruolo da scegliere è quello di Tester di Instagram.
Dopo aver inserito il tuo profilo Instagram con il ruolo di Tester, clicca dal menu a sinistra Configurazione con l'API di Instagram.
Quindi clicca su Genera Token.
Una volta seguiti tutti i passaggi per accedere al tuo profilo ed esserti autenticato (ecco a cosa serviva il cellulare), il Token verrà generato. Comparirà un pop-up e tu potrai copiare il Token dopo aver spuntato la casellina che vedi nell'immagine.
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.
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 😊
