La guida definitiva per incorporare contenuti sul tuo sito web

1. Trova il tweet che desideri incorporare.

2. Fare clic sull'icona con i puntini di sospensione ("…") in alto a destra del post.

In alto a destra del post di Facebook che desideri incorporare, vedrai un'icona con i puntini di sospensione composta da tre piccoli punti. Fare clic su questa icona, come mostrato di seguito.

3. Fai clic su "Incorpora".

Facendo clic sull'icona con i puntini di sospensione mostrata di seguito verrà visualizzato un menu a discesa di opzioni, tra cui una con l'etichetta "Incorpora". Se il post che desideri incorporare è un video, un'opzione simile denominata " Incorpora "apparirà più in basso in questo menu. Fai clic su un'opzione.

Se non vedi un'opzione per incorporare il post, il post non è pubblico e non è incorporabile.

4. Copia il codice che appare e incollalo nell'editor HTML del tuo sito web.

Facendo clic sull'opzione "Incorpora" mostrata sopra si aprirà la casella mostrata sotto. Nella parte superiore di questa casella, appena sopra i pulsanti "Nascondi anteprima" e "Impostazioni avanzate", vedrai una riga di testo codificato. Evidenzia e copia questo codice negli appunti del tuo computer.

Con questo codice incorporato copiato negli appunti, torna al sito web in cui desideri incorporare questo post di Facebook. Aprire il codice sorgente di questo sito Web (alcuni sistemi di gestione dei contenuti hanno a "" icona in cui è possibile accedere a questo codice sorgente). Qui, incollerai il codice embed del post di Facebook nel tuo codice HTML esattamente dove vuoi che appaia il post.

5. Aggiungi e tag attorno all'intero snippet HTML per allineare al centro il tuo post.

Una volta incollato questo codice nel codice HTML, tuttavia, ti consigliamo di allineare il post al centro in modo che non appaia automaticamente spinto contro il lato sinistro o destro della pagina web. Per correggere questo, avvolgere il codice con '

Ecco come dovrebbe apparire il codice finale:

Questo è tutto! Ecco come sarà quando hai finito:

Incorpora il feed di Facebook

Che ci crediate o no, incorporare l'intero feed di un profilo di Facebook sul tuo sito Web è facile come incorporare un singolo post o un video. E c'è più di un modo per farlo.

Utilizzando un plugin WordPress

Il primo modo è installare un plug-in o un widget nel sistema di gestione dei contenuti (CMS). Ad esempio, gli utenti di WordPress hanno a disposizione diversi plugin per i feed di Facebook. Ecco come usarne uno:

Utilizzando il plug-in di pagina di Facebook

Facebook ha il suo Plugin di pagina molto personale, che ti consente di produrre codice di incorporamento per ogni singolo feed Facebook di qualsiasi profilo e inserirlo nel codice HTML del tuo sito web. Ecco come usarlo:

1. Apri lo strumento Plugin della pagina di Facebook.

Per incorporare un feed di Facebook nel tuo blog o nel tuo sito web, apri lo strumento nativo del plug-in di pagina di Facebook qui. Scorri verso il basso su questa pagina finché non vedi la sezione mostrata sotto.

2. Inserisci l'URL della pagina di Facebook che desideri incorporare.

Con questo strumento aperto, creare una nuova scheda nel browser Web e accedere al profilo Facebook di cui si desidera incorporare il feed. Premi Command + C sulla tastiera (o Control + C, se stai usando un PC) per copiare l'URL di questa pagina negli appunti del tuo computer.

Tornare alla scheda del browser che ha il plugin Page di Facebook aperto. Incolla l'URL dagli Appunti nel campo in alto a sinistra, come mostrato nello screenshot qui sotto. Per questo esempio, inseriremo il feed di Facebook della pagina aziendale Facebook di HubSpot.

3. Aggiungi le schede che desideri vengano visualizzate accanto al tuo feed incorporato.

Oltre a mostrare l'intera sequenza temporale di un profilo, il plug-in di pagina di Facebook ti consente anche di visualizzare le schede degli eventi e / o dell'account Messenger di quel profilo. Per impostazione predefinita, lo strumento Plugin di pagina avrà "timeline" inserito da solo.

Per aggiungere le schede Eventi o Messenger al tuo feed Facebook incorporato, fai clic sul campo "Schede" nell'angolo in alto a destra dello strumento Plug-in della pagina, come mostrato di seguito. Aggiungi le parole "eventi" e / o "messaggi" accanto alla parola "timeline", tutte separate da virgole.

4. Personalizza le dimensioni del tuo feed di Facebook.

Se il tuo sito web ha dimensioni specifiche che limitano le dimensioni dei contenuti multimediali che incorpori e sai quali sono queste dimensioni, inseriscile nei due campi inferiori dello strumento plug-in Pagina di Facebook. Puoi inserire una larghezza specifica nel campo a sinistra e un'altezza specifica a destra.

