Come aggiungere codici di incorporamento HTML al tuo sito web [Quick Tip]

Se vuoi curare i contenuti degli altri dai social media o semplicemente far lavorare di più i tuoi contenuti visivi sui social media per la tua strategia di contenuto complessiva, devi sapere come incorporare il codice HTML nel tuo blog o sito web.

Ma aspetta un secondo … prima di entrare nel nocciolo di questo suggerimento, cosa diavolo significa “embed”? E cos’è l’HTML? Se non sai affatto come codificare, non preoccuparti: incorporare contenuti esterni è estremamente semplice. Prendiamoci un secondo per abbattere le basi.

Cosa significa incorporare?

Incorpora significa integrare contenuto esterno in un altro sito Web o pagina. Incorpori qualcosa quando inserisci un blocco di codice, chiamato codice di incorporamento, nell’editor HTML di un altro sito web. Quando premi “Salva” o “Pubblica”, il file multimediale viene visualizzato nella pagina pubblicata.

Il contenuto incorporato è referenziato con HTML. L’HTML è uno dei linguaggi più basilari utilizzati sul Web per progettare e disporre le pagine Web.

Vedi spesso questo codice quando sei nel “back-end” del tuo post sul blog. Ecco dove aggiungerai il tuo codice di incorporamento.

La maggior parte dei siti Web social e multimediali ha un’opzione per generare un codice di incorporamento direttamente in ogni singolo post. Ecco un esempio di codice di incorporamento per un video YouTube HubSpot:

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/eGUEAvNpz48" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ed ecco il risultato incorporato.

Vuoi fare la stessa cosa sui post e sulle pagine del tuo blog? Esaminiamo come è possibile generare un codice di incorporamento per i principali siti social.

Di seguito, copriamo questi passaggi in modo più dettagliato per ciascuna piattaforma. In generale, ti consigliamo di:

1. Genera il codice di incorporamento.
2. Accedi al tuo sistema di gestione dei contenuti e incolla il codice di incorporamento nel tuo visualizzatore HTML.
3. Finito! Hai incorporato contenuti nel tuo sito web o blog.

Entriamo in ogni passaggio.

1. Genera il codice di incorporamento.

Prima di incorporare contenuto esterno, devi prima generare un codice di incorporamento per il post o la pagina che desideri incorporare nel tuo sito web.

Analizzeremo come puoi farlo sulla maggior parte dei principali social network e di contenuti.

Incorpora un post su Facebook

Per incorporare un post di Facebook, procedi come segue:

• Accedi a Facebook sul tuo browser desktop e vai al post che desideri incorporare.
• Fai clic sui tre punti nell’angolo in alto a destra del post.
• Nel menu a discesa, fare clic su Incorporare.

• Apparirà un pop-up in cui hai la possibilità di includere il post completo e accedere alle impostazioni avanzate. Per i principianti, consigliamo di lasciare le opzioni così come sono e di fare semplicemente clic Copia codice.

• Finito! Hai il tuo codice di incorporamento.

Incorpora un post su Instagram

Vuoi incorporare un post su Instagram? Il processo è simile a quello di Facebook. Tieni presente che puoi incorporare post solo dalla versione desktop e non dall’app mobile.

• Fai clic sui tre punti nell’angolo in alto a destra del post.
• Verrà visualizzato un popup con diverse opzioni. Clic Incorporare, la penultima opzione.

• Apparirà un pop-up con il tuo codice di incorporamento. Hai la possibilità di includere o escludere la didascalia.
• Dopo aver finito di personalizzare le tue opzioni, fai clic su Copiare il codice incluso.

• Completare! Hai il tuo codice di incorporamento di Instagram.

Incorpora un video di YouTube

I video di YouTube possono portare i post del tuo blog al livello successivo e la parte migliore è che puoi incorporare la sua ricchezza di contenuti nei post del tuo blog gratuitamente.

Per fare ciò, procedi come segue:

