Come incorporare un tweet in un post o in una pagina web.

Come implementare un tweet di Twitter in un post di Blogger o Wordpress o in una pagina web con o senza contenuti multimediali.

Nel precedente articolo abbiamo visto come mostrare in un post un riquadro rettangolare con una frase già pronta per essere twittata dai lettori con un click. In questo post mostrerò invece la semplice procedura per implementare un tweet in una pagina web con possibili ulteriori personalizzazioni.

Questa funzione è molto usata da alcuni quotidiani online che a fronte di un articolo che come notizia ha il contenuto di un tweet postato da un politico o da una celebrità, mostra anche lo stesso tweet con tutte le opzioni di interazione. Vale a dire il lettore del quotidiano potrà ritwittare, aggiungere una risposta o aggiungere il cuoricino del Mi Piace.

Ultimamente questa opzione di Twitter si è arricchita della possibilità di condividere o meno anche i contenuti multimediali eventualmente presenti nel tweet. Inoltre il codice di implementazione del tweet è Responsive e adatta automaticamente la larghezza del riquadro alla risoluzione del dispositivo.

Per incorporare un tweet si clicca sulla freccetta in alto a destra dello stesso per aprire il menù.

In tale menù si sceglie Incorpora tweet che aprirà una nuova finestra modale

Sotto il codice verrà mostrata anche l'opzione per mostrare il contenuto multimediale nel caso in cui questo fosse presente. Si lascia la spunta per mostrare immagine o video oppure la si toglie per non mostrarli.

Più in basso si potrà vedere l'anteprima del tweet incorporato. Alla fine dell'anteprima ci saranno

i bottoni per interagire con il tweet così come sono nella Timeline di Twitter: Risposte, Retweet e Mi Piace. I numeri delle interazioni cambieranno in tempo reale anche nella pagina che ha incorporato il tweet.

Un tweet generico avrà un codice per la implementazione con questa struttura

<blockquote class="twitter-tweet" data-lang="it"><p lang="it" dir="ltr">Come creare dei tweet preimpostati che i lettori possono condividere su Twitter con un tweet <a href="https://twitter.com/hashtag/blogger?src=hash&amp;ref_src=twsrc%5Etfw">#blogger</a> <a href="https://twitter.com/hashtag/wordpress?src=hash&amp;ref_src=twsrc%5Etfw">#wordpress</a> <a href="https://t.co/T30OgPXgbK">https://t.co/T30OgPXgbK</a> <a href="https://twitter.com/parsifal32?ref_src=twsrc%5Etfw">@parsifal32</a></p>&mdash; Ernesto Tirinnanzi (@parsifal32) <a href="https://twitter.com/parsifal32/status/937649299046981632?ref_src=twsrc%5Etfw">4 dicembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Il codice del tweet inizierà con <blockquote class="twitter-tweet" ...  e terminerà con </blockquote> mentre la riga finale evidenziata di giallo è il javascript di Twitter. Se nel vostro sito avete inserito un bottone di Twitter il javascript lo avete già e quella riga potrà anche essere tralasciata.

Anche se non lo avete installato ma state usando un Tema di Blogger il javascript sarà comunque presente. Se decidete di togliere la spunta a Includi contenuto multimediale, al codice verrà aggiunta la stringa data-cards="hidden" dopo   class="twitter-tweet".

Come incorporare un tweet in un post o in una pagina web mostrando i bottoni per risposte, retweet e Mi Piace con cui il lettore possa interagire in tempo reale #blogger #wordpress #twitter https://t.co/yx2PYHYTvf

— Ernesto Tirinnanzi (@parsifal32) 4 dicembre 2017

Il tweet incorporato verrà mostrato sulla sinistra del layout e avrà una larghezza massima di 625 pixel che però si ridimensionerà se aperto con dispositivi con risoluzioni più basse. Se avete un sito che ha l'area del post più grande di 625 pixel, il risultato sarà esteticamente migliore se il tweet viene centrato. Per farlo basterà aggiungere la riga <div align="center"> all'inizio del codice e la riga </div> alla sua fine.