Come creare un feed fotografico personalizzato di Instagram in WordPress

Un feed di Instagram può mantenere il vostro sito web fresco e allo stesso tempo farvi ottenere più like, condivisioni e follower di Instagram. Vi aiuta a connettervi con il vostro pubblico su più piattaforme e aumenta l’engagement.

I media hanno contribuito in modo determinante a portare traffico al nostro sito web e ad ampliare il nostro pubblico. Condividendo contenuti coinvolgenti e interagendo con i nostri follower, siamo riusciti ad aumentare la notorietà del brand e ad attirare nuovi visitatori.

In questo articolo vi mostreremo come creare facilmente un feed fotografico Instagram personalizzato per il vostro sito web WordPress.

Perché includere un feed di Instagram nel vostro sito WordPress?

Incorporare un feed di Instagram nel vostro sito WordPress vi permette di mostrare contenuti freschi ai vostri visitatori senza dover fare molto lavoro extra. Inoltre, incoraggia i lettori a seguirvi su Instagram.

Invece di aggiungere manualmente le immagini nell’editor di blocchi di WordPress, potete semplicemente creare un feed che si aggiorna automaticamente ogni volta che pubblicate nuove foto su Instagram. Potete anche mostrare le foto di altre persone sul vostro sito creando un feed di hashtag.

Nell’immagine seguente si può vedere un esempio di un marchio che utilizza un feed Instagram personalizzato per mostrare i contenuti generati dagli utenti.

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

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

Come creare un feed fotografico personalizzato di Instagram in WordPress

Il modo più semplice per aggiungere un feed fotografico di Instagram al vostro sito è utilizzare il plugin Smash Balloon Instagram Feed. Si tratta del miglior plugin Instagram per WordPress che consente di visualizzare in un attimo i contenuti del vostro account Instagram.

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

Nel corso dell’esercitazione verranno descritte diverse fasi e si possono utilizzare i collegamenti rapidi qui sotto per passare alle diverse sezioni:

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Come collegare un account Instagram a WordPress

Per prima cosa, è necessario installare e attivare il plugin Smash Balloon Instagram Feed. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, andare alla pagina “Impostazioni ” del feed di Instagram dalla dashboard di WordPress.

Quindi, inserire la chiave di licenza di Smash Balloon nel campo “Chiave di licenza”.

Queste informazioni sono contenute nell’e-mail di conferma dell’acquisto di Smash Balloon e nel proprio account Smash Balloon.

Una volta fatto ciò, fate clic sul pulsante “Attiva”.

Ora siete pronti a creare un feed Instagram personalizzato. Per iniziare, selezionate Instagram Feed ” Tutti i feed e poi fate clic sul pulsante “Aggiungi nuovo”.

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

È sufficiente selezionare il tipo di feed che si desidera aggiungere a WordPress e fare clic su “Avanti”.

Se volete solo visualizzare le vostre foto su Instagram, potete utilizzare un account Instagram personale. Tuttavia, è necessario un account Business Instagram se si desidera creare un feed di hashtag o mostrare i post in cui il proprio account è taggato.

Se si seleziona “Pubblica Hashtag”, è necessario digitare gli hashtag che si desidera utilizzare. Per mostrare più hashtag nello stesso feed, è sufficiente separare ogni hashtag con una virgola.

Una volta fatto ciò, fate clic su “Avanti”.

Volete mostrare i post in cui il vostro account è taggato? Dovrete invece selezionare “Post taggati” e poi cliccare su “Avanti”.

Indipendentemente dal tipo di feed che state creando, dovrete collegare WordPress al vostro account Instagram.

Per iniziare, fare clic sul pulsante “Aggiungi sorgente”.

Successivamente, scegliere se si desidera mostrare le immagini di un account personale o aziendale.

Se si seleziona il pulsante accanto a “Personale”, Smash Balloon non includerà l’avatar e la biografia di Instagram nell’intestazione per impostazione predefinita. Tuttavia, è sempre possibile aggiungere manualmente l’avatar e la biografia di Instagram nelle impostazioni del plugin.

Dopo aver scelto tra un account Business e uno Personale, basta cliccare su “Accedi con Facebook”.

A questo punto è possibile selezionare l’account Instagram che si desidera caratterizzare sul proprio sito web WordPress e fare clic su “Avanti”.

Successivamente, selezionate la casella accanto alla pagina Facebook collegata all’account Instagram che volete utilizzare.

Fatto ciò, è necessario fare clic sul pulsante “Avanti”.

A questo punto verrà visualizzato un popup con tutte le informazioni a cui Instagram Feed Pro avrà accesso e le azioni che può eseguire.

