Cercate un modo per aggiungere embed Instagram responsive sul vostro sito?
Per molti di voi che gestiscono siti web per la propria attività, blog o negozio online, mantenere i contenuti freschi e coinvolgenti è una priorità assoluta. Grazie alla mia esperienza nel marketing digitale, so che collegare il vostro sito web ai social media è una mossa intelligente.
I feed responsive di Instagram si adattano automaticamente alle diverse dimensioni dello schermo, in modo che tutti vedano perfettamente i vostri contenuti.
Dal momento che molte persone navigano su Internet con i loro telefoni, mostrare i post di Instagram in modo reattivo può essere un ottimo modo per tenerli impegnati.
Ma se siete abituati ad avere a che fare con il codice, visualizzare i post di Instagram sul vostro sito può essere complicato. Inoltre, dovete anche assicurarvi che gli embed siano mobile-friendly.
Se volete aggiungere facilmente feed Instagram responsive al vostro sito web WordPress, ci sono io!
In questa guida vi mostrerò come incorporare i feed di Instagram su WordPress e renderli reattivi, senza alcun problema tecnico.
Condividerò i semplici metodi che ho utilizzato per creare feed Instagram reattivi, in modo che possiate migliorare il vostro sito web senza sforzo e renderlo fantastico su qualsiasi dispositivo.
In questo articolo
Perché aggiungere embed Instagram reattivi al vostro sito web?
Con oltre 2 miliardi di utenti attivi, in base alle nostre ricerche sul social media marketing, Instagram è una delle più grandi piattaforme di social media e un luogo fantastico per la visualizzazione di contenuti visivi come foto e video.
E se volete un modo semplice per coinvolgere i vostri visitatori, potete incorporare i contenuti di Instagram nel vostro sito web.
Oltre il 58,99% degli utenti di Internet naviga al giorno d'oggi da cellulare e se gli embed di Instagram non sono responsive, la maggior parte dei vostri visitatori non sarà in grado di vedere correttamente i post.
Ma se rendete i vostri embed di Instagram mobile-friendly, potete mostrare foto e video pertinenti per mantenere facilmente l'interesse dei visitatori del sito web e trasformarli in vostri follower di Instagram.
Inoltre, potete anche postare i vostri contenuti su Instagram se volete far crescere rapidamente il vostro seguito sui social media.
Volete aumentare le vendite della vostra attività? Potete inserire recensioni e testimonianze positive da Instagram e convertire i visitatori in clienti.
I contenuti generati dagli utenti (UGC), come le recensioni su Instagram, possono fungere da prova sociale e convertire più visitatori in clienti.
Ancora meglio, potete anche creare un feed Instagram responsive shoppable, in modo che le persone possano acquistare direttamente i vostri prodotti, indipendentemente dal dispositivo che utilizzano per visitare il vostro sito web.
Ora sapete come l'incorporazione di post Instagram responsive può aiutare la vostra attività.
A questo punto, vediamo il modo più semplice per incorporare contenuti Instagram mobile-friendly.
Il modo più semplice per incorporare i post di Instagram in modo reattivo
Per quanto riguarda la visualizzazione dei contenuti di Instagram sul vostro sito, avete due opzioni da provare:
- In modo manuale: Generare codici di incorporamento HTML per ogni post di Instagram e aggiungerli al vostro sito WordPress.
- Modo automatico (modo semplice): Procuratevi un plugin per Instagram in grado di incorporare feed di foto e video responsive.
Utilizzando il primo metodo, l'aggiunta di post di Instagram al vostro sito può richiedere molto tempo, soprattutto se volete mostrare molti contenuti.
Dopo tutto, dovrete andare avanti e indietro tra i due siti web per recuperare i codici HTML e poi aggiungerli al vostro sito. Se non siete abituati ad avere a che fare con molto codice, questa fase può essere fonte di confusione.
Inoltre, dovrete controllare manualmente ogni volta se i vostri post di Instagram vengono visualizzati correttamente su mobile.
Inoltre, in questo modo si aggiungono iFrames di Instagram al sito. Ciò significa che i motori di ricerca come Google non possono visualizzare i contenuti del social media sul vostro sito.
La buona notizia?
È possibile evitare tutti questi problemi utilizzando il miglior plugin per il feed di Instagram in circolazione: Instagram Feed Pro.
Utilizzando il plugin Instagram Feed Pro, è possibile creare feed responsive per mostrare foto, video, reel e altro ancora di Instagram.
È sufficiente seguire una guida in tre fasi e il plugin vi condurrà attraverso l'intero processo di creazione, personalizzazione e incorporazione dei feed di Instagram.
Seguendo questa guida, potrete mostrare i vostri post, menzioni e hashtag di Instagram sul vostro sito WordPress.
Inoltre, tutti i contenuti incorporati verranno automaticamente ridimensionati per adattarsi alle dimensioni dello schermo dei visitatori. È anche possibile visualizzare in anteprima l'aspetto dei post di Instagram su diversi dispositivi.
Inoltre, Instagram Feed Pro vi permette di controllare il modo in cui i post di Instagram appaiono sul vostro sito web.
Potete scegliere da una collezione di modelli precostituiti e poi usare il personalizzatore di feed live per personalizzare il vostro feed in pochi semplici clic, senza bisogno di JavaScript, HTML, CSS o qualsiasi tipo di codice.
Grazie a tutte queste incredibili funzionalità, Instagram Feed Pro è diventato il plugin per feed di Instagram numero 1, con oltre 1 milione di utenti attivi.
Se volete aggiungere feed Instagram reattivi al vostro sito, acquistate subito Instagram Feed Pro.
Vediamo come utilizzare questo plugin per aggiungere post Instagram responsive.
Come aggiungere embed Instagram reattivi a WordPress
Per visualizzare i feed responsive dei post di Instagram, è sufficiente seguire i passaggi indicati di seguito.
Diamo un'occhiata!
Passo 1: Installare il plugin Instagram Feed Pro
Innanzitutto, procuratevi una copia di Instagram Feed Pro e installate il plugin sul vostro sito web.
Se volete saperne di più, date un'occhiata a questa guida passo-passo su come installare un plugin di WordPress.
Fase 2: Creare un nuovo feed di Instagram
Seguendo il flusso guidato in 3 fasi, potrete avere un nuovo feed Instagram pronto per essere messo online in pochi clic.
Per iniziare, aprite il menu Instagram Feed " Tutti i feed dall'area del cruscotto di WordPress. Nella nuova pagina, fate clic sul pulsante Aggiungi nuovo in alto.
È quindi possibile selezionare il tipo di contenuto di Instagram che si desidera mostrare sul proprio sito web:
- Timeline utente: Visualizza i post del tuo profilo Instagram
- Hashtag pubblici: Seleziona gli hashtag e mostra i post con gli hashtag.
- Messaggi taggati: Incorpora i post che menzionano il vostro account Instagram.
Se si desidera combinare diversi tipi di feed in un unico feed, è sufficiente selezionare più opzioni.
Dopo aver selezionato un tipo di alimentazione specifico, fare clic sul pulsante Avanti .
Fase 3: Collegare il feed a Instagram
Una volta selezionato un tipo di feed, è possibile iniziare a collegare l'account Instagram dell'azienda o del creatore a questo feed.
Per iniziare, fare clic sul pulsante Aggiungi sorgente .
Nel popup, è possibile scegliere tra due tipi di connessione a Instagram:
- Base: visualizza le foto, i filmati e le collab postate dal tuo profilo Instagram.
- Avanzato: Oltre alle funzioni di base, visualizza feed di hashtag, feed con tag, storie e altro ancora.
Dopo aver scelto il tipo di connessione, fare clic sul pulsante Connetti .
Dopo aver fatto ciò, potete aprire Instagram o Facebook per completare la connessione del vostro account. La buona notizia è che la procedura è la stessa per ogni piattaforma.
Per ora faccio clic sul pulsante Connetti con Instagram.
Successivamente, Instagram Feed Pro chiederà l'accesso in sola lettura al vostro account. Il plugin può anche visualizzare le informazioni su Instagram, ma non sarà in grado di apportare modifiche.
Di conseguenza, l'utilizzo di plugin Smash Balloon come Instagram Feed Pro è completamente sicuro.
Per continuare, fare clic sul pulsante Consenti del popup.
Ora potete utilizzare questo account Instagram come fonte per i vostri feed futuri senza lasciare il vostro sito web.
Per terminare la connessione dell'account, fare clic sul pulsante Avanti.
In questo modo, il vostro feed di Instagram può visualizzare foto e video responsive sul vostro sito web. Poiché il plugin copia automaticamente il design del vostro sito web, i vostri post si adatteranno perfettamente al vostro marchio.
Fase 4: Personalizzare il feed Instagram responsive
Se volete importare rapidamente un bel design per il vostro feed di Instagram, non dovete far altro che scegliere da una collezione di modelli predefiniti.
Una volta selezionato un modello di alimentazione, fare clic sul pulsante Avanti.
A questo punto, il plugin aprirà l'editor del live feed, in modo che possiate finire di impostare il design del vostro feed di Instagram.
Sul lato sinistro si trova il pannello di personalizzazione dell'editor. Qui è possibile utilizzare le opzioni per impostare il layout del feed, il design dell'intestazione, la combinazione di colori, il design dei pulsanti, il numero di post e molto altro ancora.
Ogni volta che si apportano modifiche, l'anteprima dal vivo sulla destra mostra l'aspetto del feed Instagram reattivo.
Per iniziare, potete impostare il layout dei post di Instagram sul vostro sito web. Ciascuna di queste opzioni di layout sarà perfettamente reattiva, quindi potete stare tranquilli.
Per continuare, basta fare clic sull'opzione Layout di alimentazione .
Ora è possibile scegliere tra 4 diverse opzioni di layout per il feed di Instagram: Griglia, Carosello, Muratura e Punti salienti.
Vediamo di seguito ciascuno di questi layout.
Se scegliete l'opzione Griglia, potete mostrare tutti i vostri post di Instagram in righe e colonne pulite.
In questo modo potete coinvolgere i vostri visitatori con tonnellate di foto e video.
Poi c'è il layout Carousel, che può mostrare i post in un carosello di slides.
Di conseguenza, il vostro sito web può essere più coinvolgente per i vostri visitatori.
Volete mantenere le proporzioni originali delle vostre foto e video di Instagram?
In questo caso è possibile selezionare il layout Muratura .
Se scegliete il layout Highlight , il vostro feed Instagram responsive metterà in evidenza post specifici.
Inoltre, l'attenzione sarà completamente concentrata sulle foto e sui video, poiché questo layout nasconde le didascalie e le altre informazioni.
Una volta selezionato il layout del feed, fare clic sul pulsante Salva .
Per continuare a progettare il nuovo feed, fare clic sul pulsante Personalizza in alto.
Potete anche scegliere i colori del vostro feed di Instagram utilizzando l'editor di feed live.
A tale scopo, fare clic sull'opzione Schema di colore a sinistra.
Per facilitare la modifica dei colori, è possibile scegliere tra 4 schemi di colori:
- Eredita dal tema: Copia i colori del tema di WordPress
- Chiaro: Visualizza un colore di sfondo chiaro con un carattere scuro
- Scuro: mostra uno sfondo scuro con un colore di carattere chiaro.
- Personalizzato: Scegliere manualmente tutti i colori
Dopo aver scelto la combinazione di colori, salvare le modifiche facendo clic su Salva.
Utilizzando le restanti opzioni di personalizzazione, è possibile modificare il modello del feed, il design dell'intestazione, lo stile dei pulsanti, il numero di post e molto altro ancora.
Non dimenticate di fare clic su Salva una volta che siete soddisfatti dell'aspetto del vostro feed Instagram reattivo.
Passo 5: incorporare il feed Instagram reattivo
Con il plugin Instagram Feed Pro, avrete due modi diversi per incorporare i feed di Instagram sul vostro sito WordPress:
- Incorporare un feed Instagram reattivo in una pagina WordPress
- Incorporare un feed Instagram reattivo nella barra laterale o nel piè di pagina di WordPress
Parliamo di entrambe le opzioni qui di seguito.
Incorporare un feed Instagram reattivo in una pagina WordPress
Poiché Instagram Feed Pro è stato progettato per essere facile da usare, potete iniziare a incorporare il vostro feed direttamente dall'editor live.
Per prima cosa, fare clic sul pulsante Embed nell'angolo in alto a destra.
Ora potete vedere tutti i modi in cui potete incorporare questo feed di Instagram.
Da tutte le opzioni, fare clic sul pulsante Aggiungi a una pagina per continuare.
Nel popup, selezionare la pagina di WordPress in cui si desidera mostrare il feed Instagram responsive.
Dopo aver fatto ciò, fare clic su Aggiungi per continuare.
Per aiutarvi a incorporare il vostro nuovo feed di Instagram, il plugin aprirà la pagina web nell'editor di WordPress.
Da qui, aggiungere un nuovo blocco di contenuti facendo clic sull'icona più (+).
Nella barra di ricerca in alto, scrivere "Instagram" per cercare il blocco del feed di Instagram.
Una volta fatto ciò, fate clic su Instagram Feed nei risultati di ricerca sottostanti.
Infine, fate clic sul pulsante Aggiorna e il vostro feed Instagram reattivo sarà visibile ai vostri visitatori.
Ora i visitatori del vostro sito web possono vedere foto e video da Instagram sul vostro sito, proprio come in questa schermata:
Come potete vedere, Instagram Feed Pro rende super facile la visualizzazione di embed Instagram reattivi sul vostro sito WordPress.
In pochi clic, i visitatori del vostro sito potranno vedere il vostro feed Instagram che funziona perfettamente su qualsiasi dimensione di schermo e dispositivo!
Vediamo quindi il modo più semplice per visualizzare i feed di Instagram nella barra laterale o nel piè di pagina.
Incorporare un feed Instagram reattivo nella barra laterale o nel piè di pagina di WordPress
Come per il metodo precedente, è possibile utilizzare l'editor di feed live per incorporare il feed di Instagram nella barra laterale o nel piè di pagina.
Se l'editor del live feed non è ancora aperto, andate nel menu Instagram Feed " All Feeds dalla vostra dashboard di WordPress.
A questo punto, fare clic sul feed di Instagram che si desidera incorporare.
Ora è possibile vedere il feed di Instagram aperto nell'editor delle dirette.
Per incorporare il vostro feed, cliccate sul pulsante Embed in alto.
Tramite il popup, è possibile scegliere dove incorporare il feed di Instagram, proprio come in precedenza.
Questa volta, fare clic sul pulsante Aggiungi a un widget .
Ora è possibile visualizzare la pagina dei widget del proprio sito web. Da qui è possibile incorporare il nuovo feed come widget di Instagram.
Se si desidera incorporare il proprio feed nella barra laterale del sito, fare clic sul pannello Sidebar .
Per il nostro tutorial, mostreremo gli embed di Instagram responsive sulla barra laterale.
Volete mostrare i media di Instagram nel piè di pagina del vostro sito? Allora fate clic sul pannello Piè di pagina .
Per aggiungere un nuovo widget, fare clic sull'icona più (+) in basso.
Infine, selezionare il widget Feed di Instagram dalle opzioni e fare clic su Aggiorna.
Ora i feed di Instagram sono disponibili nella barra laterale o nel piè di pagina del vostro sito web.
Per vedere come apparirà ai visitatori del vostro sito web, aprite il vostro sito e guardate voi stessi.
Diamo un'occhiata!
Ed ecco fatto!
Ora sapete come aggiungere embed Instagram responsive su WordPress in modo semplice. Potrete così mostrare feed Instagram mobile-friendly e tenere impegnati i visitatori.
Con l'aiuto di Instagram Feed Pro, è più facile che mai incorporare bellissimi feed di foto e video di Instagram sul vostro sito, senza bisogno di codifica.
Siete pronti a incorporare feed Instagram responsive? Acquistate oggi stesso Instagram Feed Pro!
Iniziate subito a incorporare il vostro feed Instagram reattivo
In base alla mia esperienza professionale, Smash Balloon Instagram Feed Pro è il modo più affidabile e diretto per garantire che il vostro feed di Instagram sia perfetto su ogni dispositivo.
È possibile avere un feed bellissimo e mobile-friendly in pochi minuti, senza alcuna codifica.
Ecco come iniziare:
- Ottenete la vostra copia di Instagram Feed Pro e provatelo senza rischi per 14 giorni per iniziare a visualizzare un feed Instagram perfettamente reattivo sul vostro sito.
- Utilizzate l'editor visuale del feed con anteprima dal vivo per personalizzare facilmente il design del vostro feed Instagram responsive in modo che si adatti perfettamente al vostro marchio.
- Incorporate il vostro nuovo feed responsive in qualsiasi pagina, post o barra laterale di WordPress per massimizzarne la visibilità.
Avete domande sull'utilizzo di Instagram Feed Pro per aggiungere un feed Instagram responsive al vostro sito WordPress? Chiedetemi pure nei commenti qui sotto.
Se siete creatori di contenuti video, può esservi utile anche questo post su come incorporare i video di Instagram sul vostro sito web.
Vi è stato utile? Seguiteci su Facebook e Twitter per altri utili consigli e trucchi di social media marketing.
