Come incorporare i widget responsive di X (Twitter) nel tuo sito web

Hai incollato il codice di incorporamento di Twitter sul tuo sito. Sul computer funziona alla grande. Poi dai un’occhiata sul cellulare.

Ora è un disastro. Il feed trabocca dallo schermo oppure rimane confinato in un riquadro stretto di 500px con spazio vuoto tutt’intorno. Quindi provi una soluzione veloce con i CSS. Funziona per un giorno, poi smette di funzionare di nuovo.

Se la situazione ti suona familiare, non sei il solo. È uno dei problemi più comuni legati agli elementi incorporati di Twitter (ora X), e la maggior parte delle “soluzioni” che si trovano online sono espedienti precari risalenti al 2012 che hanno smesso di funzionare anni fa.

Ho setacciato i forum degli sviluppatori, ho provato le soluzioni alternative basate sui CSS e ho capito perché continuano a non funzionare. A quanto pare, è proprio il codice JavaScript di Twitter a ostacolarti. Esiste però un modo molto più semplice che ti permette di evitare tutta questa seccatura.

Ecco quindi due modi per rendere responsive un feed di Twitter. Innanzitutto, il metodo manuale con i CSS. Poi il metodo tramite plugin, che è responsive fin da subito, non richiede alcun codice e non smetterà di funzionare al prossimo aggiornamento di X.

In questo articolo:

• Risposta rapida: Come incorporare un feed Twitter responsive
  • Perché le modifiche alla larghezza nel CSS non vengono salvate?
• Il modo più veloce per rendere reattivi gli elementi incorporati di X (Twitter)
• Come incorporare i widget responsive di X (Twitter) nel tuo sito (metodo semplice)
  • Passo 1: installare il plugin Twitter Feed Pro
  • Fase 2: Creare un nuovo widget
  • Passo 3: collegare l'account X (Twitter)
  • Passaggio 4: Personalizza i tuoi contenuti incorporati di X (Twitter)
  • Passaggio 5: Aggiungere i codici di incorporamento di Responsive X (Twitter) a WordPress
  • Aggiungi contenuti incorporati da X/Twitter alla tua pagina web
  • Aggiungi i contenuti incorporati di X/Twitter nella barra laterale o nel piè di pagina del tuo sito web

Risposta rapida: Come incorporare un feed Twitter responsive

Hai poco tempo? Ecco la risposta prima del tutorial completo.

Esistono due modi per rendere reattivo un elemento incorporato di Twitter. Il primo è manuale. Si inserisce l’iframe di Twitter all’interno di un contenitore, costringendolo a width: 100%, e contrastare i suoi stili inline con i CSS e le media query.

Funziona, ma richiede molto tempo per l'implementazione e la manutenzione. Inoltre, tende a smettere di funzionare quando X aggiorna il proprio codice di incorporamento.

Il secondo metodo consiste nell'utilizzare un plugin. Questo plugin visualizza il feed utilizzando il codice del tuo tema, quindi è responsive di default. Niente codice, niente media query, niente conflitti di sovrascrittura.

Per chi non sa programmare, il plugin è la soluzione migliore. La mia scelta ricade su Twitter Feed Pro, che evita di dover ricorrere alla programmazione e rende i tuoi contenuti incorporati responsive fin da subito.

Entrambi gli approcci ti consentono, alla fine, di ottenere un feed reattivo, ma la differenza sta nel tempo che ci metti e nella quantità di manutenzione che dovrai gestire.

Ecco un confronto tra i due.

	CSS manuale	Twitter Feed Pro
È necessario scrivere del codice	Sì	Nessuno
Resiste agli aggiornamenti X	No	Sì
È ora di prepararsi	30+ minuti	Circa 5 minuti

Perché le modifiche alla larghezza nel CSS non vengono salvate?

Imposta la larghezza al 100%, salva e ricarica la pagina. Non cambia nulla. Allora, cosa continua a sovrascrivere le tue impostazioni?

Il JavaScript di Twitter. Riapplica gli stili inline dopo il caricamento della pagina, quindi il tuo CSS viene azzerato ogni volta.

Ecco il punto che spesso crea confusione. L'embed non è realmente tuo. Si tratta di un iframe, una piccola finestra sui server di Twitter, e tu non hai alcun controllo su ciò che contiene.

Il modo più veloce per rendere reattivi gli elementi incorporati di X (Twitter)