Per impostazione predefinita, il tuo feed di Facebook verrà visualizzato a circa 340×500, anche se vedrai le dimensioni consigliate nel testo di anteprima dello strumento.

5. Fai clic su "Ottieni codice".

Con tutti e quattro questi campi compilati, fai semplicemente clic sul pulsante blu "Ottieni codice" nella parte inferiore dello strumento, come mostrato nella schermata sopra. Questo aprirà la casella di codice mostrata sotto.

6. Fare clic sulla scheda 'IFrame'.

Fai attenzione al codice che selezioni, anche se … a meno che tu non stia codificando il tuo sito web da zero, la prima scheda (etichettata "JavaScript SDK") non non avere il codice che vuoi Passa alla scheda denominata "IFrame", come mostrato di seguito. Questo testo è pronto per l'incorporamento nel tuo blog o editor HTML del tuo sito web.

7. Copia e incolla questo codice incorporato nell'editor HTML del tuo sito web.

Copia il codice mostrato sopra nei tuoi appunti. Quindi, passa al sito Web in cui desideri incorporare questo feed di Facebook. Apri il codice sorgente del tuo sito web (alcuni sistemi di gestione dei contenuti hanno a "" icona in cui è possibile accedere a questo codice sorgente). Qui, incollerai il codice di incorporamento del feed nel tuo codice HTML esattamente dove vuoi che appaia.

8. Aggiungi e tag attorno all'intero snippet di IFrame per allineare al centro il feed.

Una volta incollato questo codice nel codice HTML, tuttavia, ti consigliamo di allineare il post al centro in modo che non appaia automaticamente spinto contro il lato sinistro o destro della pagina web. Per correggere questo, avvolgere il codice con '

Ecco come dovrebbe apparire il codice finale:

Questo è tutto! Ecco come sarà quando hai finito:

Incorpora Feed e Post Instagram

Instagram è uno dei preferiti dai marketer, ma incorporare un intero feed di Instagram può essere difficile. Ecco come incorporare un feed di Instagram e singoli post sul tuo sito web.

Il plugin WordPress di Instagram Feed

Dai creatori del Feed Facebook personalizzato arriva il Feed Instagram. Sviluppato da Smash Balloon, questo plugin WordPress rende facile per i siti web basati su WordPress di incorporare interi feed di Instagram da specifici account Instagram. Ecco come usarlo:

Secondo le istruzioni di questo plugin su WordPress, puoi visualizzare più feed di Instagram contemporaneamente inserendo il testo nel formato di: '[instagram-feed num=6 cols=3]'. In questo esempio, si incorporerebbe effettivamente sei immagini ciascuna per tre feed di Instagram separati.

Funzione di incorporamento di Instagram

Per incorporare le singole immagini di Instagram, non è necessario guardare oltre le caratteristiche native di Instagram. Ecco come farlo:

Importante: Per incorporare post Instagram specifici su un blog o un sito Web, l'account Instagram a cui appartiene non può essere impostato su privato. Per impostare un account su pubblico, accedere a questo profilo e fare clic su "Modifica profilo"> Privacy e sicurezza. Da questa pagina, deseleziona l'opzione "Account privato" e dovresti essere tutto pronto.

1. Clicca sull'immagine Instagram che vuoi incorporare.

Passa al post di Instagram che desideri incorporare nel tuo sito web e fai clic su di esso per ingrandire l'immagine. Per questo esempio, incorporeremo un'immagine dall'account cultura HubSpot, hubspotlife, come mostrato negli screenshot qui sotto.

2. Fare clic sull'icona con i puntini di sospensione ("…") nell'angolo in basso a destra del post.

Con il post nella sua vista completa, guarda in basso a destra nella sezione dei commenti. Fai clic sull'icona con i puntini di sospensione, composta da tre piccoli punti, come mostrato di seguito.

3. Seleziona "Incorpora".

Facendo clic sull'icona con i puntini di sospensione mostrata sopra si aprirà la casella delle opzioni mostrate di seguito. In questo menu, seleziona "Incorpora", il terzo pulsante dall'alto.

4. Copia e incolla il codice di incorporamento nell'editor HTML del tuo sito web.

Proprio come le istruzioni per Twitter e Facebook (elencate sopra), questo pulsante "Incorpora" produrrà un'altra casella con una puntura di testo in codice. Una volta che questa casella si apre sullo schermo, evidenzia il codice in alto, come mostrato di seguito. Quindi, fai clic sul pulsante blu "Copia codice incorporato" in basso per copiare questo testo negli appunti del tuo computer.

5. Aggiungi e tag attorno all'intero snippet HTML per allineare al centro il post.

Una volta incollato questo codice nel codice HTML, tuttavia, ti consigliamo di allineare al centro il post di Instagram in modo che non appaia automaticamente spinto contro il lato sinistro o destro della tua pagina web. Per correggere questo, avvolgere il codice con '

Questo è tutto! Ecco come sarà il tuo post Instagram incorporato:

Incorpora Pinterest Pins

1. Apri il generatore di widget di Pinterest.

