Blogger Book

Hai mai voluto dire qualcosa, ma le parole non bastano? A volte capita quando vogliamo commentare un blog. Magari un meme può riassumere la nostra opinione, o un video può integrare il nostro commento. Purtroppo, il modulo commenti di Blogger non include la possibilità di caricare foto o incorporare video, ma solo perché Blogger non lo consente non significa che sia impossibile.

Quello che vedremo in questo post è proprio questo: come inserire immagini e video nei commenti del blog in un modo così semplice da richiedere un solo passaggio. Il metodo che useremo è simile a quello che facciamo quando aggiungiamo emoticon ai commenti, quindi ciò che scriviamo nel commento viene sostituito da un altro codice, in questo caso il codice HTML necessario per visualizzare le immagini e i video.

Puoi vederlo funzionare su questo blog di prova .
Per inserire un'immagine, usa questo codice:

[img] URL dell'immagine [/img]

Per incorporare un video di YouTube o Vimeo, utilizza questo codice:

[video] URL del video [/video]

Incredibile, vero? E proprio come promesso, l'installazione è un processo in un unico passaggio. Basta andare su Modello | Modifica HTML e incollare quanto segue prima di </body> :

<script>
//<![CDATA[
// Inserisci immagini e video nei commenti (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
ripetitore = IDelemento.innerHTML;
ripetitore = ripetitore.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-commenti' src='$1'\/>");
ripetitore = ripetitore.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-commenti' src='https://www.youtube.com/embed/$1'><\/iframe>");
sostituisci = sostituisci.sostituisci(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='commenti-video' src='https://www.youtube.com/embed/$2'><\/iframe>");
sostituisci = sostituisci.sostituisci(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='commenti-video' src='https://www.youtube.com/embed/$2'><\/iframe>");
replace = replace.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = replace;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Larghezza massima per le immagini */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Bordo per le immagini */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Ombra delle immagini */
}
#comment-holder .vid-comentarios {
width: 450px; /* Larghezza del video */
height: 253px; /* Altezza del video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Bordo del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Ombra video */
}
-->
</style>

Sotto lo script, vedrai che abbiamo aggiunto anche alcuni stili. Questi stili servono per personalizzare le immagini e i video che verranno visualizzati nei commenti, come il bordo, l'ombra e le dimensioni. Il colore verde specifica a cosa corrisponde ciascuna di queste aree. Naturalmente, puoi aggiungere altri stili se lo desideri.

Per far sapere ai tuoi lettori che possono aggiungere immagini e video, puoi impostare una notifica andando su Impostazioni | Post e commenti | Messaggio del modulo commenti.

Come inserire immagini e video
Per le immagini, tu e i tuoi commentatori dovreste usare questo codice:

[img] URL dell'immagine [/img]

E nel caso dei video, che siano di YouTube o Vimeo, verrà utilizzato questo codice:

[video] URL del video [/video]

In entrambi i casi, dovrai inserire l'URL dell'immagine (o del video) dove appropriato.
Come ottenere gli URL dei video

Su YouTube, puoi copiare l'URL che appare nella barra degli indirizzi del browser quando guardi un video.
Puoi anche usare l'URL che appare nella sezione " Condividi questo video ". Oppure puoi copiare l'URL che appare nel codice di incorporamento sotto " Inserisci link ". Tutti questi URL sono validi per l'uso nei commenti:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Cioè, quelli che includono il termine "watch" , quelli che hanno l'abbreviazione "youtu.be" e quelli che includono il termine "embed" . Qualsiasi di questi funzionerà.

Considerazioni finali.

• Questo metodo è valido solo per i modelli con commenti nidificati, ovvero quelli con l'opzione "Rispondi". Se il tuo blog non ha l'opzione "Rispondi", non funzionerà.
• I commenti devono essere visualizzati sotto il post, non in una finestra pop-up, a pagina intera, ecc.
• Sono supportati tutti i formati immagine più comuni (JPG, PNG, GIF).
• Nel caso dei video, sono accettati video da YouTube e Vimeo.
• Si prega di notare che l'inclusione di immagini e video nei commenti potrebbe rallentare la velocità di caricamento del blog.

Questo tipo di trucco può essere molto interessante e utile su molti blog, ma va sempre usato con moderazione per evitare di sovraccaricare il numero di immagini e video, rallentando il caricamento. Se usate correttamente, queste opzioni possono migliorare l'esperienza del lettore quando interagisce con l'autore e gli altri commentatori del blog.

fonte