Come ottenere il link diretto di immagini per un widget con Blogger

Fonte immagine: https://pixabay.com/it/photos/string-link-acciaio-forza-823252/

3 modi differenti per avere i link diretti o hotlink da inserire in un widget per Blogger

Creare un Widget per i social network con Blogger

Hai appena creato il tuo primo blog su piattaforma Blogger e vorresti subito creare un widget personalizzato con le icone per i tuoi social network. Fai benissimo, così porterai maggior traffico diretto al tuo blog. Come dici, non riesci ad ottenere l'hotlink di una immagine da inserire nel codice?

Non preoccuparti di questo. Oggi vedremo in questa piccola guida tre metodi differenti per avere velocemente un link diretto di una immagine. Dunque, mettiamoci subito a lavoro iniziando dalla prima opzione che poi alla fine è anche quella più veloce.

1) Da Blogger

Si, ha capito bene. Direttamente da qui. Caricando le immagini delle icone da usare per i tuoi pulsanti social otterrai tutti i link diretti di cui hai bisogno.
Io ne ho già caricate quattro come esempio: quella di Facebook, Twitter, Instagram e YouTube.

Procedi così:

1. clicca su "Nuovo post o su "Pagine">Nuova pagina (è indifferente)
2. carica le immagini che intendi usare
3. appena finito l'upload passa in HTML per visualizzare il codice

Come vedi dallo screenshot ho selezionato il primo link diretto ottenuto dalle quattro icone precedentemente caricate su Blogger situato all'interno degli apici di inizio e fine link. In questo caso si tratta della icona di Facebook che andremo poi ad usare assieme alle altre per creare il nostro widget.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxvcwwG5vxyyxbflkh0hV6z9yHmxDl6iAqY3mGCuK5KRlgOc79aHadEaj2a2FzAxeDrUOQFbmi8QUIvd9QRyjKrihBJx89uNfne0PZAr2T7MYc_zRx8we2LuMd_muuOIFoW9CgJdKEYBq/s1600/if_facebook_social_media_online_tantilink.png

Seleziona uno ad uno tutti l'indirizzi ricavati dal codice e salvali per comodità in un documento di testo.

2) Da Google foto

1. Accedi al tuo account per caricare tutte le icone necessarie.
2. Per farlo fai click su "Carica" (nella parte in alto a destra della schermata)
3. Clicca sulla icona caricata per aprirla
4. In questa nuova finestra clicca la prima icona in alto a sinistra (quella per la condivisione)
5. Clicca su "Crea link"

Normale - https://photos.app.goo.gl/V6WG5Jxq3Ntw5txS6

Con il collegamento ricevuto da Google foto recati su https://ctrlq.org/google/photos/ per trasformarlo in hotlink.

Diretto - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCsThZ8xSxC_pJxvIoBPJINiqs2msPSslnJjc9vYohKl5F_UcNskA2Cl63TbQ3MVt-Lf6pmhfTEWSY5NtmojeXzgGQ8Dhsz-6GjwZSeGmUKSk2jj2SmFbCNeAB9AgJ5koXDRe_S81MBlR/s48-p-k/

3) Da un servizio di hosting per le immagini

Di tutti i servizi che permettono di caricare immagini con la possibilità di avere un link diretto, mi sento di consigliarti quello che per me è uno dei migliori se non il migliore. 

Imgur è una piattaforma nata nel 2009 dove condividere immagini, meme e Gif che offre molte opzione di condivisione, fra cui l'hotlink. Dunque, se non sei già iscritto fallo subito o accedi con Facebook, Twitter,  account Google o Yahoo.

Fatto? Bene, carica le tue icone cliccando su "New post" (in alto a sinistra).

Recati nella tua galleria immagini e seleziona una ad una le immagini caricate per ottenere un link diretto.

Vai alla voce "Direct Link" e clicca il bottone Copy

Link diretto della mia icona per Twitter - https://i.imgur.com/wGjU9dt.png

Piccolo codice HTML per creare un Widget dove inserirci dentro i links ai social

Ok, ci siamo quasi. Abbiamo visto i modi migliori per ottenere hotlink da una immagine per chi usa la piattaforma Blogger.

Vediamo ora come procede per creare un widget direttamente dall'editor di Blogger. Per iniziare...

1) Copia e incolla questo piccolissimo codice su un documento di testo.

<a href="link del social network" target="_blank"><img src="hotlink del social network" title="testo visibile al passaggio del mouse" /></a>

In rosso - inserisci il link della tua pagina Facebook o qualsiasi altro social
In verde - il link diretto
In blu - scrivi quello che vuoi... ad esempio: seguimi su Facebook o pagina ufficiale Facebook

target="_blank" è l'attributo HTML che viene utilizzato per aprire un collegamento ipertestuale in un'altra scheda. Volendo lo si può anche togliere dal codice.

Il risultato sarà simile a questo:

<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxvcwwG5vxyyxbflkh0hV6z9yHmxDl6iAqY3mGCuK5KRlgOc79aHadEaj2a2FzAxeDrUOQFbmi8QUIvd9QRyjKrihBJx89uNfne0PZAr2T7MYc_zRx8we2LuMd_muuOIFoW9CgJdKEYBq/s1600/if_facebook_social_media_online_tantilink.png" title="Seguimi su Facebook" /></a>

<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX29OXvLTc5zDKi6XxUmFDqmHF-Pcb4dpOV6xeEmpKuS235LrFUYLM9ARBm95NyeTGkrl5dfdryxRQTvGTSTYIz_ml5DdaZzCVCmFjXjDmfdTg8DoyBk1AzlB9YtgAB9Ide1iNVsCSIvGw/s1600/if_instagram_social_media_online-_tantilink.png" title="Seguimi su Instagram" /></a>

<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFQCkbPgd243Bz_Aa5T7YZ3ftaGwhyphenhyphenfE7Ms5AEj1NDUyMm76hJh_44Vh4Tjyx-WArdSDlY5feCc7kXg3NvuoWEZUknqJ-WI46hNuvxfhPvIRQS67mjmh_N3Q3qdMlxqpkztsZ3UPHpqXl/s1600/if_twitter_social_media_online_tantilink.png" title="Seguimi su Twitter" /></a>

<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLo-zlFw4GHKjYkyC34K30QFzrGSFlYNEWJw3X3MG7hT1N0SuVrpZ3mbbyVJsvhSmH3M_nL4Mq6tYOqwqTfwA5aoX9OYk5-KWgNxaNAmymqcRS8cgzhwk77Lja9Ux8dsLdwf8mGYNw_qC/s1600/if_youtube_social_media_online_tantilink.png" title="Iscriviti al mio canale YouTube" /></a>

Anteprima

2) Inserisci il codice nel tuo blog: Layout > Aggiungi un gadget > HTML/JavaScript.

Facile!

Condividi questa piccola guida per aiutare tutti quelli che come te iniziano questo lungo viaggio nel mondo del blogging su cms Blogger.

Leggi anche: Incorpora immagini nel tuo sito web o nel blog tramite Google Foto