2. Seleziona "Pin Widget" nella colonna di sinistra.

Scorri verso il basso fino a visualizzare l'opzione Pin Widget, come mostrato nello screenshot qui sotto.

3. Incolla l'URL del pin che desideri incorporare.

Inizia compilando il campo "URL del pin" nella parte superiore dello strumento con l'URL del pin che desideri incorporare nel tuo sito web, come mostrato di seguito.

4. Copia e incolla il codice da questa sezione nell'editor HTML del tuo sito web.

Mentre sei nel widget Pin di Pinterest, scorri verso il basso fino alla sezione appena sotto l'immagine di anteprima del tuo pin, dove troverai due righe di testo in codice, come mostrato di seguito.

Apri l'editor HTML del tuo sito web e copia e incolla la prima riga esattamente dove desideri che il tuo pin Pinterest appaia nella pagina. Quindi, copia la seconda riga di testo e incollala nell'editor HTML del tuo sito Web nella parte inferiore della pagina.

Fai attenzione a non incollare l'intero snippet più di una volta su una singola pagina web. Se vuoi che il pin appaia più volte, devi solo copiare il file primo linea di codice e incollalo ovunque desideri che appaia nella pagina. E non dimenticare di ripetere i seguenti passaggi in ogni istanza del pin che decidi di incorporare.

5. Copia lo snippet di codice fornito di seguito.

Incorpora post di Google+

1. Trova il post di Google+ che desideri incorporare. Passa il mouse sopra l'angolo in alto a destra e fai clic sulla freccia grigia che appare per visualizzare più opzioni.

2. Scegli "Incorpora Post".

3. Copia l'interezza del codice visualizzato e incollalo nella vista HTML del tuo sito web.

4. Centra il post incorporato aggiungendo e attorno allo snippet HTML completo.

Ecco come dovrebbe apparire il codice finale:

Questo è tutto! Ecco come sarà quando hai finito:

Come incorporare Google Calendar

Per incorporare un determinato Google Calendar sul tuo blog o sito web, devi utilizzare la versione web di Google Calendar anziché l'app per dispositivi mobili.

Hai aperto? Incorporiamolo.

1. Fare clic sull'icona dell'ingranaggio per aprire le impostazioni.

Nella parte superiore di Google Calendar, fai clic sull'icona a forma di ingranaggio e seleziona "Impostazioni", come mostrato di seguito.

2. Select the calendar you want to embed and scroll down to "Integrate calendar."

Once you're in your calendar settings, look to the lefthand sidebar for the specific calendar you want to embed onto your website. For this example, we'll embed HubSpot's National Holidays calendar.

Once you have your calendar selected, look to the right side of your settings and scroll down until you see the "Integrate calendar" section. (You can also simply click the option of the same name on the lefthand side under your chosen calendar.)

3. Click "Customize" and configure the size and color of your calendar.

In the "Integrate calendar" section of your settings, find and click the "Customize" button, just above the "Embed code" line of text. This will open a larger window of options where you can change the size and color scheme of your calendar before embedding it.

If you're happy with how the calendar currently looks and don't need to make any aesthetic changes, you can simply copy this embed code to your clipboard.

4. Copy your embed code at the top and paste it into your website's HTML editor.

Copy your embed code, from either inside the Customize window or from the Settings page, and paste it into your website's HTML editor. If you'd like, you can wrap this embed code in

1. Find the YouTube video you'd like to embed.

Embedding a YouTube video onto your blog or website is incredibly easy. To start, open YouTube and navigate to the video you want to embed. For this example, we'll embed a video about inbound marketing from HubSpot's INBOUND YouTube channel — as shown in the screenshots below.

2. Under the video, choose "Share."

Beneath the video itself, look for the "Share" button, as shown below.

3. In the menu that appears, choose "Embed."

Clicking the "Share" button below your chosen YouTube video will open a small menu of options where you can share the video to various social networks. To the far left of these options, however, you'll also see a circular "Embed" button. Click this button.

3. Copy the code that appears and paste it into your website's HTML editor.

The next window to appear will produce a large of box of coded text, as well as a few options to customize your video before you embed it. Under the embed code, for instance, you can set whether you want your video to start at a particular timestamp.

Once you have your settings exactly the way you want them, highlight the coded text at the top of the window. Then, click "Copy" on the bottom-right.

4. Add e tags around the entire HTML snippet to center-align your video.

Here's what the final code should look like:

Questo è tutto! Here's what it'll look like when you're done:

Embed SlideShare Presentations and Infographics

1. Find the SlideShare presentation or infographic you'd like to embed on SlideShare.net.

2. Click "Embed" in the navigation bar at the top.

2. Click "Customize."

If you want to customize your embedded SlideShare presentation or infographic, click "Customize" and the following options will appear, shown below. Choose the options you'd like, then copy the code in the "Embed" section and paste it in the HTML view of your website.

3. Center the embedded Slideshare by adding e around the whole HTML snippet.

Here's what the final code should look like: