Come aggiungere emoticon a un post di Blogger.

Come aggiungere emoticon ai post di Blogger e Wordpress con un tool online, con Picasa Web Album o con Open Live Writer.

In articoli precedenti abbiamo visto come aggiungere emoticon ai commenti di Blogger che magari riprenderò a breve. In questo articolo più semplicemente illustrerò come aggiungere emoticon ai post di Blogger o anche di Wordpress.

Le emoticon non sono altro che immagini che quindi possono essere aggiunte con l'Editor cliccando sulla apposita icona per poi selezionare l'emoticon sul computer o online. Vediamo come semplificare questa operazione e come renderla più produttiva.

AGGIUNGERE EMOTICON IN MODO AUTOMATICO

Aprendo il sito Emoji in Blog si possono visualizzare una notevole quantità di emoticon suddivise nelle categorie Persone, Natura, Oggetto, Posti e Simboli Speciali.  Il sito permette di copiare le emoticon per poi incollarle direttamente nell'Editor. Sono supportati sia l'Editor di Blogger che quello di Wordpress. È anche supportato Open Live Writer per incollare l'emoticon direttamente nel post confezionato con questo Editor nato dalle ceneri di WLW.

Quando si clicca su una emoticon questa viene automaticamente copiata negli Appunti. Si può quindi posizionare il cursore nel punto in cui aggiungere l'emoticon e digitare Ctrl+V oppure cliccare sul destro del mouse e scegliere Incolla.  Questo va fatto da Scrivi e non da HTML.

La soluzione è semplice e rapida. Ha però dei piccoli inconvenienti dal punto di vista SEO. In alto c'è anche un cursore per settare le dimensioni in pixel delle emoticon aggiunte.

COME AGGIUNGERE EMOTICON FREE A BLOGGER O WORDPRESS

Se dopo aver aggiunto le emoticon noi andiamo su HTML (in Blogger o Wordpress) oppure su Origine su Open Live Writer si visualizzerà il codice della emoticon che sarà simile a questo

<img height="24" src="https://twemoji.maxcdn.com/36x36/1f604.png" width="24" />

Si tratta di un semplice codice di una immagine caricata sul sito Twemoji. Questo significa che l'immagine non è ottimizzata e soprattutto che ci sarà una nuova richiesta HTTP verso questo sito oltre a quelle verso Picasa in cui sono solitamente caricate le immagini di Blogger. Devo dire che si tratta di sottigliezze perché il peso di queste immagini in PNG è di circa 170 byte quindi di velocissimo caricamento. Se qualcuno molto puntiglioso volesse minimizzare anche questo fattore può caricare le immagini su Picasa per poi pubblicarle richiamandole dall'apposito album.

1) Scaricare le immagini delle emoticon

A questo scopo si apre la pagina Twemoji su GitHub e si va su Clone or Download -> Download ZIP per scaricare le immagini delle emoji. Dopo aver aperto il file ZIP con 7Zip o con il tool nativo di Windows si clicca sulla cartella della larghezza delle emoticon che ci interessa cioè 16x16, 36x36, 72x72 (in pixel) per individuare le emoticon giuste.

2) Si crea un album su Picasa per aggiungervi le emoticon che ci interessano

Si apre Picasa con il nostro account Google (Blogger). Si clicca su Carica quindi si dà un nome all'album e si selezionano le foto che vogliamo caricarvi tra quelle che abbiamo scaricato. Si possono selezionare anche cumulativamente aiutandoci con il tasto Shift

Si va su OK per confermare il caricamento.

3) Pubblicare una emoji o emoticon in Blogger

Si clicca sulla icona delle Immagini quindi si sceglie la Scheda da Picasa Web Album e il nome dell'Album delle emoticon appena creato. Si seleziona l'emoticon desiderata quindi si va su Aggiungi selezionate per inserirla nel post. Alternativamente si può aprire la scheda Da un URL per poi incollarvi il link diretto della emoticon ottenuto da Picasa Web Album.

Andando su HTML  ci si rende conto che l'indirizzo delle immagini avrà lo stesso dominio di tutte le altre e quindi non ci saranno richieste aggiuntive HTTP che potrebbero rallentare il caricamento.

COME AGGIUNGERE LE EMOTICON CON OPEN LIVE WRITER

Concludo mostrando come si possano aggiungere delle emoticon a un post utilizzando l'apposito tool di Open Live Writer. Si va su Insert -> Emoticon per poi scegliere quella da aggiungere

Ecco un esempio di tre emoticon caricate con questo programma

che verranno caricate automaticamente su Picasa Web Album dai server di Blogger. Nel codice ho aggiunto padding: 5px; per separarle tra di loro.