Come creare un feed di foto Instagram personalizzato in WordPress

Un feed di Instagram può mantenere il tuo sito web aggiornato e allo stesso tempo farti ottenere più like, condivisioni e follower su Instagram. Ti aiuta a connetterti con il tuo pubblico su più piattaforme e aumenta l'engagement.

I social media sono stati fondamentali per portare traffico al nostro sito web ed espandere il nostro pubblico. Condividendo contenuti coinvolgenti e interagendo con i nostri follower, siamo stati in grado di aumentare la consapevolezza del marchio e attrarre nuovi visitatori.

In questo articolo, ti mostreremo come creare facilmente un feed di foto personalizzato di Instagram per il tuo sito web WordPress.

Perché includere un feed di Instagram sul tuo sito WordPress?

Incorporare un feed di Instagram sul tuo sito WordPress ti permette di mostrare contenuti freschi ai tuoi visitatori senza molto lavoro extra. Incoraggia anche i lettori a seguirti su Instagram.

Invece di aggiungere manualmente immagini nell'editor a blocchi di WordPress, puoi semplicemente creare un feed che si aggiorna automaticamente ogni volta che pubblichi nuove foto su Instagram. Puoi persino mostrare le foto di altre persone sul tuo sito creando un feed basato su hashtag.

Nell'immagine seguente, puoi vedere un esempio di un marchio che utilizza un feed di Instagram personalizzato per mostrare contenuti generati dagli utenti.

In questo modo, puoi utilizzare un feed di Instagram personalizzato per fornire una preziosa prova sociale e guadagnare di più online.

Detto questo, vediamo come puoi creare un feed di foto personalizzato di Instagram in WordPress.

Come creare un feed di foto Instagram personalizzato in WordPress

Il modo più semplice per aggiungere un feed di foto di Instagram al tuo sito è utilizzare il plugin Smash Balloon Instagram Feed. È il miglior plugin Instagram per WordPress che ti consente di visualizzare istantaneamente i contenuti dal tuo account Instagram.

È anche il modo più semplice per risolvere il problema oEmbed di Facebook e Instagram in WordPress.

Tratteremo diversi passaggi nel nostro tutorial e puoi utilizzare i collegamenti rapidi qui sotto per saltare alle diverse sezioni:

• Come collegare un account Instagram a WordPress
• Come personalizzare il tuo feed di foto di Instagram
• Visualizzare un feed delle tue foto di Instagram in WordPress
• Bonus: Lascia che i clienti acquistino i tuoi prodotti tramite Instagram

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere.

Come collegare un account Instagram a WordPress

Innanzitutto, dovrai installare e attivare il plugin Smash Balloon Instagram Feed. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai alla pagina Instagram Feed » Impostazioni dalla dashboard di WordPress

Successivamente, inserisci la tua chiave di licenza Smash Balloon nel campo 'Chiave di licenza'.

Puoi trovare queste informazioni nell'email di conferma che hai ricevuto al momento dell'acquisto di Smash Balloon e anche nel tuo account Smash Balloon.

Una volta fatto ciò, procedi e fai clic sul pulsante 'Attiva'.

Ora sei pronto per creare un feed Instagram personalizzato. Per iniziare, seleziona Instagram Feed » Tutti i feed e quindi fai clic sul pulsante 'Aggiungi nuovo'.

Smash Balloon mostrerà ora tutti i diversi tipi di feed Instagram che puoi creare.

Seleziona semplicemente il tipo di feed che desideri aggiungere a WordPress e fai clic su 'Avanti'.

Se desideri semplicemente visualizzare le tue foto di Instagram, puoi utilizzare un account Instagram Personale. Tuttavia, avrai bisogno di un account Instagram Business se desideri creare un feed hashtag o mostrare i post in cui il tuo account è taggato.

Se selezioni 'Pubblica Hashtag', dovrai digitare gli hashtag che desideri utilizzare. Per mostrare più hashtag nello stesso feed, separa semplicemente ogni hashtag con una virgola.

Una volta fatto ciò, fai clic su 'Avanti'.

Desideri mostrare i post in cui il tuo account è taggato? Dovrai invece selezionare 'Post Tagged' e quindi fare clic su 'Avanti'.

