3 Maggio, 2022 – 13:17
  • Home
  • Marketing
  • Social Media
  • Copywriting
  • Ecommerce
Menu
  • Home
  • Marketing
  • Social Media
  • Copywriting
  • Ecommerce
Home Marketing

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

megamarketing by megamarketing
Agosto 30, 2021
in Marketing
0
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.→ Fare clic qui per scaricare la nostra guida gratuita ai fondamenti del marketing digitale  [Download Now].

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

  1. Vai al post social o alla pagina web che desideri incorporare.
  2. Genera il codice di incorporamento utilizzando le opzioni del post.
  3. Se applicabile, personalizza il montante da incorporare, ad esempio l’altezza e la larghezza dell’elemento.
  4. Evidenzia il codice di incorporamento, quindi copialo negli appunti.
  5. Nel tuo sistema di gestione dei contenuti, apri il tuo visualizzatore HTML.
  6. Incolla lo snippet HTML appena copiato nella finestra del visualizzatore HTML. Quindi fare clic su “OK” o “Salva”.
  7. 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:

  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.

Incorpora il pulsante del codice in un post di Facebook

  • 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.

Incorpora le opzioni del codice in un post di Facebook

  • 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.

embed-instagram-post

  • 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.

Copia il codice di incorporamento pop-up su Instagram

  • 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.

Pulsante Condividi sotto un video di YouTube

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

Opzioni di condivisione per un video di YouTube

  • 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.

Codice di incorporamento generato per un video di YouTube

  • 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.

Incorpora il pulsante Tweet su Twitter

  • 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.

Opzioni per incorporare un 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.

Pulsante

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

Codice di incorporamento generato per un pin su Pinterest

  • 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.

Condividi le opzioni di SlideShare con un codice di incorporamento

  • 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.

Pulsanti Blog e pagine del sito Web sul CMS HubSpot

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

cms-hub-website-page-list

  • 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.

Pulsante Incorpora su HubSpot CMS

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

Inserisci pop-up di incorporamento nel CMS HubSpot

  • 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.

Editor di testo semplice WordPress

  • 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.

Nuovo invito all'azione

Nuovo invito all'azione

Previous Post

Messaggi sponsorizzati da Facebook: una guida per principianti

Next Post

equipaggio di spinta

Next Post

equipaggio di spinta

Ultimi articoli

BigCommerce è stato nominato un forte interprete tra le piattaforme di e-commerce B2B e B2C in base al rapporto di settore

BigCommerce è stato nominato un forte interprete tra le piattaforme di e-commerce B2B e B2C in base al rapporto di settore

by megamarketing
Maggio 3, 2022
0

I periodi migliori per pubblicare su YouTube nel 2022 [Research]

I periodi migliori per pubblicare su YouTube nel 2022 [Research]

by megamarketing
Maggio 3, 2022
0

News, guide, info su marketing, copywriting, psicologia applicata, business

  • Centro Privacy
  • Informativa sulla privacy
Menu
  • Centro Privacy
  • Informativa sulla privacy

Made with ❤ by megamarketing.it

Utilizziamo i cookie per offrirti la migliore esperienza online. Cliccando su Accetto, accetti la nostra politica sui cookie.

Accetto My Preferences Rifiuto
Centro privacy IMPOSTAZIONI DELLA PRIVACY Ulteriori info sulla Cookie Policy