Se stai cercando la soluzione migliore, puoi utilizzare il plugin Twitter Feed Pro ed evitare tutti questi problemi.

Grazie al plugin n. 1 per WordPress dedicato ai feed di Twitter, potrai creare, personalizzare e incorporare contenuti di X/Twitter con pochi semplici clic.

Tutti i tuoi contenuti incorporati saranno automaticamente responsive, quindi verranno visualizzati correttamente sia che l'utente navighi da smartphone, tablet o computer.

A differenza del metodo manuale, Twitter Feed Pro non inserisce nemmeno un iFrame. Recupera i tuoi post e li incorpora correttamente nel tuo sito web.

Ecco come cambia la situazione:

• È fluido per impostazione predefinita. Il feed viene generato dal codice del tema, quindi si adatta al layout invece di rimanere confinato in un riquadro fisso di 500px.
• Non c'è alcun conflitto di sovrascrittura. L'assenza di iframe significa che il codice JavaScript di Twitter non può intervenire per reimpostare i tuoi stili.
• Non c'è alcun problema di altezza. Non essendoci alcun iframe di cui indovinare le dimensioni, il feed ha sempre e solo l'altezza del proprio contenuto.

Inoltre, avrai il controllo totale sul design dei tuoi contenuti incorporati da X/Twitter. Puoi persino scegliere di importare un modello già pronto per personalizzarlo in modo facile e veloce.

Grazie all'editor per i feed in tempo reale, potrai personalizzare nei minimi dettagli i tuoi contenuti incorporati, senza bisogno di HTML, CSS personalizzati o alcun tipo di codice.

Inoltre, sei in ottima compagnia. I plugin di Smash Balloon sono utilizzati da oltre 1,75 milioni di siti web attivi e vantano una valutazione di 4,9 su 5 stelle.

Sei pronto a incorporare contenuti responsive di X (Twitter)? Scarica qui la tua copia di Twitter Feed Pro.

Detto questo, vediamo qual è il modo più semplice per rendere i widget di X (Twitter) responsive con questo plugin.

Come incorporare i widget responsive di X (Twitter) nel tuo sito (metodo semplice)

Seguendo le istruzioni passo passo riportate di seguito, potrai inserire nel tuo sito web una serie di contenuti incorporati ottimizzati per i dispositivi mobili.

Iniziamo!

Passo 1: installare il plugin Twitter Feed Pro

Per iniziare, potete acquistare la vostra copia di Twitter Feed Pro qui. Una volta ottenuto il file del plugin, installatelo e attivatelo sul vostro computer.

Se volete un rapido ripasso su come farlo, abbiamo un tutorial per principianti su come installare un plugin di WordPress.

Fase 2: Creare un nuovo widget

Dato che il plugin prevede una procedura guidata in tre passaggi, ti risulterà semplicissimo creare un nuovo widget per visualizzare contenuti incorporati responsive.

Per prima cosa, aprite il menu Twitter Feed " Tutti i feed dalla vostra dashboard di amministrazione e fate clic sul pulsante Aggiungi nuovo.

Successivamente, puoi scegliere il tipo di widget di Twitter che desideri incorporare. Qui puoi scegliere tra 4 diverse opzioni:

• Timeline utente: Selezionare un account Twitter e incorporare i tweet in esso.
• Hashtag: Visualizza gli embed di Twitter con gli hashtag scelti.
• Ricerca: Scegliere un termine di ricerca e incorporare i tweet corrispondenti.
• Elenchi: Selezionare un elenco di Twitter e incorporare tutti i tweet da esso provenienti

Una volta selezionato il tipo di widget desiderato, fare clic sul pulsante Avanti.

Per il nostro esempio, selezioneremo un tipo di widget hashtag .

Passo 3: collegare l'account X (Twitter)

Una volta collegato il tuo account X, il tuo widget potrà iniziare a visualizzare contenuti incorporati reattivi sul tuo sito.

Pronti per iniziare? Per prima cosa, fate clic sul pulsante Connetti nel popup.

In questo modo verrai reindirizzato dal tuo sito web all'indirizzo www.x.com nel tuo browser. Da qui potrai concedere al plugin l'accesso in sola lettura al tuo account.

Poiché Smash Balloon è assolutamente sicuro, Twitter Feed Pro può visualizzare le tue informazioni ma non avrà l'autorizzazione ad apportare alcuna modifica con questo accesso.