Indipendentemente dal tipo di feed che stai creando, dovrai collegare WordPress al tuo account Instagram.

Per iniziare, fai clic sul pulsante ‘Add Source’.

Dopodiché, scegli se desideri mostrare immagini da un account personale o business.

Se selezioni il pulsante accanto a 'Personale', Smash Balloon non includerà l'avatar e la biografia di Instagram nell'intestazione per impostazione predefinita. Tuttavia, puoi sempre aggiungere manualmente l'avatar e la biografia di Instagram nelle impostazioni del plugin.

Dopo aver scelto tra un account Business e Personale, fai semplicemente clic su 'Accedi con Facebook'.

Ora puoi selezionare l'account Instagram che desideri mostrare sul tuo sito web WordPress e fare clic su 'Avanti'.

Dopodiché, seleziona la casella accanto alla pagina Facebook collegata all'account Instagram che desideri utilizzare.

Fatto ciò, devi fare clic sul pulsante 'Avanti'.

Ora vedrai un popup con tutte le informazioni a cui Instagram Feed Pro avrà accesso e le azioni che potrà eseguire.

Per limitare l'accesso del plugin al tuo account Instagram, fai semplicemente clic su uno degli interruttori per impostarlo da 'Sì' a 'No'. Sii consapevole che ciò potrebbe influire sulle foto che appaiono sul tuo blog WordPress o sito web.

Tenendo conto di ciò, ti consigliamo di lasciare abilitati tutti gli interruttori. Quando sei soddisfatto di come è impostato il feed, fai clic su 'Fatto'.

Ora vedrai un popup con l'account Instagram che hai appena aggiunto al tuo sito web.

Seleziona semplicemente la casella accanto a quell'account e quindi fai clic su 'Aggiungi'.

Instagram Feed Pro ti riporterà ora alla schermata Instagram Feeds » All Feeds.

Per creare un feed Instagram personalizzato, seleziona semplicemente la casella accanto all'account Instagram che desideri utilizzare. Quindi, fai clic su 'Avanti'.

Il plugin creerà ora un feed di foto di Instagram che puoi aggiungere a qualsiasi pagina, post o area pronta per i widget.

Come personalizzare il tuo feed di foto di Instagram

Per impostazione predefinita, Smash Balloon aprirà il tuo feed nel suo editor, pronto per essere personalizzato.

Sulla destra, vedrai un'anteprima del tuo feed di foto di Instagram. Sul lato sinistro ci sono tutte le impostazioni che puoi utilizzare per personalizzare il feed dei social media.

La maggior parte di queste impostazioni sono autoesplicative, ma copriremo rapidamente alcune aree chiave.

Per modificare il layout, fai semplicemente clic su 'Feed Layout' nel menu di sinistra. Ora puoi scegliere tra un layout a griglia, muratura o carosello.

Esiste anche un layout evidenziato che evidenzia ogni terza foto per impostazione predefinita.

Mentre fai clic sulle diverse opzioni, l'anteprima live si aggiornerà automaticamente per mostrare il nuovo layout. Ciò rende facile provare diversi design e trovare quello che preferisci.

Per impostazione predefinita, Smash Balloon mostra lo stesso numero di foto sui computer desktop e sui dispositivi mobili. Puoi visualizzare in anteprima come apparirà il feed di Instagram su computer desktop, tablet e smartphone utilizzando la riga di pulsanti nell'angolo in alto a destra.

Smartphone e tablet hanno in genere schermi più piccoli e meno potenza di elaborazione, quindi potresti voler mostrare meno foto e video di Instagram sui dispositivi mobili.

Per fare ciò, digita semplicemente un numero diverso nel campo 'Mobile' sotto 'Numero di post'.

Per impostazione predefinita, Smash Ballon dividerà le tue foto in 4 colonne su desktop, 2 colonne sui tablet e una singola colonna sui dispositivi mobili.

Vuoi utilizzare un numero diverso di colonne? Scorri quindi fino alla sezione 'Colonne' nel menu a sinistra.

Ora puoi digitare un nuovo numero nei campi Desktop, Tablet o Mobile.

