Come incorporare i feed Responsive X (Twitter) nel tuo sito web
Casa Blog Come incorporare i feed Responsive X (Twitter) nel tuo sito web

Come incorporare i feed Responsive X (Twitter) nel tuo sito web

Come incorporare i feed di Twitter in modo reattivo nel vostro sito web

Vuoi inserire contenuti incorporati di X (Twitter) con layout reattivo per coinvolgere i visitatori del sito web?

Se vuoi coinvolgere tutti coloro che visitano il tuo sito web, una soluzione semplice è quella di incorporare i post responsive di X (Twitter).

Ma inserire da soli i codici di incorporamento responsive di X (Twitter) può risultare complicato, soprattutto se non si ha già familiarità con il codice.

In questo articolo ti guideremo attraverso la procedura per incorporare feed responsive di X (Twitter) nel tuo sito web.

Ma prima di tutto, diamo un’occhiata ai diversi modi per rendere reattivi i tuoi contenuti incorporati da X (Twitter).

Oppure puoi scoprire come incorporare un feed X (Twitter) responsive nel tuo sito.

Come aggiungere elementi incorporati Responsive X (Twitter) al tuo sito

Per incorporare contenuti da X (Twitter) assicurandoti che i post su X siano responsive, hai a disposizione due opzioni:

  • In modo manuale: Generare un codice embed, modificare il codice per renderlo reattivo e aggiungerlo al sito.
  • Modalità automatica: utilizza un plugin per i social media in grado di visualizzare automaticamente i feed di X (Twitter) ottimizzati per i dispositivi mobili.

Se scegli di procedere manualmente, dovrai aprire nel browser il generatore ufficiale di codice di incorporamento di X (Twitter) all’indirizzo publish.twitter.com.

incorporare manualmente i post di Twitter

Una volta generato il codice di incorporamento HTML, aprire nuovamente il sito web e inserire il codice di incorporamento.

Purtroppo, i tuoi post su X potrebbero non essere sempre reattivi se utilizzi la modalità manuale. Per risolvere questo problema, puoi aggiungere questo codice CSS.

.twitter-timeline {
    width: 100vw !important;
}

E se vuoi personalizzare i tuoi post su X (Twitter) utilizzando gli iFrame, dovrai modificare manualmente il codice ancora di più oppure rivolgerti a uno sviluppatore.

Come potete vedere, incorporare contenuti responsive di X (Twitter) può rivelarsi un’operazione lunga e complicata se si utilizza questo metodo. 

Cosa è meglio: gli iFrame o gli elementi incorporati X (Twitter)?

Sebbene alcune persone utilizzino gli iFrame per visualizzare contenuti di X (Twitter), questa pratica può in realtà danneggiare il tuo sito web in molti modi.

Poiché gli iFrame non sono reattivi per impostazione predefinita, è necessario modificare manualmente il codice per renderli compatibili con i dispositivi mobili.

twitter iframe incorporato manualmente

Di conseguenza, gli utenti che navigano da dispositivi mobili potrebbero non riuscire a visualizzare correttamente i tuoi post su X.

Inoltre, i motori di ricerca come Google non possono leggere il contenuto all'interno degli iFrames, il che può essere negativo per la SEO.

La buona notizia è che puoi utilizzare la modalità automatica per incorporare facilmente i post responsive di X (Twitter). Puoi utilizzare un plugin di WordPress in grado di connettersi a X (Twitter) tramite la sua API e di aggregare i post di X sul tuo sito.

Vediamo di seguito questo metodo.

Il modo più semplice per incorporare contenuti responsive di X (Twitter)

Se stai cercando il modo più semplice per incorporare contenuti di X (Twitter), l'opzione migliore è provare un plugin come X (Twitter) Feed Pro.

plugin twitter smash balloon

Con X (Twitter) Feed Pro puoi creare, personalizzare e incorporare facilmente feed X (Twitter) responsive nel tuo sito web, senza bisogno di HTML, JavaScript, CSS personalizzati o altro codice.