Per continuare, fare clic sul pulsante Autorizza app qui.

Facendo clic su questo punto si viene rimandati nuovamente al sito web di WordPress.

Qui puoi selezionare la fonte dei tuoi contenuti incorporati. A seconda del tipo di widget, può trattarsi di un nome utente su X (Twitter), di un hashtag, di un termine di ricerca e altro ancora.

Per ora, inseriamo l'hashtag "KEEB_PD" nel popup e visualizziamo tutti i tweet con quell'hashtag.

Per continuare, è possibile inserire la fonte e fare clic su Avanti.

A questo punto, hai aggiunto una nuova fonte per il tuo widget. In futuro, potrai riutilizzare questa fonte con un solo clic ogni volta che creerai nuovi widget X (Twitter).

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

Il bello di Twitter Feed Pro è che il plugin rende automaticamente i contenuti incorporati responsive e riproduce il design del tuo sito web.

Inoltre, avete a disposizione una raccolta di modelli precostituiti che potete importare per il vostro widget:

• Predefinito
• Schede di muratura
• Carosello semplice
• Carte semplici
• Carosello di vetrine
• Ultimi tweet
• Widget

Tutto ciò che si deve fare è selezionare il modello che si desidera utilizzare e poi fare clic su Avanti.

Una volta importato un modello, Twitter Feed Pro aprirà l'editor del feed in tempo reale, dove potrai personalizzare nei minimi dettagli i tuoi contenuti incorporati ottimizzati per i dispositivi mobili.

A sinistra, è possibile modificare il layout del feed, la combinazione di colori, l'intestazione, il pulsante "Carica altro" e molto altro.

Inoltre, è possibile monitorare tutte le modifiche in tempo reale utilizzando l'anteprima del live feed sulla destra. La personalizzazione è quindi facile da usare, rapida e accurata.

Per iniziare a progettare i tuoi contenuti incorporati, clicca innanzitutto sull'opzione " Layout feed " a sinistra.

Successivamente, potete scegliere il layout dei tweet che appaiono sul vostro sito web. Infatti, è possibile scegliere tra 3 diversi layout:

• Elenco
• Muratura
• Carosello

Vediamo di seguito in dettaglio questi layout.

Se vuoi che i contenuti incorporati da X (Twitter) siano facilmente visibili sul tuo sito web, puoi utilizzare il layout a elenco .

Questo layout mostrerà i tweet in un unico widget. È un'ottima opzione anche per l'incorporamento di video.

Poi, c'è il layout masonry che può visualizzare i tweet incorporati in molte colonne.

Di conseguenza, potete coinvolgere i visitatori del vostro sito web mostrando tonnellate di tweet diversi in una sola volta.

Volete rendere il vostro sito web più interattivo?

Basta selezionare il layout a carosello per visualizzare una presentazione a carosello con i tuoi contenuti incorporati da X (Twitter).

Dopo aver selezionato il layout, è possibile salvare le modifiche facendo clic su Salva.

Se desideri scoprire altri modi per personalizzare i tuoi contenuti incorporati di X (Twitter), clicca sul pulsante " Personalizza ".

Successivamente, puoi utilizzare l'editor in tempo reale del plugin per modificare i colori dei tuoi contenuti incorporati.

Per farlo, è sufficiente fare clic sull'opzione Schema di colore a sinistra.

Ora è sufficiente selezionare la combinazione di colori che si preferisce per cambiare tutti i colori del feed in una volta sola.

Ecco le combinazioni di colori tra cui è possibile scegliere:

• Eredita dal tema: Copia automaticamente i colori del tema di WordPress
• Luce: Selezionare uno sfondo chiaro e un colore di carattere scuro
• Scuro: visualizza invece uno sfondo scuro e una luce appropriata
• Personalizzato: Scegliere tutti i colori del widget manualmente

Dopo aver selezionato la combinazione di colori, fare nuovamente clic su Salva.

Ora puoi utilizzare le altre opzioni di personalizzazione del plugin per personalizzare lo stile della casella dei tweet, l'intestazione, i pulsanti "Carica altri", le dimensioni del feed e molto altro ancora.

Come puoi vedere, questo plugin semplifica la personalizzazione e l'integrazione dei feed di X (Twitter): non serve affatto ricorrere a CSS o HTML!

Infine, fare clic su Salva per salvare le modifiche prima di passare alla fase finale.

Passaggio 5: Aggiungere i codici di incorporamento di Responsive X (Twitter) a WordPress