Per assicurarti che il tuo feed di Instagram abbia un bell'aspetto sui dispositivi mobili, è consigliabile visualizzare la versione mobile del tuo sito web WordPress.

Dopo aver apportato le modifiche, fai clic sul link ‘Personalizza’. Questo ti riporterà all'editor principale di Smash Balloon, pronto per esplorare la schermata delle impostazioni successive, che è ‘Schema colori’.

Per impostazione predefinita, Smash Balloon utilizza uno schema colori ereditato dal tuo tema WordPress, ma dispone anche di temi ‘Chiaro’ e ‘Scuro’ che potresti voler utilizzare per il tuo feed di Instagram.

Puoi persino creare il tuo schema colori selezionando ‘Personalizzato’ e quindi utilizzando le impostazioni per modificare il colore dei link, il colore di sfondo, il colore del testo e altro ancora.

Per impostazione predefinita, Smash Balloon aggiunge un'intestazione al feed di Instagram, che è la tua immagine del profilo e il nome della tua pagina. Questo può fornire un utile contesto aggiuntivo in modo che i visitatori comprendano da dove provengono queste immagini.

Per modificare l'aspetto di questa sezione, torna alla schermata delle impostazioni principali e quindi seleziona ‘Intestazione’.

In questa schermata, puoi modificare il colore di sfondo, mostrare la tua biografia di Instagram, modificare le dimensioni dell'intestazione e altro ancora.

Per impostazione predefinita, l'intestazione include la tua immagine del profilo di Instagram. Tuttavia, potresti voler mostrare un'immagine diversa, come il logo personalizzato del tuo sito.

Per modificare l'immagine del profilo, fai clic su ‘Aggiungi immagine’ sotto ‘Mostra avatar personalizzato’. Puoi quindi scegliere un'immagine dalla libreria multimediale di WordPress o caricare una nuova foto.

Puoi anche aggiungere una biografia diversa. Ad esempio, potresti aggiungere una call to action che incoraggi le persone a visitare la tua pagina Instagram.

Per creare una biografia unica di Instagram, digita semplicemente nella casella ‘Aggiungi biografia personalizzata’.

Quando sei soddisfatto dell'aspetto dell'intestazione, fai clic sul link 'Personalizza' per tornare alla schermata delle impostazioni principali.

Ora devi fare clic su 'Post'.

Per iniziare, puoi passare da layout a scatola a layout normali per i singoli post all'interno del feed di Instagram.

Per fare ciò, seleziona 'Stile post'.

Ora puoi fare clic per selezionare il layout che desideri utilizzare.

Se selezioni 'A scatola', puoi cambiare il colore di sfondo, aggiungere un'ombra a scatola e aumentare il raggio del bordo per creare angoli arrotondati.

Quando sei soddisfatto delle modifiche, fai semplicemente clic sul link 'Post' per tornare alla schermata precedente di Smash Balloon.

Questa volta, seleziona 'Immagini e video'.

Smash Balloon analizza automaticamente le tue foto di Instagram e le mostra alla migliore risoluzione. Si consiglia di utilizzare queste impostazioni predefinite, poiché sono progettate per migliorare la velocità e le prestazioni del tuo WordPress. Tuttavia, puoi rendere le immagini di Instagram più grandi o più piccole se necessario.

Per modificare le dimensioni dell'immagine, apri semplicemente il menu a discesa 'Risoluzione' e scegli una delle dimensioni predefinite delle immagini di WordPress dall'elenco.

Ancora una volta, fai clic sul link 'Post' per tornare alla schermata precedente.

Questa volta, seleziona 'Didascalia'. Nella schermata successiva, puoi mostrare la didascalia di Instagram accanto a ogni immagine facendo clic sul cursore 'Abilita'.

Questo aprirà nuove opzioni di personalizzazione da cui puoi cambiare la dimensione e il colore del testo e impostare una lunghezza massima del testo.

Fatto ciò, fai semplicemente clic sul collegamento 'Post' per tornare alla schermata precedente.

L'impostazione successiva è 'Riepilogo Mi piace e commenti'.