Basta seguire una semplice guida in 3 passaggi e avrai un bellissimo feed di X (Twitter) pronto all'uso. Puoi incorporare una timeline di X (Twitter), un hashtag, i risultati di ricerca, la timeline della home page e altro ancora.

timeline di casa per twitter

Poiché X (Twitter) Feed Pro riprende automaticamente il design del tuo sito web, i tuoi contenuti su X (Twitter) rispecchieranno perfettamente l'immagine del tuo marchio fin da subito.

Puoi quindi personalizzare ulteriormente il tuo feed di X (Twitter) scegliendo un modello già pronto che desideri importare.

Per una maggiore personalizzazione, il plugin include un editor visivo che ti permette di impostare il layout, i colori, il numero di post X, lo stile dell'intestazione, i pulsanti "Carica altri" e molto altro ancora.

Inoltre, è possibile monitorare tutte le modifiche apportate utilizzando l'anteprima dal vivo.

editor di feed live per twitter

Il plugin dispone di un sistema di cache intelligente che salva una copia dei tuoi contenuti di X (Twitter). In questo modo, il tuo sito può mostrare ai visitatori la copia salvata, invece di caricare ogni volta i tuoi post su X da zero.

Di conseguenza, il vostro sito può essere caricato molto più velocemente. E con un sito più veloce, si ottiene anche un SEO migliore.

Funzione smart cache smash balloon

Poiché X (Twitter) Feed Pro salva una copia di backup, i tuoi post di X incorporati rimarranno online anche quando X (Twitter) stesso è temporaneamente non disponibile.

Tutto sommato, è il miglior plugin per feed di X (Twitter) disponibile sul mercato e una soluzione fantastica se desideri incorporare contenuti di X (Twitter) in modo responsive.

Sei pronto a incorporare feed responsive di X (Twitter)? Scarica subito la tua copia di X (Twitter) Feed Pro!

Ora vediamo come puoi utilizzare questo plugin per aggiungere al tuo sito contenuti incorporati responsive di X (Twitter).

Come incorporare un feed X (Twitter) responsive nel proprio sito

Per iniziare ad aggiungere contenuti incorporati responsive di X (Twitter), basta seguire le istruzioni dettagliate riportate di seguito:

Passaggio 1: Installare e attivare X (Twitter) Feed Pro

Per iniziare, puoi scaricare la tua copia del plugin X (Twitter) Feed Pro da qui. Una volta ottenuto il plugin, installalo e attivalo sul tuo sito WordPress per proseguire.

Per ulteriori informazioni, potete consultare questa guida di facile consultazione su come installare i plugin di WordPress.

Una volta fatto ciò, puoi passare al passaggio 2 e creare un feed X (Twitter) responsive.

Fase 2: Creare un feed X (Twitter)

Poiché il plugin è dotato di una semplice procedura guidata, è possibile creare un nuovo feed X (Twitter) con pochi semplici clic.

Per prima cosa, apri la tua dashboard di amministrazione e accedi al menu Feed X (Twitter) » Tutti i feed , quindi fai clic sul pulsante Aggiungi nuovo in alto.

aggiungere un nuovo feed twitter personalizzato

Successivamente, il plugin ti chiederà di scegliere il tipo di contenuti incorporati di X (Twitter) che desideri inserire nel tuo sito web. Sono disponibili 6 opzioni tra cui scegliere, e ciascuna mostrerà post di X provenienti da una fonte diversa.

  • Cronologia utente: scegli i profili X (Twitter) di cui desideri incorporare i post su X
  • Hashtag: seleziona hashtag specifici e poi incorpora i post di X che contengono quell’hashtag
  • Feed principale: incorpora X post dal feed principale del tuo account
  • Ricerca: scegli i termini di ricerca e incorpora i risultati di ricerca di X (Twitter) nel tuo sito
  • Menzioni: mostra X post che menzionano l'account X (Twitter) del tuo marchio
  • Elenchi: mostra i contenuti dell'elenco X (Twitter) selezionato

