Inserire il Feed Instagram nel tuo blog: guida completa!

25.6.22
Simona S.
6 commenti

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.


come inserire il feed di instagram nel blog: guida completa

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. 

 

come creare un'app su facebook developer

 

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.

come creare un'app su facebook developer

 

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.


configurare instagram basic display su facebook developer

 

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

 

configurare instagram basic display su facebook developer

 

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.


aggiungere user tester in instagram basic display su facebook developer

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

aggiungi tester su instagram basic display

 

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.

come autorizzare instagram basic display per instafeed

 

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

 

come generare il Token per il feed di instagram nel blog

 

Arrivati a questo punto bisogna seguire la procedura guidata, terminata la quale potrai visualizzare il tuo Token, unquesto 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: .2em;  Width: 100%; margin: 0 auto; padding: 0px 30px; 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 {
position: absolute; left: 0;
}
#instafeed .square a:hover {
 opacity:0.9;
}
#instafeed .square a img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
}

@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
😊




6 commenti:

  1. Anche su uso WordPress grazie per l'ottimo lavoro svolto e complimenti come sempre. Ti abbraccio forte e, se vuoi, sei la benvenuta da me :)

    RispondiElimina
    Risposte
    1. Ti ringrazio per i complimenti 🥰 Passerò senz'altro da te. Un abbraccio 🤗

      Elimina
  2. Ciao cara, come stai? Casualmente ho letto che avevi lasciato un messaggio nel vecchio blog Blogger della mia cara amica Elise per darle consigli sulla questione dell'hackeraggio...cavoli, questi vanno in giro a fare queste cose alle spalle di piccoli blog sperduti realizzati per hobby! Nonostante Elise sia su Altervista ora, avevo notato che era nostalgica del suo vecchio angolo di web per cui di mia spontanea volontà le ho regalato un tema blogger personalizzato... tu non sai, in pratica io regalo quasi tutto da una vita e poi qualcuno su un blog qualche mesetto fa mi ha pure offeso dicendo che il mio era un blog " a pagamento" e che lui, il tizio, non "ingrassava" i blog commerciali! No vabbè...leggendo nel suo blog ho scoperto che è un dirigente della PA con idee fasciste. Ma che si professa ultracattolico,eh! Facile parlare dall'alto di una poltrona sicura offendendo chi LAVORA a costo zero come noi, per passione..Scusa lo sfogo :D Tu sempre bravissima! Ascolta, ti chiedo un consiglio, se posso...ma se volessi inserire i codici delle mie utilità in un box come fai tu e non in una pagina del blocco note esterno secondo te come potrei fare? Nel senso, se inserisco il codice dell'utilità nella classica textarea realizzata in html, il codice ( forse a causa di WordPress) si "sporca", non so perché, cosa che non accade quando la inserisco in una classica pagina web HTML. Ecco perché a volte ho un po' di nostalgia dei vecchi siti statici. Ti ringrazio in anticipo e ti abbraccio forte :)

    RispondiElimina
    Risposte
    1. ciao Grazia, mi spiace per ciò che ti è successo, purtroppo l'idiozia non trova mai la sua fine.
      Anche io ho regalato temi per Blogger a blogger che affrontavano un periodo duro, nonostante avessi bisogno anche io di soldi.
      Da noi si dice che chi ha la pancia piena non può capire chi digiuna.
      Per il resto perché non ci sentiamo tramite email, così mi viene più facile scrivere i codici rispetto ai commenti 🤗

      Elimina
  3. Grazie Simona! Ti ho inviato una email tramite il modulo contatti, sei molto gentile :) Condivido il detto, anche da noi si dice così! Più che altro è una questione di rispetto, anche perché io sono sempre molto gentile con tutti e rispettosa, è stata una cattiveria gratuita, insomma. Un grande abbraccio, fai con calma per i codici.

    RispondiElimina
    Risposte
    1. Hai pienamente ragione: il rispetto va messo al di sopra d ogni cosa ♥

      Elimina

Grazie di aver commentato il post!
Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)