Qui, puoi aggiungere o nascondere il numero totale di mi piace e commenti su ogni immagine. Se i tuoi post di Instagram ottengono un buon livello di coinvolgimento, questi numeri possono incoraggiare le persone a visitare la tua pagina Instagram o a seguirti sui social media.

Come sempre, devi fare clic su 'Post' per tornare alla schermata precedente.

L'opzione finale è 'Stato al passaggio del mouse', che è l'overlay che Smash Balloon aggiunge a un post quando ci passi sopra il mouse.

Qui, puoi scegliere le informazioni che Smash Balloon mostra quando qualcuno passa il mouse sopra un post utilizzando le impostazioni sotto 'Informazioni da visualizzare'.

Puoi anche cambiare il colore dell'overlay al passaggio del mouse.

Quando sei soddisfatto delle modifiche apportate, fai clic sul link ‘Personalizza’.

Questo ti riporta alla pagina principale delle impostazioni di Smash Balloon, dove puoi fare clic sulla scheda ‘Load More Button’.

Qui, puoi far risaltare il pulsante ‘Carica altro’ cambiando il suo colore di sfondo, il colore del testo e lo stato al passaggio del mouse.

Puoi anche provare ad aggiungere il tuo messaggio al pulsante digitando nel campo ‘Text’.

Sebbene consigliamo di lasciare questo pulsante abilitato, puoi rimuoverlo. Ad esempio, potresti incoraggiare le persone a visitare il tuo Instagram limitando il numero di foto che possono vedere sul tuo sito.

Per rimuovere il pulsante, disattiva semplicemente il cursore ‘Enable’ in modo che diventi grigio.

Se ai visitatori piace quello che vedono, potrebbero decidere di iscriversi utilizzando il pulsante ‘Segui su Instagram’ che appare sotto il feed incorporato.

Dato che è un pulsante così importante, potresti voler aggiungere uno stile personalizzato per farlo risaltare. Per fare ciò, seleziona ‘Customize’ per tornare alla schermata principale delle impostazioni. Quindi, seleziona ‘Follow Button’ nel menu a sinistra.

Qui puoi cambiare il colore di sfondo del pulsante, lo stato al passaggio del mouse e il colore del testo.

Per impostazione predefinita, il pulsante mostra l'etichetta 'Segui su Instagram'.

Puoi sostituirlo con il tuo messaggio digitando nel campo ‘Text’.

Smash Balloon è dotato di una lightbox integrata che consente ai visitatori di aprire le tue foto e i tuoi video di Instagram senza lasciare il tuo sito web.

Per configurare questa funzionalità, torna alla schermata principale delle impostazioni di Smash Balloon e quindi fai clic su ‘Lightbox’.

Qui, puoi cambiare quanti commenti Smash Balloon mostrerà nella lightbox.

Se non vuoi utilizzare la funzionalità lightbox, puoi disabilitarla usando il cursore ‘Enable’.

Quando sei soddisfatto dell'aspetto del feed di Instagram, non dimenticare di fare clic su ‘Save’ per salvare le tue modifiche.

Ora sei pronto per aggiungere il feed di Instagram al tuo sito web WordPress.

Visualizzare un feed delle tue foto di Instagram in WordPress

Puoi aggiungere il feed personalizzato di Instagram al tuo sito web utilizzando un blocco, un widget o uno shortcode.

Se hai creato più di un feed utilizzando Smash Balloon, dovrai conoscere il codice del feed per utilizzare un widget o un blocco.

Per ottenere questo codice, devi andare su Instagram Feed » All Feeds e quindi copiare il testo sotto ‘Shortcode’.

Nell'immagine seguente, dovremo usare instagram-feed feed=4.

Se vuoi incorporare il feed di Instagram in una pagina o in un post, puoi usare il blocco Instagram Feed.

Apri semplicemente la pagina o il post in cui desideri incorporare il tuo feed Instagram personalizzato. Quindi, fai clic sull'icona '+' per aggiungere un nuovo blocco e inizia a digitare 'Instagram Feed'.

Quando appare il blocco corretto, fai clic per aggiungerlo alla pagina o al post.

Il blocco mostrerà un tuo feed Instagram per impostazione predefinita. Se desideri mostrare un feed Smash Balloon diverso, trova 'Impostazioni Shortcode' nel menu a destra.