• Vai al video che desideri incorporare nel tuo sito web.
• Sotto il video, accanto a dove si trovano i Mi piace, fai clic su Condividere.

• Verrà visualizzato un pop-up con diverse opzioni, inclusa la condivisione del post su altri social network. Clic Incorporare.

• YouTube creerà un codice di incorporamento che puoi personalizzare. Puoi avviare il video a un certo punto o nascondere i controlli del player.
• Dopo aver scelto le opzioni, fai clic su copia nell’angolo inferiore destro del popup.

• Completare! Il tuo video di YouTube è pronto per essere incorporato.

Incorpora un Tweet

Se incorpori un Tweet nelle pagine del tuo sito Web o nel tuo blog, puoi generare coinvolgimento per il tuo profilo Twitter senza fare affidamento sui tuoi follower su Twitter. Anche i visitatori del sito web possono interagire con i tuoi contenuti di Twitter.

Per incorporare un post su Twitter, procedi come segue:

• Su un browser desktop, vai al post che desideri incorporare.
• Fai clic sui tre punti nell’angolo in alto a destra del post.
• Apparirà un menu a tendina. Clic Incorpora Tweet.

• Twitter ti porterà a una pagina esterna su pubblicare.twitter.com, dove puoi personalizzare ulteriormente l’aspetto del Tweet prima di incorporarlo nel tuo sito. Ad esempio, puoi impostarlo in modalità oscura e cambiare la lingua di visualizzazione del Tweet.

• Dopo averlo personalizzato, fai clic su Aggiornare.
• Clic Copia codice.
• Finito! Il Tweet è pronto per essere incorporato nel tuo sito.

C’è un altro modo per generare un codice di incorporamento per Twitter. Vai a pubblicare.twitter.com e inserisci l’URL del post che desideri incorporare. Twitter genererà quindi il codice di incorporamento e potrai personalizzarlo utilizzando la stessa procedura dell’ultimo metodo.

Incorpora un post di Pinterest

Incorporare un post di Pinterest può riportare gli utenti del sito web al tuo profilo Pinterest e aiutarti a far crescere il tuo seguito su Pinterest. Per iniziare, procedi come segue:

• Vai al post di Pinterest che desideri incorporare.
• Fai clic sui tre punti accanto all’immagine (o sotto l’immagine, se stai utilizzando il sito web mobile).
• Nel menu a discesa, fare clic su Ottieni il codice di incorporamento del Pin.

• Apparirà un pop-up con il codice di incorporamento. Hai la possibilità di creare un pin incorporato piccolo, medio, grande o extra-large.

• Dopo aver personalizzato la dimensione, evidenziare il codice e fare clic su Comando + C o CTRL + C.
• Finito! Il tuo Pin è pronto per essere incorporato.

Incorpora una presentazione SlideShare

Sebbene le presentazioni di SlideShare non siano così popolari in questi giorni, possono comunque essere un utile strumento multimediale per ravvivare post e pagine di blog. Ecco come incorporare una presentazione SlideShare:

• Vai alla presentazione di SlideShare che desideri incorporare.
• Clic Condividere sotto la presentazione
• Nella stessa finestra in cui appare la presentazione, vedrai l’opzione per condividerla tramite i canali social. Il codice di incorporamento sarà al di sotto di esso.

• Scegli le dimensioni della finestra di incorporamento e su quale diapositiva desideri che inizi la presentazione.
• Evidenzia il codice di incorporamento e fai clic Comando + C o CTRL + C.
• Pronto! Ora puoi incorporare la presentazione di SlideShare in una pagina web o in un post.

Incorpora una pagina Web esterna

Non vuoi incorporare un post social ma piuttosto una pagina web? Puoi incorporare una pagina web esterna usando il iframe tag HTML.

Tutti i codici di incorporamento, inclusi quelli per i siti social, utilizzano tag iframe. Ecco come si presentano:

 
<frame src="https://blog.hubspot.com/marketing/url" title="description" ></iframe>