Se desideri combinare diversi tipi di feed in un unico feed (Twitter), puoi anche selezionare più di un'opzione.

Per continuare, seleziona il tipo di feed X (Twitter) che preferisci e poi clicca sul pulsante “Avanti ”.

scegliere hashtag twitter feed

Per il nostro esempio, useremo un feed di hashtag per visualizzare contenuti incorporati responsive di X (Twitter).

Ora che il tuo feed X (Twitter) è stato creato, puoi collegarlo al tuo account X (Twitter) al punto 3.

Passo 3: collegare l'account X (Twitter)

Per visualizzare contenuti incorporati reattivi sul tuo sito, il plugin si collegherà ora al tuo account X (Twitter).

A tale scopo, fare innanzitutto clic sul pulsante Connetti .

collegare l'account twitter a wordpress

Successivamente, X (Twitter) Feed Pro richiederà l’accesso in sola lettura al tuo account. Il plugin potrà quindi utilizzare tale accesso per visualizzare le informazioni di X (Twitter), ma non potrà apportare alcuna modifica al tuo account.

Di conseguenza, il plugin X (Twitter) Feed Pro è assolutamente sicuro.

Per farlo, basta cliccare sul pulsante Autorizza app.

autorizzare l'accesso in sola lettura a twitter.jpg

Una volta fatto ciò, X (Twitter) Feed Pro aprirà il tuo sito web in modo che tu possa aggiungere una fonte per il tuo feed X (Twitter).

Una fonte è il profilo X (Twitter), l'hashtag, il termine di ricerca, la lista e altro ancora che desideri incorporare nel tuo sito.

Per continuare, inserire l'origine nella finestra a comparsa e fare clic su Avanti.

selezionare gli hashtag del proprio feed di Twitter

Per questo feed responsive di X (Twitter), utilizziamo l'hashtag “KEEB_PD” come fonte.

Ora che hai collegato il tuo feed a X (Twitter) e hai aggiunto la tua fonte, è il momento di personalizzarlo.

Passaggio 4: Personalizza i tuoi contenuti incorporati responsive di X (Twitter)

Per aiutarti a configurare rapidamente la visualizzazione dei post X responsive sul tuo sito, puoi importare un modello già pronto.

Ecco i modelli di alimentazione tra cui è possibile scegliere:

  • Predefinito
  • Muratura
  • Carosello semplice
  • Carte semplici
  • Carosello di vetrine
  • Ultimi X post
  • Widget

Fare clic su Avanti una volta scelto il modello di alimentazione che si preferisce.

scegliere un modello di alimentazione

Ora sei pronto per personalizzare il tuo feed di X (Twitter) utilizzando l'editor del feed in tempo reale. Sul lato sinistro troverai le opzioni di personalizzazione per modificare il layout del feed, il design dell'intestazione, l'opzione lightbox, la combinazione di colori e molto altro ancora.

Puoi anche utilizzare le opzioni di moderazione nelle impostazioni del feed per selezionare i post di X che vengono visualizzati sul tuo sito.

Il plugin dispone di una semplice anteprima in tempo reale sulla destra per aiutarvi a tenere traccia delle vostre modifiche.

editor di feed live twitter feed pro anteprima visiva

Per iniziare, puoi modificare il layout dei post X sul tuo sito web.

A tale scopo, cercate l'opzione Layout di alimentazione sulla sinistra e cliccateci sopra.

scegliere l'opzione di layout del feed creare il feed di twitter

Successivamente, X (Twitter) Feed Pro ti mostrerà 3 layout tra cui potrai scegliere: Lista, Carosello e Masonry.

Vediamo di seguito quali sono:

opzioni di layout del feed aggregatore di twitter

Se vuoi visualizzare X post in modo simile a come appaiono sul sito ufficiale di X (Twitter), puoi scegliere il layout a elenco .

Inoltre, in questo modo il tuo feed X (Twitter) sarà ben visibile sulla tua pagina web.

layout di lista twitter feed pro