Qui, aggiungi semplicemente lo shortcode e quindi fai clic su 'Applica modifiche'.

Se sei soddisfatto dell'aspetto del feed Instagram personalizzato, puoi procedere e pubblicare o aggiornare la pagina.

Un'altra opzione è aggiungere il widget Instagram Feed al tuo sito web. Questo è un ottimo modo per mostrare un feed Instagram su ogni pagina del tuo sito. Ad esempio, potresti aggiungere il widget Instagram alla barra laterale o al piè di pagina del tema WordPress.

Per aggiungere il widget Instagram Feed al tuo sito, vai su Aspetto » Widget. Puoi quindi fare clic sull'icona blu '+' nella parte superiore dello schermo.

Nel pannello che appare, digita 'Instagram Feed' per trovare il widget giusto.

Come puoi vedere nell'immagine seguente, ci sono due widget Instagram Feed, quindi assicurati di usare quello giusto.

Successivamente, trascina semplicemente il widget nell'area in cui desideri mostrare il feed Instagram, come la barra laterale o una sezione simile.

Il widget mostrerà automaticamente uno dei feed che hai creato utilizzando Smash Balloon. Se questo non è il feed Instagram personalizzato che hai appena creato, digita il codice del feed nella casella 'Impostazioni Shortcode'.

Dopodiché, fai clic su ‘Apply Changes.’

Ora puoi rendere il widget live facendo clic sul pulsante ‘Update’. Per ulteriori informazioni, consulta la nostra guida passo passo su come aggiungere e utilizzare i widget in WordPress.

Un'altra opzione è incorporare il feed di Instagram in qualsiasi pagina, post o area pronta per i widget utilizzando uno shortcode.

Vai semplicemente su Instagram Feed » Tutti i Feed e copia il codice nella colonna 'Shortcode'. Ora puoi aggiungere questo codice a qualsiasi blocco Shortcode. Per assistenza nel posizionamento dello shortcode, consulta la nostra guida su come aggiungere uno shortcode.

Stai usando un tema abilitato ai blocchi? Allora puoi usare l'editor completo del sito per aggiungere il blocco del feed di Instagram ovunque sul tuo sito web WordPress.

Nella dashboard, vai su Aspetto » Editor.

Per impostazione predefinita, l'editor completo del sito mostrerà il modello della home page del tema.

Se vuoi aggiungere il feed di Instagram a un'area diversa, fai clic su 'Modello' o 'Parti del modello'.

L'editor mostrerà ora un elenco di tutte le parti del modello che compongono il tuo tema WordPress.

Fai semplicemente clic sul modello in cui desideri mostrare il feed di Instagram.

WordPress mostrerà ora un'anteprima del design.

Per modificare questo modello, fai clic sulla piccola icona della matita.

Dopo aver scelto un modello, passa il mouse sull'area in cui desideri aggiungere il feed di foto di Instagram.

Quindi, fai clic sul pulsante blu '+'.

Una volta fatto ciò, è necessario digitare 'Instagram Feed'.

Quando appare il blocco corretto, fai clic per aggiungerlo al modello.

Come sempre, Smash Balloon mostrerà un feed per impostazione predefinita. Puoi cambiare questo feed aggiungendo uno shortcode seguendo lo stesso processo descritto sopra.

Bonus: Lascia che i clienti acquistino i tuoi prodotti tramite Instagram

Se hai un negozio online, puoi anche utilizzare il tuo feed Instagram personalizzato per vendere facilmente i tuoi prodotti.

Smash Balloon Instagram Feed Pro ti consente di taggare le tue immagini di Instagram con link ai prodotti in modo che gli utenti possano cliccarci sopra e acquistarli direttamente invece di navigare attraverso le tue pagine prodotto. Ciò può aumentare le vendite e i profitti nel tuo negozio.

Per maggiori dettagli, puoi consultare la nostra guida completa su come aggiungere immagini Instagram acquistabili in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un feed Instagram personalizzato in WordPress. Potresti anche voler imparare come aggiungere un giveaway di Facebook in WordPress per aumentare l'interazione e la nostra lista di statistiche sui social media per principianti.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.