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

Hai incollato il codice di incorporamento di X (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 X (Twitter) (ora X (Twitter)), 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 testato le soluzioni alternative basate sui CSS e ho scoperto perché continuano a non funzionare. A quanto pare, è proprio il codice JavaScript di X (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 il feed di X (Twitter). Innanzitutto, il metodo manuale tramite 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 (Twitter).

In questo articolo:

Risposta rapida: Come incorporare un feed X (Twitter) responsive

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

Esistono due modi per rendere reattivo un contenuto incorporato di X (Twitter). Il primo è manuale. Si inserisce l’iframe di X (Twitter) all’interno di un contenitore, lo si forza 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 (Twitter) 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 X (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	X (Twitter) Feed Pro
È necessario scrivere del codice	Sì	Nessuno
È compatibile con gli aggiornamenti di X (Twitter)	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 codice JavaScript di X (Twitter). Riapplica gli stili inline dopo il caricamento della pagina, quindi il tuo CSS viene azzerato ogni volta.

Ecco il punto che spesso confonde le persone. L’incorporamento non è realmente tuo. Si tratta di un iframe, una piccola finestra sui server di X (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 X (Twitter) Feed Pro e aggirare tutti questi problemi.

Grazie al plugin n. 1 per WordPress dedicato al feed di X (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, nemmeno X (Twitter) Feed Pro inserisce i contenuti tramite un iFrame. Il programma 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 X (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 anche 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 X (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!

Passaggio 1: Installa il plugin X (Twitter) Feed Pro

Per iniziare, puoi scaricare qui la tua copia di X (Twitter) Feed Pro. Una volta ottenuto il file del plugin, installalo e attivalo sul tuo 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, apri il menu Feed X (Twitter) » Tutti i feed dalla tua dashboard di amministrazione e clicca sul pulsante Aggiungi nuovo.

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

• Cronologia dell'utente: seleziona un account X (Twitter) e incorpora i post di X presenti su di esso
• Hashtag: Visualizza i contenuti incorporati da X (Twitter) con gli hashtag che hai scelto
• Ricerca: scegli un termine di ricerca e incorpora i post X corrispondenti
• Elenchi: seleziona un elenco di X (Twitter) e incorpora tutti i post di X presenti in esso

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 (Twitter), il tuo widget potrà iniziare a visualizzare contenuti incorporati adattivi 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, X (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 X (Twitter), di un hashtag, di un termine di ricerca e altro ancora.

Per ora, inseriremo l'hashtag “KEEB_PD” nella finestra pop-up e visualizzeremo tutti i post di X che contengono 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 X (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 X post
• 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, X (Twitter) Feed Pro aprirà l'editor del feed in tempo reale, dove potrai personalizzare nei minimi dettagli i tuoi contenuti incorporati ottimizzati per 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.

Dopodiché, potrai scegliere la disposizione dei post X che appariranno sul tuo sito web. Infatti, potrai scegliere tra 3 diverse disposizioni:

• 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 X post in un unico widget. È un’ottima opzione anche per i video incorporati.

Inoltre, è disponibile il layout "Masonry " che consente di visualizzare i tuoi post X incorporati in diverse colonne.

Di conseguenza, puoi coinvolgere i visitatori del tuo sito web mostrando tantissimi post X diversi contemporaneamente.

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 post su X, 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 X (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 contenuti incorporati di X (Twitter) nella barra laterale o nel piè di pagina del tuo sito web

Vediamo di seguito entrambi i metodi.

Aggiungi elementi 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 X (Twitter) e cliccare su "Aggiungi".

X (Twitter) Feed Pro ti reindirizzerà ora a questa pagina nell'editor di WordPress.

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

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

A questo punto, il plugin aggiungerà automaticamente il widget 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 di X (Twitter) e aggiungerli al tuo sito. Ora puoi aprire la pagina web e vedere come appaiono i tuoi contenuti incorporati di X (Twitter).

Aggiungi contenuti incorporati da X (Twitter) nella barra laterale o nel piè di pagina del tuo sito web

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

Se il tuo editor non è ancora aperto, per prima cosa apri il menu Feed X (Twitter) » Tutti i feed dalla tua 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.

X (Twitter) Feed Pro ti reindirizzerà ora alla pagina " Widget " del tuo sito web, dove potrai 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, clicca sull'icona con il segno più (+) in basso e seleziona il widget "Feed X (Twitter) ".

Se clicchi sul pulsante "Aggiorna" , il tuo nuovo widget X (Twitter) sarà attivo 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 X (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 responsive i contenuti incorporati di X (Twitter)? Scarica qui X (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.