Volete visualizzare gli embed responsive di Twitter per coinvolgere i visitatori del sito web?
Se volete coinvolgere tutti coloro che visitano il vostro sito web, una soluzione semplice è quella di incorporare i post di Twitter responsive.
Ma l'aggiunta di embed responsive di Twitter da soli può essere fonte di confusione, soprattutto se non si è abituati a trattare con il codice.
In questo articolo vi guideremo attraverso il processo di incorporazione dei feed responsive di Twitter nel vostro sito web.
Ma prima di tutto, diamo un'occhiata ai diversi modi per rendere reattivi gli embed di Twitter.
Oppure potete fare clic qui per passare direttamente all'esercitazione.
Modi per aggiungere embed Twitter reattivi sul vostro sito
Per incorporare contenuti da Twitter assicurandosi che i tweet siano reattivi, esistono due opzioni:
- In modo manuale: Generare un codice embed, modificare il codice per renderlo reattivo e aggiungerlo al sito.
- Modo automatico: Utilizzate un plugin per i social media in grado di visualizzare automaticamente i feed di Twitter adatti ai dispositivi mobili.
Se scegliete la via manuale, dovrete aprire il generatore ufficiale di codici embed di Twitter publish.twitter.com sul vostro browser.
Una volta generato il codice di incorporamento HTML, aprire nuovamente il sito web e inserire il codice di incorporamento.
Purtroppo, i vostri tweet potrebbero non essere sempre reattivi se utilizzate il metodo manuale. Per risolvere il problema, è possibile aggiungere questo codice CSS.
.twitter-timeline {
width: 100vw !important;
}
E se volete personalizzare i vostri post su Twitter utilizzando gli iFrames, dovrete modificare manualmente il codice o assumere uno sviluppatore.
Come si può notare, l'incorporazione di contenuti responsive di Twitter può essere lunga e complicata se si utilizza questo metodo.
Cosa è meglio: iFrame o Twitter Embed?
Sebbene alcuni utilizzino gli iFrames per visualizzare i contenuti di Twitter, in realtà possono danneggiare il vostro 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.
Di conseguenza, i visitatori su dispositivi mobili potrebbero non essere in grado di visualizzare correttamente i vostri tweet.
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 potete utilizzare il metodo automatico per incorporare i post di Twitter in modo reattivo con facilità. È possibile utilizzare un plugin per WordPress in grado di connettersi con Twitter utilizzando le sue API e aggregare i tweet sul vostro sito.
Vediamo di seguito questo metodo.
Il modo più semplice per incorporare il contenuto di Twitter in modo reattivo
Se state cercando il modo più semplice per incorporare i contenuti di Twitter, l'opzione migliore è provare un plugin come Twitter Feed Pro.
Utilizzando Twitter Feed Pro, potete creare, personalizzare e incorporare i feed di Twitter sul vostro sito web con facilità, senza bisogno di HTML, Javascript, CSS personalizzati o altro codice.
Basta seguire una semplice guida in 3 fasi per avere un bellissimo feed di Twitter pronto all'uso. È possibile incorporare una timeline di Twitter, hashtag, risultati di ricerca, timeline iniziale e altro ancora.
Poiché Twitter Feed Pro copia automaticamente il design del vostro sito web, i contenuti di Twitter si adattano perfettamente all'aspetto del vostro marchio.
È possibile personalizzare ulteriormente il feed di Twitter scegliendo un modello predefinito da importare.
Per una maggiore personalizzazione, il plugin è dotato di un editor visivo in cui è possibile impostare il layout, il colore, il numero di tweet, lo stile dell'intestazione, i pulsanti di caricamento e molto altro.
Inoltre, è possibile monitorare tutte le modifiche apportate utilizzando l'anteprima dal vivo.
Il plugin dispone di un sistema di caching intelligente che salva una copia dei contenuti di Twitter. In questo modo, il vostro sito può mostrare ai visitatori la copia salvata, invece di caricare ogni volta i vostri tweet 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.
Poiché Twitter Feed Pro salva una copia di backup, i vostri tweet incorporati saranno online anche quando Twitter stesso è temporaneamente fuori uso.
Nel complesso, è il miglior plugin per i feed di Twitter in circolazione e una soluzione fantastica se si desidera un embed di Twitter reattivo.
Siete pronti a incorporare i feed responsive di Twitter? Andate a prendere la vostra copia di Twitter Feed Pro oggi stesso!
Vediamo ora come utilizzare questo plugin per aggiungere al vostro sito i contenuti responsivi di Twitter.
Come incorporare un feed Twitter reattivo nel vostro sito
Per iniziare ad aggiungere gli embed responsive di Twitter, è sufficiente seguire le istruzioni passo-passo riportate di seguito:
Passo 1: Installare e attivare Twitter Feed Pro
Per iniziare, potete prendere la vostra copia del plugin Twitter Feed Pro da qui. Una volta ottenuto il plugin, installatelo e attivatelo sul vostro sito WordPress per continuare.
Per ulteriori informazioni, potete consultare questa guida di facile consultazione su come installare i plugin di WordPress.
Dopo aver fatto questo, si può passare al punto 2 e creare un feed Twitter reattivo.
Fase 2: Creare un feed di Twitter
Poiché il plugin è dotato di un semplice flusso guidato, è possibile creare un nuovo feed di Twitter in pochi semplici clic.
Per prima cosa, aprite la vostra dashboard di amministrazione e navigate nel menu Twitter Feed " All Feeds prima di cliccare sul pulsante Add New in alto.
Successivamente, il plugin vi chiederà di scegliere il tipo di incorporazione di Twitter che desiderate sul vostro sito web. È possibile scegliere tra 6 opzioni, ognuna delle quali visualizzerà i tweet da una fonte diversa.
- Timeline utente: Scegliere i profili Twitter di cui si desidera incorporare i tweet.
- Hashtag: Selezionare hashtag specifici e quindi incorporare i tweet con quell'hashtag
- Timeline iniziale: Incorpora i tweet della timeline iniziale del tuo account.
- Ricerca: Scegliete i termini di ricerca e inserite i risultati della ricerca di Twitter nel vostro sito.
- Menzioni: Visualizza i tweet che menzionano l'account Twitter del tuo marchio.
- Elenchi: Mostra i contenuti dell'elenco Twitter selezionato
È anche possibile selezionare più di un'opzione se si desidera combinare diversi tipi di feed in un unico feed di Twitter.
Per continuare, selezionate il tipo di feed di Twitter e fate clic sul pulsante Avanti.
Per il nostro esempio, utilizzeremo un feed di hashtag per visualizzare gli embed responsivi di Twitter.
Ora che il vostro feed Twitter è stato creato, potete collegarlo al vostro account Twitter al punto 3.
Passo 3: collegare l'account Twitter
Per mostrare gli embed responsive sul vostro sito, il plugin si connetterà ora al vostro account Twitter.
A tale scopo, fare innanzitutto clic sul pulsante Connetti .
Successivamente, Twitter Feed Pro chiederà l'accesso in sola lettura al vostro account. Il plugin può quindi utilizzare l'accesso per visualizzare le informazioni di Twitter, ma non può apportare modifiche all'account.
Di conseguenza, il plugin Twitter Feed Pro è completamente sicuro.
Per farlo, basta cliccare sul pulsante Autorizza app.
Una volta fatto ciò, Twitter Feed Pro aprirà il vostro sito web in modo che possiate aggiungere una fonte per il vostro feed di Twitter.
Una fonte è il profilo Twitter, l'hashtag, il termine di ricerca, l'elenco e altro ancora che si desidera incorporare nel proprio sito.
Per continuare, inserire l'origine nella finestra a comparsa e fare clic su Avanti.
Per questo feed Twitter reattivo, utilizziamo l'hashtag "KEEB_PD" come fonte.
Ora che avete collegato il vostro feed a Twitter e aggiunto la vostra fonte, è il momento di personalizzarlo.
Fase 4: personalizzare i propri embed Twitter responsive
Per impostare rapidamente l'aspetto dei tweet responsive sul sito, è possibile importare un modello predefinito.
Ecco i modelli di alimentazione tra cui è possibile scegliere:
- Predefinito
- Muratura
- Carosello semplice
- Carte semplici
- Carosello di vetrine
- Ultimi tweet
- Widget
Fare clic su Avanti una volta scelto il modello di alimentazione che si preferisce.
Ora siete pronti a personalizzare il vostro feed di Twitter utilizzando l'editor di feed live. Sul lato sinistro si trovano le opzioni di personalizzazione per modificare il layout del feed, il design dell'intestazione, l'opzione lightbox, la combinazione di colori e molto altro.
È inoltre possibile utilizzare le opzioni di moderazione nelle impostazioni del feed per curare i tweet che vengono visualizzati sul proprio sito.
Il plugin dispone di una semplice anteprima in tempo reale sulla destra per aiutarvi a tenere traccia delle vostre modifiche.
Per iniziare, potete modificare il layout dei tweet sul vostro sito web.
A tale scopo, cercate l'opzione Layout di alimentazione sulla sinistra e cliccateci sopra.
Successivamente, Twitter Feed Pro vi mostrerà 3 layout tra cui scegliere: List, Carousel e Masonry.
Vediamo di seguito quali sono:
Se volete mostrare i tweet in modo simile al sito ufficiale di Twitter, potete scegliere il layout a elenco .
Inoltre, in questo modo il vostro feed di Twitter sarà chiaramente visibile sulla vostra pagina web.
Se si desidera utilizzare le colonne per visualizzare gli incorporamenti di Twitter, è possibile utilizzare il layout masonry.
Con questo layout è possibile mostrare tonnellate di tweet in una volta sola.
Se scegliete l'opzione di layout a carosello , potete mostrare i vostri tweet in una presentazione interattiva di Twitter.
I visitatori avranno un altro modo per interagire con il vostro sito.
Dopo aver selezionato un layout di alimentazione, fare clic sul pulsante Salva .
Quindi, fare clic sul pulsante Personalizza per continuare a personalizzare l'aspetto del feed di Twitter.
Questa volta, potete scegliere i colori del vostro feed Twitter responsive.
Per prima cosa, fare clic sull'opzione Schema di colore .
Twitter Feed Pro è dotato di 4 opzioni di combinazione di colori che potete provare:
- Ereditare dal tema: Copia i colori del tema di WordPress per i tuoi tweet.
- 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.
Volete personalizzare ancora di più i vostri embed di Twitter? Potete usare i pulsanti rimanenti per impostare lo stile dell'intestazione, il design dei pulsanti, il numero di tweet, le dimensioni del feed e molto altro ancora.
Infine, cliccate su Salva per confermare il nuovo design del vostro feed di Twitter.
Al punto 5, potete finalmente incorporare il feed di Twitter nel vostro sito web WordPress utilizzando questo plugin.
Fase 5: aggiungere embed Twitter reattivi al proprio sito web
Con l'aiuto di Twitter Feed Pro, ci sono 2 modi per incorporare i contenuti di Twitter sul vostro sito web:
- Aggiungere embed responsivi di Twitter in una pagina web
- Aggiungere embed responsive di Twitter nella barra laterale o nel piè di pagina del sito web
Aggiunta di embed Twitter reattivi a una pagina web
Poiché il plugin è così facile da usare, potete iniziare a incorporare il vostro feed di Twitter direttamente dall'editor di feed live.
Per prima cosa, fare clic sul pulsante Incorpora nella parte superiore dell'editor.
Una volta fatto ciò, il plugin mostrerà un popup con i diversi modi in cui è possibile incorporare i feed di Twitter.
Fare clic sul pulsante Aggiungi a una pagina per continuare.
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.
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ù (+).
Utilizzando la barra di ricerca in alto, cercate il blocco "twitter feed" e poi fate clic sul blocco Twitter Feed sottostante.
Vedrete quindi il vostro embed di Twitter nell'editor di WordPress.
Infine, fate clic sul pulsante Aggiorna e il vostro feed di Twitter sarà online.
Se aprite la vostra pagina web, potete vedere come appaiono i vostri embed Twitter responsive.
Come potete vedere, Twitter Feed Pro rende super facile mostrare contenuti Twitter mobile-friendly sul vostro sito web.
Vediamo quindi il prossimo modo di incorporare i feed di Twitter.
Aggiungere embed Twitter reattivi alla barra laterale o al piè di pagina del sito web
L'opzione successiva consiste nell'utilizzare un widget di Twitter per visualizzare i tweet responsivi nella barra laterale o nel piè di pagina del vostro sito web.
Come per il metodo precedente, anche questa volta è possibile utilizzare l'editor live.
Se volete aprire di nuovo un feed nell'editor di live feed, per prima cosa aprite il menu Twitter Feed " Tutti i feed dalla vostra dashboard di WordPress.
Dopo aver fatto ciò, cliccate sul feed di Twitter che volete incorporare.
Come potete vedere, è facilissimo riaprire un feed di Twitter nell'editor dei feed live.
Da qui, fare clic sul pulsante Embed in alto per iniziare.
È ora possibile utilizzare la finestra a comparsa per creare un nuovo widget di Twitter per mostrare i tweet responsivi.
Quindi, fare clic sul pulsante Aggiungi a un widget nel popup.
A questo punto, il plugin aprirà la pagina dei widget del vostro sito, dove potrete aggiungere il vostro widget del feed di Twitter.
Una volta arrivati, è possibile scegliere la posizione dei propri tweet.
Se si desidera mostrare gli embed responsive di Twitter nella barra laterale, fare clic sul pannello Sidebar .
Oppure potete cliccare su Piè di pagina per iniziare a visualizzare i tweet nel piè di pagina del vostro sito web.
Per questo esempio, utilizzeremo una barra laterale di WordPress.
Per aggiungere un nuovo widget, fare clic sull'icona più (+) in basso.
Dopo aver fatto ciò, selezionate il widget Twitter Feed dalle opzioni disponibili per continuare.
Ora è possibile completare l'incorporazione del feed di Twitter facendo clic sul pulsante Aggiorna.
In questo modo, potrete avere un feed di embed di Twitter responsive nella vostra barra laterale o nel piè di pagina.
Ed ecco fatto!
Come potete vedere, l'aggiunta di embed responsive di Twitter al vostro sito può essere facilissima con l'aiuto di Twitter Feed Pro.
Ora potete mostrare tweet pertinenti per mantenere l'interesse dei visitatori, far crescere i vostri follower su Twitter, aumentare le conversioni e molto altro ancora.
Volete incorporare i feed di Twitter in modo reattivo? Fate clic qui per ottenere Twitter Feed Pro per il vostro sito!
Mentre siete qui, non dimenticate di dare un'occhiata a questo elenco dei migliori modi per guadagnare su Twitter.
Se questo articolo vi è stato utile, perché non ci seguite su Facebook e Twitter per altri suggerimenti e trucchi sui social media?
