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.
Che cos’è un codice di incorporamento?
Un codice di incorporamento è un blocco di HTML che viene inserito in un’altra pagina e riproduce un elemento visivo (un video, un post di social media, un modulo o una pagina) da un altro sito Web o fonte. Puoi incorporare video di YouTube, post di Twitter, GIF e altri oggetti multimediali su un altro sito web.
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.
Come aggiungere il codice di incorporamento HTML al tuo sito
- Vai al post social o alla pagina web che desideri incorporare.
- Genera il codice di incorporamento utilizzando le opzioni del post.
- Se applicabile, personalizza il montante da incorporare, ad esempio l’altezza e la larghezza dell’elemento.
- Evidenzia il codice di incorporamento, quindi copialo negli appunti.
- Nel tuo sistema di gestione dei contenuti, apri il tuo visualizzatore HTML.
- Incolla lo snippet HTML appena copiato nella finestra del visualizzatore HTML. Quindi fare clic su “OK” o “Salva”.
- Finito! Ora hai incorporato il contenuto nel tuo sito web o blog.
Di seguito, copriamo questi passaggi in modo più dettagliato per ciascuna piattaforma. In generale, ti consigliamo di:
- Genera il codice di incorporamento.
- Accedi al tuo sistema di gestione dei contenuti e incolla il codice di incorporamento nel tuo visualizzatore HTML.
- 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.