Dato che questo plugin rende automaticamente responsive i tuoi contenuti incorporati, puoi procedere e incorporare il tuo widget di X (Twitter).

Con Twitter Feed Pro, puoi scegliere tra 2 diversi modi per incorporare i tuoi widget responsive:

• Aggiungi contenuti incorporati da X/Twitter alla tua pagina web
• Aggiungi i contenuti incorporati di X/Twitter nella barra laterale o nel piè di pagina del tuo sito web

Vediamo di seguito entrambi i metodi.

Aggiungi contenuti incorporati da X/Twitter alla tua pagina web

Sei pronto ad aggiungere i widget responsive al tuo sito web?

Per prima cosa, fare clic sul pulsante Embed nell'angolo in alto a destra.

Cliccandoci sopra, si apriranno le opzioni di incorporamento per questo widget. Puoi incorporarlo in una pagina WordPress, nella barra laterale o nel piè di pagina.

Questa volta è possibile fare clic sull'opzione Aggiungi a una pagina .

Ora è possibile visualizzare un elenco di tutte le pagine di WordPress presenti sul sito web.

Per continuare, basta cliccare sulla pagina in cui desideri aggiungere il widget responsive di X/Twitter e cliccare su “Aggiungi”.

Twitter Feed Pro vi reindirizzerà a questa pagina nell'editor di WordPress.

Qui è possibile aggiungere un nuovo blocco di contenuti facendo clic sull'icona più (+).

A questo punto, digita “twitter feed” nella barra di ricerca in alto e poi clicca sul blocco “Twitter Feed” qui sotto.

A questo punto, il plugin aggiungerà automaticamente il widget di X/Twitter alla tua pagina.

Per confermare il nuovo widget, fare clic sul pulsante Aggiorna in alto.

Come puoi vedere, è semplicissimo rendere reattivi i tuoi contenuti incorporati da X/Twitter e aggiungerli al tuo sito. Ora puoi aprire la pagina web e vedere come appaiono i tuoi contenuti incorporati da Twitter.

Aggiungi i contenuti incorporati di X/Twitter nella barra laterale o nel piè di pagina del tuo sito web

Dall'editor del feed in tempo reale puoi aggiungere contenuti da X/Twitter anche alle aree del tuo sito web predisposte per i widget.

Nel caso in cui il vostro editor non sia ancora aperto, aprite prima il menu Twitter Feed " All Feeds dalla vostra dashboard.

A questo punto, clicca sul widget X/Twitter che desideri incorporare.

In un attimo, il tuo widget si aprirà nell'editor del feed in tempo reale.

Come in precedenza, è possibile fare clic su Embed per procedere.

Verrà quindi visualizzata nuovamente la finestra a comparsa con le opzioni di incorporamento.

È possibile fare clic su Aggiungi a un widget per continuare.

Twitter Feed Pro vi reindirizzerà alla pagina dei widget del vostro sito web, dove potrete gestire i widget esistenti e aggiungerne di nuovi.

Qui puoi scegliere se visualizzare il tuo widget nella barra laterale o nel piè di pagina.

Utilizzeremo il piè di pagina per il nostro esempio.

Infine, fate clic sull'icona più (+) in basso e selezionate il widget Twitter Feed .

Se clicchi sul pulsante "Aggiorna ", il tuo nuovo widget X/Twitter sarà visibile sul tuo sito web.

In questo modo, chiunque visiti il tuo sito web potrà vedere i tuoi contenuti incorporati responsive nel piè di pagina del sito:

Ed ecco fatto!

In pochi semplici passaggi, potrai creare un feed di contenuti X (Twitter) incorporati e adattabili a qualsiasi dispositivo per coinvolgere i visitatori, aumentare le conversioni e far crescere il tuo seguito sui social.

Grazie a Twitter Feed Pro, puoi visualizzare facilmente splendidi widget che si adattano perfettamente a schermi di qualsiasi dimensione, senza dover scrivere nemmeno una riga di codice.

Vuoi rendere reattivi gli elementi incorporati di X (Twitter)? Scarica qui Twitter Feed Pro per il tuo sito web.

Per un modo semplice di incrementare le vendite, potete seguire la nostra guida su come incorporare i widget delle recensioni di Google in WordPress.

E se questo articolo ti è piaciuto, seguici su X (Twitter) e Facebook per altri tutorial sul social media marketing.