Se desideri utilizzare delle colonne per visualizzare i contenuti incorporati di X (Twitter), puoi utilizzare il layout "masonry".

Con questo layout puoi visualizzare tantissimi post X contemporaneamente.

layout in muratura feed di twitter

Se scegli l'opzione di layout "carousel" , potrai mostrare i tuoi post su X in una presentazione interattiva di X (Twitter).

I visitatori avranno un altro modo per interagire con il vostro sito.

layout carosello twitter

Dopo aver selezionato un layout di alimentazione, fare clic sul pulsante Salva .

A questo punto, clicca sul pulsante “Personalizza” per continuare a personalizzare l'aspetto del tuo feed X (Twitter).

torna al menu principale editor di feed live

Questa volta puoi scegliere i colori del tuo feed responsive di X (Twitter).

Per prima cosa, fare clic sull'opzione Schema di colore .

scegliere l'opzione di combinazione di colori feed twitter

X (Twitter) Feed Pro offre 4 opzioni di combinazioni di colori che puoi provare:

  • Eredita dal tema: copia i colori del tuo tema WordPress per i tuoi X post
  • Luce: Colore del carattere scuro con sfondo chiaro
  • Scuro: sfondo scuro e font chiaro
  • Personalizzato: Selezionare manualmente tutti i colori

Per continuare, selezionare la combinazione di colori e fare clic su Salva.

opzioni di combinazione di colori per il feed di Twitter

Vuoi personalizzare ancora di più i tuoi contenuti incorporati di X (Twitter)? Puoi utilizzare i pulsanti rimanenti per impostare lo stile dell'intestazione, il design dei pulsanti, il numero di post di X, le dimensioni del feed e molto altro ancora.

Infine, clicca su “Salva” per confermare il nuovo layout del tuo feed X (Twitter).

Al punto 5, potrai finalmente incorporare questo feed X (Twitter) nel tuo sito WordPress utilizzando questo plugin.

Passaggio 5: Aggiungi i codici di incorporamento di Responsive X (Twitter) al tuo sito web

Grazie a X (Twitter) Feed Pro, ci sono 2 modi per incorporare contenuti di X (Twitter) nel tuo sito web:

  • Aggiungere elementi incorporati responsive di X (Twitter) in una pagina web
  • Aggiungi contenuti incorporati responsive di X (Twitter) nella barra laterale o nel piè di pagina del sito web

Aggiungere elementi incorporati Responsive X (Twitter) a una pagina web

Dato che il plugin è così intuitivo, puoi iniziare a incorporare il tuo feed X (Twitter) direttamente dall'editor del feed in tempo reale.

Per prima cosa, fare clic sul pulsante Incorpora nella parte superiore dell'editor.

editor di feed live pulsante di incorporamento twitter

Una volta fatto ciò, il plugin ti mostrerà una finestra pop-up con i diversi modi in cui puoi incorporare i feed di X (Twitter).

Fare clic sul pulsante Aggiungi a una pagina per continuare.

aggiungere a una pagina

Ora è possibile scegliere la pagina di WordPress in cui visualizzare il feed.

Dopo aver selezionato la pagina nel popup, fare clic sul pulsante Aggiungi per procedere.

aggiungere il feed di Twitter a una nuova pagina

Una volta fatto ciò, il plugin aprirà la pagina nell'editor di WordPress in modo da poter incorporare il feed.

Quindi, aggiungere un nuovo blocco di contenuto facendo clic sull'icona più (+).

aggiungere un nuovo blocco wordpress

Utilizzando la barra di ricerca in alto, cerca il blocco “feed di Twitter” e poi clicca sul blocco “Feed (Twitter)” qui sotto.

A questo punto vedrai il tuo contenuto incorporato da X (Twitter) nell’editor di WordPress.

incorporare il feed di twitter nel vostro sito wordpress

Infine, clicca sul pulsante "Aggiorna " e il tuo feed X (Twitter) sarà online.

Se apri la tua pagina web, puoi vedere come appaiono i tuoi contenuti incorporati responsive di X (Twitter).