Per limitare l’accesso del plugin al vostro account Instagram, è sufficiente fare clic su uno qualsiasi degli interruttori per passare da “Sì” a “No”. Tenete presente che questo potrebbe influire sulle foto che appaiono sul vostro blog o sito web WordPress.

Per questo motivo, si consiglia di lasciare tutti gli interruttori abilitati. Quando si è soddisfatti dell’impostazione del feed, fare clic su “Fatto”.

A questo punto verrà visualizzato un popup con l’account Instagram appena aggiunto al sito web.

È sufficiente selezionare la casella accanto all’account e cliccare su “Aggiungi”.

Instagram Feed Pro vi riporterà alla schermata Instagram Feeds ” All Feeds.

Per creare un feed Instagram personalizzato, basta selezionare la casella accanto all’account Instagram che si desidera utilizzare. Quindi, fare clic su “Avanti”.

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

Come personalizzare il feed di foto di Instagram

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

A destra, viene visualizzata un’anteprima del feed fotografico di Instagram. Sul lato sinistro si trovano tutte le impostazioni che si possono utilizzare per personalizzare il feed del social media.

La maggior parte di queste impostazioni si spiegano da sole, ma ne illustreremo rapidamente alcune aree chiave.

Per modificare il layout, basta fare clic su “Layout del feed” nel menu di sinistra. È ora possibile scegliere tra un layout a griglia, masonry o carosello.

È disponibile anche un layout Evidenziato che evidenzia ogni tre foto per impostazione predefinita.

Facendo clic sulle diverse opzioni, l’anteprima live si aggiorna automaticamente per mostrare il nuovo layout. In questo modo è facile provare diversi design e trovare quello che si preferisce.

Per impostazione predefinita, Smash Balloon mostra lo stesso numero di foto su computer desktop e dispositivi mobili. È possibile visualizzare in anteprima l’aspetto del feed di Instagram su computer desktop, tablet e smartphone utilizzando la fila di pulsanti nell’angolo in alto a destra.

Gli smartphone e i tablet hanno in genere schermi più piccoli e una minore potenza di elaborazione, quindi è consigliabile mostrare meno foto e video di Instagram sui dispositivi mobili.

Per farlo, basta digitare un numero diverso nel campo “Mobile” sotto “Numero di messaggi”.

Per impostazione predefinita, Smash Ballon divide le foto in 4 colonne su desktop, 2 colonne su tablet e una sola colonna su mobile.

Volete utilizzare un numero diverso di colonne? Allora basta scorrere la sezione “Colonne” nel menu di sinistra.

È ora possibile digitare un nuovo numero nei campi Desktop, Tablet o Mobile.

Per assicurarsi che il vostro feed di Instagram appaia bene sui dispositivi mobili, è opportuno visualizzare la versione mobile del vostro sito web WordPress.

Dopo aver apportato le modifiche, fare clic sul link “Personalizza”. Questo vi riporterà all’editor principale di Smash Balloon, pronto per esplorare la schermata di impostazioni successiva, ovvero “Schema di colore”.

Per impostazione predefinita, Smash Balloon utilizza uno schema di colori ereditato dal tema di WordPress, ma dispone anche di temi “Light” e “Dark” che si possono utilizzare per il feed di Instagram.

È anche possibile creare uno schema di colori personalizzato selezionando “Personalizza” e 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 consiste nell’immagine del profilo e nel nome della pagina. Questo può fornire un utile contesto aggiuntivo, in modo che i visitatori capiscano da dove provengono le immagini.

Per modificare l’aspetto di questa sezione, tornare alla schermata delle impostazioni principali e selezionare “Intestazione”.

In questa schermata è possibile modificare il colore dello sfondo, mostrare la biografia di Instagram, cambiare le dimensioni dell’intestazione e altro ancora.

Per impostazione predefinita, l’intestazione include l’immagine del profilo Instagram. Tuttavia, è possibile che si voglia mostrare un’immagine diversa, come il logo personalizzato del sito.

Per modificare l’immagine del profilo, fare clic su “Aggiungi immagine” sotto “Mostra avatar personalizzato”. È possibile scegliere un’immagine dalla libreria multimediale di WordPress o caricare una nuova foto.

Potete anche aggiungere una biografia diversa. Ad esempio, potreste aggiungere un invito all’azione che incoraggi le persone a visitare la vostra pagina Instagram.

Per creare una biografia Instagram unica, è sufficiente digitare nella casella “Aggiungi bio personalizzata”.

Quando si è soddisfatti dell’aspetto dell’intestazione, fare clic sul link “Personalizza” per tornare alla schermata principale delle impostazioni.

Ora è necessario fare clic su “Messaggi”.

Per iniziare, è possibile passare dal layout a riquadri a quello regolare per i singoli post all’interno del feed di Instagram.

A tal fine, selezionare “Stile post”.

