Come incorporare i video di Instagram in un post o in un widget.

Come implementare o embeddare i filmati di Instagram in una qualsiasi pagina web utilizzando il codice di un iFrame.

Come certo saprete Instagram è probabilmente l'applicazione di maggior successo per la condivisione di foto mediante dispositivi mobili. Instagram è anche celebre per i numerosi filtri che possono essere applicati alle immagini. A seguito del successo conseguito da Twitter con Vine, anche i dirigenti di Facebook che gestiscono Instagram dopo la sua acquisizione hanno deciso di offrire agli utenti la possibilità di condividere anche brevi video fino a un massimo di 15 secondi. 

In un precedente articolo abbiamo già visto come si possano creare dei widget con le foto postate su Instagram da noi o da un altro utente. In questo breve post voglio mostrare un metodo molto semplice per incorporare dei video di Instagram anche di altri utenti in una qualsiasi pagina web che potrebbe essere un post, una pagina statica o anche un widget posizionato in una sidebar o altrove.

Per prima cosa dobbiamo procurarci l'indirizzo web del video da condividere. La cosa è immediata se si tratta di un nostro video o un filmato di una persona che si segue. Ci si clicca sopra e si copia l'indirizzo visualizzato nella barra del browser. Nel caso di un filmato pubblicato da utente che non si segue si può aprire l'indirizzo instagram.com/nome-utente per poi selezionare il filmato

L'indirizzo web dei video di Instagram hanno questa struttura

http://instagram.com/p/bDStAyQh9W/

dove la parte in rosso rappresenta l'ID del video. Vediamo come si possa incorporare in una pagina web utilizzando il codice di un iFrame. Ricordo che il codice generico di un iFrame è il seguente

<iframe  align="center" height="300" width="300" scrolling="no" src="Indirizzo_Pagina"></iframe>

I parametri da inserire sono l'allineamento (left, right, center), le dimensioni (300 pixel), le barre di scorrimento (con no non si vedono mentre con yes diventano visibili) e naturalmente l'indirizzo della pagina che per i video di Instagram sarà l'URL del video con l'aggiunta di embed… in questo modo

http://instagram.com/p/bDStAyQh9W/embed?byline=0&amp;portrait=0

L'iFrame da incollare diventa quindi

<iframe  align="center" height="300" width="300" scrolling="no" src="http://instagram.com/p/bDStAyQh9W/embed?byline=0&amp;portrait=0"></iframe>

dove i parametri in verde sono quelli da personalizzare. Tale codice può essere incollato nell'Editor di Blogger in Modalità HTML il cui pulsante si trova accanto a Scrivi oppure in una pagina statica sempre in modalità HTML. Si può anche andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il codice per poi salvare e posizionare.

In ogni caso passando con il mouse sopra al player sarà visualizzata l'icona Play che permetterà agli utenti di riprodurlo e di interrompere la riproduzione cliccandoci sopra un'altra volta.