Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
Un blog post non è fatto solo di testi e immagini, ci sono altre possibilità. Pensa ai video o magari ai podcast dei colleghi. Potresti anche inserire un documento da consultare e sfogliare. Ecco perché è così importante capire come aggiungere iFrame in una pagina web.
Con questa soluzione puoi inserire facilmente contenuti multimediali e incorporare codice di video. Il tutto rispettando le regole del copyright e personalizzando tutti i parametri.
Ma basta il copia e incolla dell’HTML nell’editor per ottenere risultati? ecco come aggiungere iFrame in una pagina web WordPress con la destrezza e il metodo di un webmaster.
Argomenti
Per capire come inserirlo al meglio bisogna prima conoscerlo. Allora, di cosa stiamo parlando esattamente? L’iFrame è un tag che consente di incorporare un elemento esterno nella pagina web del tuo sito o del blog.
Nello specifico viene definito, dal sito w3schools.com, come “An inline frame is used to embed another document within the current HTML document”. Detto in altre parole, con questa stringa di codice puoi incorporare un elemento esterno valutando una serie di vantaggi. Ecco come appare l’iFrame nel codice:
<iframe src="/default.asp" width="100%"
height="300" style="border:1px solid black;">
</iframe>In primo luogo non hai bisogno di caricare nulla sul tuo sito web, non gravi sul server e non hai necessità di upload. Questo è un aspetto particolarmente utile quando devi mostrare un video: meglio usare l’iFrame di Youtube ed evitare il caricamento del file sul tuo hosting.
Poi c’è da aggiungere il copyright: se un servizio mette a disposizione la possibilità di inserire un iFrame sei libero di usarlo, senza permessi o restrizioni. E poi c’è la praticità d’uso.
Un semplice copia e incolla del codice ti consente di avere lettori video, podcast e PDF reader sulle tue pagine web. E puoi personalizzare alcuni parametri come altezza e larghezza.
Da leggere: risolvere messaggio di sito non sicuro sul browser
In linea generale, per embeddare un iFrame in una pagina web basta copiare i tag, andare nella sezione HTML dell’editor e incollare. Con WordPress Gutenberg, però, la situazione è cambiata. E le azioni da portare avanti sono diverse. Non più difficili. Ecco cosa fare
Tempo richiesto: 2 minuti
Ad esempio su YouTube questa opzione si trova sotto al video, cliccando sul simbolo del codice. Su Spreaker, invece, c’è un tasto specifico con la parola iFrame.
Seleziona ogni elemento del codici e copialo. Puoi aggiungere delle preferenze sulle dimensioni o, come avviene con YouTube, rispetto al minuto di inizio del video.
Gutenberg permette di inserire anche una sezione dedicata a questo passaggio. Si chiama HTML personalizzato e consente di inserire qualsiasi tipo di elemento.
Hai incollato? Verifica il risultato. Se il lettore ha dimensioni in adeguate puoi intervenire sui parametri dell’embedded cambiando altezza e larghezza, tag width e height.
Il passaggio può essere fatto con Facebook, Instagram, YouTube, Vimeo e la maggior parte dei servizi. Funziona, chiaramente, se il post in questione non ha privacy restrittiva.
Non tutti sanno che con WordPress Gutenberg, in realtà, per embeddare un contenuto extra basta copiare e incollare non per forza l’intero iFrame: basta fare questo con l’URL. Oppure puoi andare nella sezione dedicata ai blocchi di incorporamento e scegliere tra i servizi.
Gli sviluppatori hanno scelto diverse piattaforme, di solito usate dai webmaster per migliorare le pagine web, e hanno creato dei moduli di incorporamento specifici per ogni realtà. Dal semplice feed rss ai risultati di Amazon puoi mettere veramente tutto con questo sistema.
Chi lavora ogni giorno con i contenuti multimediali e chiede come aggiungere iFrame in una pagina web WordPress può avere un desiderio: sfruttare i benefit di un plugin pensato per migliorare, velocizzare e ottimizzare le operazioni. A tal proposito il primo consiglio è quello di installare il ben noto iFrame che trovi su wordpress.org/plugins/iframe.
Questo tool consente di gestire tutti gli embedded con shortcode personalizzabili. In più aggiungo Litespeed Cache che ha un vantaggio molto interessante: mette in lazy load anche gli iFrame. Risparmiando risorse preziose quando si ottimizzano i tempi di caricamento.
Da leggere: la velocità è tutto per un ecommerce
Queste sono le soluzioni per incorporare il codice iFrame nelle tue pagine web. Ricorda che, in ogni caso, c’è un parametro da considerare: l’impegno per caricare elementi multimediali.
Anche se non gravi sul server, avere tanti iFrame può rallentare il caricamento della pagina e questo è un male per le prestazioni, l’user experience e la SEO. Meglio mettere solo ciò che serve anche per quanto riguarda gli iFrame, sei d’accordo? Hai domande in merito?
2 commenti presenti
Alberto ha commentato il 2024-12-15 13:11:58
Salve a tutti ho comprato Agenda Incloud e vorrei integrarla e farla interagire con Google Calendar ,
per procedere con l’integrazione mi’ viene chiesto di copiare e incollare l’Iframe !!…
qualcuno gentilmente puo’ dirmi come devo muovermi per agire ? grazie .
Riccardo Esposito ha commentato il 2024-12-16 05:03:20
Senza sapere cosa si Agenda Incloud e a cosa serva, posso immaginare che ti stia chiedendo di copiare l’iframe e incollarlo nel codice HTML di una pagina web.