È ora possibile fare clic per selezionare il layout che si desidera utilizzare.

Se si seleziona ‘Riquadro’, è possibile modificare il colore dello sfondo, aggiungere un’ombra e aumentare il raggio del bordo per creare angoli curvi.

Quando si è soddisfatti delle modifiche, è sufficiente fare clic sul link “Messaggi” per tornare alla schermata precedente di Smash Balloon.

Questa volta, selezionare “Immagini e video”.

Smash Balloon analizza automaticamente le foto di Instagram e le mostra alla risoluzione migliore. Si consiglia di utilizzare queste impostazioni predefinite, in quanto sono progettate per aumentare la velocità e le prestazioni di WordPress. Tuttavia, se necessario, è possibile ingrandire o rimpicciolire le immagini di Instagram.

Per modificare le dimensioni dell’immagine, basta aprire il menu a tendina “Risoluzione” e scegliere una delle dimensioni predefinite delle immagini di WordPress dall’elenco.

Cliccare nuovamente sul link “Messaggi” per tornare alla schermata precedente.

Questa volta, selezionare “Didascalia”. Nella schermata successiva, è possibile mostrare la didascalia di Instagram accanto a ciascuna immagine facendo clic sul cursore “Abilita”.

In questo modo si apriranno nuove opzioni di personalizzazione in cui è possibile modificare la dimensione e il colore del testo e impostare la lunghezza massima del testo.

A questo punto, basta cliccare sul link “Messaggi” per tornare alla schermata precedente.

L’impostazione successiva è “Riepilogo Mi Piace e Commenti”.

Qui è possibile aggiungere o nascondere il numero totale di “Mi piace” e di commenti su ogni immagine. Se i vostri post su Instagram ottengono un buon livello di coinvolgimento, questi numeri possono incoraggiare le persone a visitare la vostra pagina Instagram o a seguirvi sui social media.

Come sempre, è necessario cliccare su “Messaggi” per tornare alla schermata precedente.

L’ultima opzione è “Hover State”, ovvero la sovrapposizione che Smash Balloon aggiunge a un post quando ci si passa sopra con il mouse.

Qui si possono scegliere le informazioni che Smash Balloon mostra quando si passa il mouse su un post, utilizzando le impostazioni alla voce “Informazioni da visualizzare”.

È inoltre possibile modificare il colore della sovrapposizione di hover.

Quando si è soddisfatti delle modifiche apportate, fare clic sul link “Personalizza”.

In questo modo si torna alla pagina principale delle impostazioni di Smash Balloon, dove si può fare clic sulla scheda “Carica altro pulsante”.

Qui è possibile far risaltare il pulsante “Carica altro” modificandone il colore di sfondo, il colore del testo e lo stato di passaggio.

Si può anche provare ad aggiungere il proprio messaggio al pulsante digitando nel campo “Testo”.

Si consiglia di lasciare questo pulsante abilitato, ma è possibile rimuoverlo. Ad esempio, potreste incoraggiare le persone a visitare il vostro Instagram limitando il numero di foto che possono vedere sul vostro sito.

Per rimuovere il pulsante, è sufficiente disattivare il cursore “Abilita” in modo che diventi grigio.

Se ai visitatori piace ciò che vedono, possono decidere di iscriversi utilizzando il pulsante “Segui su Instagram” che appare sotto il feed incorporato.

Poiché si tratta di un pulsante così importante, si potrebbe aggiungere uno stile personalizzato per farlo risaltare. Per farlo, selezionare “Personalizza” per tornare alla schermata principale delle impostazioni. Quindi, selezionare “Pulsante segui” nel menu di sinistra.

Qui è possibile modificare il colore di sfondo del pulsante, lo stato di passaggio e il colore del testo.

Per impostazione predefinita, il pulsante mostra l’etichetta “Segui su Instagram”.

È possibile sostituirlo con un proprio messaggio digitando nel campo “Testo”.

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

Per configurare questa funzione, tornare alla schermata principale delle impostazioni di Smash Balloon e fare clic su “Lightbox”.

Qui è possibile modificare il numero di commenti che Smash Balloon mostrerà nella lightbox.

Se non si desidera utilizzare la funzione lightbox, è possibile disattivarla utilizzando il cursore “Abilita”.

Quando siete soddisfatti dell’aspetto del feed di Instagram, non dimenticate di fare clic su “Salva” per memorizzare le modifiche.

Ora siete pronti ad aggiungere il feed di Instagram al vostro sito web WordPress.

Mostrare un feed di foto di Instagram in WordPress

È possibile aggiungere il feed Instagram personalizzato al proprio sito web utilizzando un blocco, un widget o uno shortcode.

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