esempio di feed twitter su sito web

Come puoi vedere, X (Twitter) Feed Pro rende semplicissimo mostrare sul tuo sito web contenuti di X (Twitter) ottimizzati per i dispositivi mobili.

Detto questo, vediamo il prossimo metodo per incorporare i feed di X (Twitter).

Aggiungi elementi incorporati Responsive X (Twitter) nella barra laterale o nel piè di pagina del sito web

Un'altra opzione è quella di utilizzare un widget di X (Twitter) per visualizzare i post di X con layout adattivo nella barra laterale o nel piè di pagina del tuo sito web.

Come per il metodo precedente, anche questa volta è possibile utilizzare l'editor live.

Se desideri riaprire un feed nell'editor dei feed in tempo reale, apri innanzitutto il menu Feed X (Twitter) » Tutti i feed dalla tua dashboard di WordPress.

Una volta fatto ciò, clicca sul feed contrassegnato dalla X (Twitter) che desideri incorporare.

aprire il feed di twitter con hashtag

Come puoi vedere, è semplicissimo riaprire un feed X (Twitter) nell'editor del feed in tempo reale.

Da qui, fare clic sul pulsante Embed in alto per iniziare.

editor di feed live pulsante di incorporamento twitter

Ora puoi utilizzare il popup per creare un nuovo widget X (Twitter) che mostri i post di X in formato responsive.

Quindi, fare clic sul pulsante Aggiungi a un widget nel popup.

aggiungere il feed di Twitter al widget

A questo punto, il plugin aprirà la pagina dei widget del tuo sito, dove potrai aggiungere il widget del tuo feed X (Twitter).

Una volta lì, potrai scegliere dove pubblicare i tuoi post su X.

Se desideri visualizzare contenuti incorporati di X (Twitter) con layout reattivo nella barra laterale, clicca sul pannello "Barra laterale ".

aprire il pannello della barra laterale

Oppure puoi cliccare su “Footer” per iniziare a visualizzare X post nel piè di pagina del tuo sito web.

Per questo esempio, utilizzeremo una barra laterale di WordPress.

aprire il pannello del piè di pagina

Per aggiungere un nuovo widget, fare clic sull'icona più (+) in basso.

Una volta fatto ciò, seleziona il widget " Feed X (Twitter) " tra le opzioni disponibili per continuare.

aggiungere un widget per il feed di Twitter a wordpress

Ora puoi completare l'incorporamento del tuo feed X (Twitter) cliccando sul pulsante "Aggiorna ".

In un batter d'occhio, potrai avere un feed di contenuti X (Twitter) incorporati e adattabili nella barra laterale o nel piè di pagina.

incorporare il feed di twitter nella barra laterale di wordpress

Ed ecco fatto!

Come puoi vedere, aggiungere contenuti incorporati responsive di X (Twitter) al tuo sito può essere semplicissimo grazie a X (Twitter) Feed Pro.

Ora puoi mostrare post pertinenti su X per mantenere vivo l'interesse dei visitatori, aumentare il numero dei tuoi follower su X (Twitter), incrementare le conversioni e molto altro ancora.

Vuoi incorporare feed responsive di X (Twitter)? Clicca qui per scaricare X (Twitter) Feed Pro per il tuo sito!

Già che ci sei, non dimenticare di dare un’occhiata a questa lista dei modi migliori per guadagnare su X (Twitter).

Se hai trovato utile questo articolo, perché non ci segui su Facebook e X (Twitter) per ulteriori consigli e suggerimenti sui social media?

avatar dell'autore
Sajjan Sharma Scrittore senior
Sajjan scrive di WordPress, social media marketing e aziende online da oltre 10 anni. I suoi interessi professionali si estendono all'influencer marketing, alla content curation e alle strategie di marketing digitale.

Aggiungi un commento

Siamo lieti che abbia scelto di lasciare un commento. Tenete presente che tutti i commenti sono moderati in base alla nostra politica sulla privacy e che tutti i link sono nofollow. NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.