Puoi utilizzare questi stessi tag per incorporare una pagina web esterna. Ecco come:

• Vai alla pagina web che desideri incorporare nel tuo sito.
• Apri l’app del blocco note sul tuo computer. Incollaci il seguente codice:

 
<iframe src="https://blog.hubspot.com/marketing/url" title="description" width=”” height=””></iframe>

• Torna alla pagina web e copia l’URL.
• Incolla l’intero URL dove dice URL nel tuo codice iframe. Non dimenticare di includere https:// all’inizio dell’URL e inserire il collegamento tra le virgolette. Ecco come dovrebbe essere il tuo codice:

 
<iframe src="https://example.com/embedded-page" title="Embedded Page Title" width=”” height=””></iframe>

• Modificare la larghezza e l’altezza del telaio se lo si desidera.

 
<iframe src="https://example.com/embedded-page" title="Website Page Title" width=”750” height=”500”></iframe>

• Copia l’intera riga di codice. Dopo, la pagina web è pronta per essere incorporata nel tuo sito web.

2. Accedi al tuo sistema di gestione dei contenuti e incolla il codice di incorporamento nel tuo visualizzatore HTML.

Sebbene ogni CMS sia diverso, probabilmente puoi trovare il visualizzatore HTML con passaggi simili. Vedremo come puoi farlo in CMS Hub e WordPress.

CMS Hub

In CMS Hub, in realtà non è necessario aggiungere il contenuto da incorporare utilizzando l’editor HTML (sebbene tu abbia la possibilità di farlo). Ecco come:

• Nella dashboard di HubSpot, vai a Marketing > Sito web > Blog. Se hai intenzione di aggiungere il codice a una pagina del sito web, vai a Marketing > Sito web > Pagine del sito web.

• Trova il post o la pagina a cui desideri aggiungere il codice di incorporamento. Passaci sopra con il mouse, quindi fai clic su Modificare.

• Fai clic nel modulo in cui desideri aggiungere il codice di incorporamento. Apparirà una barra delle opzioni nella parte superiore dello schermo. Nella parte destra, fare clic su Inserire.
• Scegliere Incorporare dal menu a tendina.

• Apparirà un pop-up. Incolla il codice iframe nella barra di testo.

• Clic Inserire.
• Finito! Puoi modificare la larghezza e l’altezza del contenuto da incorporare per personalizzarlo ulteriormente.

Per accedere all’editor HTML, completare i passaggi 1-3 sopra. Nella barra delle opzioni in alto, fare clic su Avanzate > Codice sorgente. È quindi possibile incollare manualmente il codice di incorporamento. Nota che il risultato finale è lo stesso.

WordPress

Per incollare un codice di incorporamento nel tuo sito Web WordPress, utilizza i seguenti passaggi:

• Accedi alla tua area di amministrazione e vai su entrambi Pagine o Post.
• Fai clic sul titolo del post a cui vuoi aggiungere il codice di incorporamento. Questa azione ti porterà all’editor del post.
• Clicca il Testo scheda nell’angolo in alto a destra dell’editor di testo.

• Incolla il codice di incorporamento dove vuoi che appaia il modulo.

3. Finito! Hai incorporato contenuti nel tuo sito web o blog.

Una volta ricaricata la pagina, apparirà il tuo post social incorporato.

Aggiungi contenuti incorporati per aumentare il coinvolgimento degli utenti

Incorporando contenuti esterni nelle tue pagine e nei tuoi post, puoi aumentare il coinvolgimento sul tuo sito web e far interagire i visitatori del tuo sito con i contenuti che pubblichi sui social media. La parte migliore è che è facile da fare: basta generare il codice di incorporamento, incollarlo nel tuo editor HTML e osservare crescere il coinvolgimento degli utenti.

Nota dell’editore: questo post è stato originariamente pubblicato nel settembre 2013 ed è stato aggiornato per completezza.