Per ottenere questo codice, dovete andare su Instagram Feed ” All Feeds e poi copiare il testo sotto ‘Shortcode’.

Nell’immagine che segue, dovremo usare instagram-feed feed=4.

Se si desidera incorporare il feed di Instagram in una pagina o in un post, è possibile utilizzare il blocco Feed di Instagram.

Basta aprire la pagina o il post in cui si desidera incorporare il feed Instagram personalizzato. Quindi, fare clic sull’icona ‘+’ per aggiungere un nuovo blocco e iniziare a digitare ‘Instagram Feed’.

Quando appare il blocco giusto, fare clic per aggiungerlo alla pagina o al post.

Il blocco mostrerà uno dei vostri feed di Instagram per impostazione predefinita. Se volete mostrare un feed diverso da quello di Smash Balloon, trovate “Shortcode Settings” nel menu di destra.

Qui è sufficiente aggiungere lo shortcode e poi cliccare su “Applica modifiche”.

Se si è soddisfatti dell’aspetto del feed Instagram personalizzato, si può procedere alla pubblicazione o all’aggiornamento della pagina.

Un’altra opzione è quella di aggiungere il widget Instagram Feed al vostro sito web. Questo è un ottimo modo per mostrare un feed di Instagram su ogni pagina del vostro sito. Ad esempio, si può aggiungere il widget Instagram alla barra laterale o al piè di pagina del tema WordPress.

Per aggiungere il widget Instagram Feed al vostro sito, andate su Aspetto ” Widget. Cliccate sull’icona blu “+” nella parte superiore dello schermo.

Nel pannello che appare, digitate “Instagram Feed” per trovare il widget giusto.

Come si può vedere nell’immagine seguente, ci sono due widget Instagram Feed, quindi assicuratevi di utilizzare quello giusto.

Quindi, è sufficiente trascinare il widget nell’area in cui si desidera visualizzare il feed di Instagram, ad esempio nella barra laterale o in una sezione simile.

Il widget mostrerà automaticamente uno dei feed creati con Smash Balloon. Se non si tratta del feed Instagram personalizzato appena creato, digitare il codice del feed nella casella “Impostazioni shortcode”.

Quindi, fare clic su “Applica modifiche”.

Ora è possibile rendere attivo il widget facendo clic sul pulsante “Aggiorna”. Per ulteriori informazioni, consultate la nostra guida passo-passo su come aggiungere e utilizzare i widget in WordPress.

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

Basta andare su Instagram Feed ” All Feeds e copiare il codice nella colonna ‘Shortcode’. Ora è possibile aggiungere questo codice a qualsiasi blocco Shortcode. Per un aiuto nel posizionamento dello shortcode, consultate la nostra guida su come aggiungere uno shortcode.

Utilizzate un tema abilitato ai blocchi? Allora potete utilizzare l’editor completo del sito per aggiungere il blocco Instagram Feed in qualsiasi punto del vostro sito WordPress.

Nella dashboard, andare su Aspetto ” Editor.

Per impostazione predefinita, l’editor del sito completo mostra il modello della home del tema.

Se si desidera aggiungere il feed di Instagram a un’area diversa, fare clic su “Modello” o “Parti del modello”.

L’editor mostrerà ora un elenco di tutte le parti del template che compongono il tema WordPress.

È sufficiente fare clic sul modello in cui si desidera mostrare il feed di Instagram.

WordPress mostrerà ora un’anteprima del progetto.

Per modificare questo modello, fare clic sull’icona della matita.

Dopo aver scelto un modello, basta passare il mouse sull’area in cui si desidera aggiungere il feed fotografico di Instagram.

Quindi, fare clic sul pulsante blu “+”.

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

Quando appare il blocco giusto, fare clic per aggiungerlo al modello.

Come sempre, Smash Balloon mostra un feed per impostazione predefinita. È possibile modificare questo feed aggiungendo uno shortcode seguendo la stessa procedura descritta sopra.

Bonus: consentire ai clienti di acquistare i vostri prodotti tramite Instagram

Se avete un negozio online, potete anche utilizzare il vostro feed Instagram personalizzato per vendere facilmente i vostri prodotti.

Smash Balloon Instagram Feed Pro consente di taggare le immagini di Instagram con link ai prodotti, in modo che gli utenti possano cliccarci sopra e acquistarli direttamente, invece di navigare attraverso le pagine dei prodotti. Questo può aumentare le vendite e i profitti del vostro negozio.

Per maggiori dettagli, potete consultare la nostra guida completa su come aggiungere immagini shoppable di Instagram in WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come creare un feed Instagram personalizzato in WordPress. Potreste anche voler imparare come aggiungere un giveaway su Facebook in WordPress per aumentare l’engagement e il nostro elenco di statistiche sui media per i principianti.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.