add HTML embed codes to your web site [quick tip]

As a digital advertising and marketing advisor, I spend a whole lot of time selling web site content material on social media. However what about selling your social presence by way of your web site? Embedding lets you do precisely that. I’ll typically use this tactic for video content material as a strategy to repurpose it and improve its attain.

So what’s the method for embedding exterior content material in your website? It differs barely between platforms relying on the place you’re pulling the content material from, however the primary steps are largely the identical.

Let’s check out tips on how to add HTML embed codes to your website and the particular steps for various platforms.

Desk of Contents

Embedded content material is referenced with HTML, one of the most basic languages used on the web to design and lay out web pages.

You often see this code when you’re in the “back end” of a blog post, for example. That’s where you’ll add your embed code. Most website editors, from WordPress themes to drag-and-drop builders, will have HTML blocks available that you can place on a blog post or website page to paste the HTML code.

What is an embed code?

An embed code is a block of HTML code that is placed in another page and renders a visual element — a video, social media post, form, or page — from another website or source. You can embed YouTube videos, X posts, GIFs, and other multimedia objects on another website.

I frequently use embed codes to embed posts from X or LinkedIn as a quick and easy way to add thought leadership dimensions to blog content, for example.

Most social and multimedia websites have an option to generate an embed code right from each individual post. Here’s an example of an embed code for a HubSpot YouTube video:

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

And here’s the embedded result.

Want to do the same thing on your blog posts and pages? Next, I’ll go over how to generate an embed code from the most popular social sites. I’ve found that, once you know how to do this on one platform, the steps are very easy to replicate anywhere embedding is available with small variations.

How to Add HTML Embed Code to Your Site

1. Go to the social post, video, or webpage you’d like to embed.
2. Generate the embed code using the post’s options.
3. If applicable, customize the embed post, such as the height and width of the element.
4. Highlight the embed code, then copy it to your clipboard.
5. In your content management system, open up your HTML viewer.
6. Paste the HTML snippet you just copied into your HTML viewer window. Then click ‘OK’ or ‘Save.’
7. Finished! You have now embedded content onto your website or blog.

Let’s dive into each step in more detail.

Step 1: Generate the embed code.

Before I embed external content, I first have to generate an embed code for the post or page I want to embed on a website.

Pro tip: A lot of website builders and CMS’s allow you to simply paste the link to the post and automatically embed it without having to go get the embed code. But this varies from one platform to another.

Here’s how I generate the embed code on most of the major social and content networks.

How to Embed a Facebook Post

Here’s how I embed a Facebook post:

• First, I open Facebook on a desktop browser.
• I find the post that I want to embed.
• After clicking the three dots in the top right corner of the post, a drop-down menu appears.
• From the dropdown menu, I click Embed.

• A pop-up appears, and I have the option to include the full post and access advanced settings. The advanced settings are mainly for people with more advanced know-how who want to adjust the width of the post. For beginners, I recommend leaving that alone and simply clicking Copy Code .

• Now, I’ve got the embed code copied to my clipboard and ready to be pasted in the back end of a website.

How to Embed an Instagram Post

If I want to embed an Instagram post, it’s a pretty similar process. Just remember that embedding Instagram posts is only possible from the desktop version. Here’s how I do it:

• First, I find the post I want to embed and click to open it up fully in the browser.
• Then I click the three dots in the top right corner of the post and out comes a pop-out dropdown menu.

• I select the Embed option from the list.
• The embed code comes up with a button to copy it to my clipboard.
• Sometimes, I want to include the caption. But a lot of times, I’ll uncheck the box Include caption, especially for embedding videos.

• Once I’ve hit the Copy embed code button, I’m ready to head back to the website to embed the post.

How to Embed a YouTube Video

If I’ve spent a lot of time putting together video content for a YouTube channel, I want to make sure it gets seen as much as possible. So, embedding YouTube videos is one of the most frequent ways I use the embed functionality. It makes my video content accessible to website users to expand its reach.

The other reason it’s good to embed videos? It saves a ton of bandwidth for a website. Videos tend to be very large files. Uploading them directly to a website can drastically slow down page load times. So, if you want videos on your website, I recommend using a platform like YouTube or Vimeo to do so.

Back to how I embed YouTube videos:

• I click into the video I want to embed, and select Share from the row of options underneath the video player.

• Embed is the first option on the list after clicking the Share button.

• After clicking Embed, the video pops back up with the embed code to the right-hand side.
• I simply click Copy in the bottom right corner.

• I now have the embed code in my clipboard and ready to paste in the website editor.

How to Embed an X Post

There’s a lot of useful thought leadership on X, and I like to embed tweets throughout editorial or blog content to boost authority and social proof. It’s also a good way to quote experts without needing to contact them directly or get something custom for your post.

Here’s how I can embed X posts:

• First, I open the post I want to embed.
• Up in the browser bar, I copy the link to the post (more on this in a moment).
• Like other platforms, I click the three dots at the top right corner of the post.
• This opens up a list of options, including Embed post.

• Here’s where the process on X gets a little more complex than it probably needs to be. When I click embed, the website opens up https://publish.twitter.com/ in a brand new tab with the query “What would you prefer to embed?”

• That is the place I paste the hyperlink to the X submit that I copied earlier from my browser bar.
• I hit enter, and two choices seem below “Listed below are your show choices.”

• I click on Embedded Publish from the 2 choices, however you possibly can click on Embedded Video for video content material.
• A pop-up seems beneath with the embed code and an choice to Copy Code, so I click on that possibility.

• Like Fb, X additionally offers the chance to “set customization choices.”
• As soon as I’ve clicked Copy Code I can return to my web site editor and embed the submit.

Embed a Pinterest Publish

I notably like Pinterest posts for style, DIY, decor, cookery and recipe websites, and pastime websites. In case your web site is inside a distinct segment that lends itself effectively to Pinterest’s format and viewers, embedding your Pinterest posts is an effective way to develop your following on the social platform.

Right here’s the method I observe for embedding a Pinterest submit:

• I open up the Pin I need to embed on the location.
• I click on the three dots on the highest left, proper on the finish of the listing of choices.
• Subsequent I click on Get Pin embed code.

• One of many issues I like about Pinterest embed codes are the dimensions choices. It means you get the suitable sizing and backbone. If I’m embedding the pin in a small space like sidebar content material, I would select small. But when I desire a full-width picture for a weblog submit, I’d select giant.

• As soon as I customise the dimensions, I spotlight the code and click on Command + C or CTRL + C, relying on the gadget I’m utilizing.
• Now my Pin is able to get embedded.

Embed a SlideShare Presentation

SlideShare shows are somewhat dated lately – it’s a protracted whereas since I’ve embedded one on a web site. However, you by no means know. So it’s helpful to understand how, simply in case.

Right here’s I seize the embed code for a SlideShare presentation.

• I open the SlideShare presentation I need to embed.
• Beneath the presentation, I click on the three dots after which choose the Share possibility.

• This prompts a Share this SlideShare field to seem over the presentation slides.
• I’m going to the Embed part beneath the social share buttons.

• At first, the sector appears to be like clean. However after I click on into it, I can see the embed code.
• The benefit of SlideShare is that I can choose the dimensions of the presentation on the left, and select which slide the embed begins on to the suitable.
• As soon as I’m proud of these settings, I spotlight the embed code and click on Command + C or CTRL + C, relying on my gadget.
• Now, I can return to my web site editor and embed the presentation straight on a web site web page or weblog submit.

Embed an Exterior Webpage

On a uncommon event, I would have to embed an exterior webpage. Like all embed codes, that is carried out utilizing an iframe HTML tag.

Right here’s an instance of what iframe HTML code appears to be like like:

<iframe src=“url” title=“description” ></iframe>

I can use these similar tags to embed an exterior webpage. Right here’s how I do it:

• I take this complete line of code and paste it someplace like a Notepad app: <iframe src=“url” title=“description” width=”” top=””></iframe>
• Then I’m going to the webpage I need to embed and I seize the URL from the browser bar.
• Notice: I’ll want all the URL, together with the “https” piece.
• Within the area in my iframe code the place it says “url,” I paste the complete webpage URL over that textual content so it appears to be like like this: <iframe src=“https://instance.com/embedded-page” title=“Embedded Web page Title” width=”” top=””></iframe>
• I may regulate the pixel top and width of the body utilizing the “width=” and “top=” sections, which might appear to be this: <iframe src=“https://instance.com/embedded-page” title=“Web site Web page Title” width=”750” top=”500”></iframe>
• Lastly, I copy all the line of code to embed it on the web site.

Step 2: Entry your content material administration system and paste the embed code in your HTML viewer.

I work with a whole lot of completely different CMSs and so they all work barely in another way. However the means of utilizing the HTML block is pretty related throughout the board. Right here, I’ll go over how you are able to do it in Content Hub and WordPress.

Inserting Embed Code onto a Content material Hub Web site

In Content material Hub, though I may use the HTML editor if I wished to, I truly don’t have to so as to add embed content material. Right here’s the way it works:

• I open up my HubSpot dashboard and go to Content material > Weblog. If I used to be embedding content material on a web site or touchdown web page, I’d go to Content material > Web site Pages or Content material > Touchdown Pages, respectively.

• Subsequent, I discover the weblog submit or webpage the place I need to embed the content material, hover over it within the listing, and click on on the web page or submit title highlighted in blue.

• Within the high editor bar above the submit, I click on Insert and choose Embed from the dropdown menu.

• A pop-up seems the place I can both paste the embed code or enter a URL for HubSpot to embed content material for me mechanically.

• Then all I have to do is paste within the code and hit Insert.
• If I wished so as to add the embed straight within the supply code, I’d click on Superior from the editor bar.

• I can click on Supply code, and the HTML of the web page seems in a pop-up.

• Then I can paste the embed code the place it must go on the web page and hit Save adjustments.

Inserting Embed Code in a WordPress Web site

There isn’t essentially a single strategy to insert embed code on a WordPress website as a result of it might rely on the template you’re utilizing. But when I’m utilizing the usual basic editor, right here’s how I do it.

• First, I head to the admin space within the again finish and go to both Pages or Posts.
• Then I click on the title of the submit or hover over it and click on the Edit possibility that seems beneath the title to open up the submit editor.
• Subsequent, I click on on the Textual content tab on the higher right-hand nook of the textual content editor.

• Lastly, I paste the embed code the place I would like the embedded content material to seem within the submit.

Step 3: Completed! You will have efficiently embedded content material in your web site or weblog.

Now all I have to do is save the web page, or hit Replace if I’m on a WordPress weblog, and refresh the reside URL to see the embedded content material on the entrance finish.

Add embedded content material to extend consumer engagement.

There’s a whole lot of good content material on the market even when it hasn’t been created by me or the model I’m working with, and I discover utilizing the embed possibility is an effective way so as to add depth and curiosity to my webpages. It helps to extend visible enchantment and engagement, particularly when you’re embedding movies.

Plus, it’s really easy to do. When you’ve embedded content material a few instances it rapidly turns into second nature. So experiment with embedding from completely different social media platforms in your web page or blogs and watch your consumer engagement develop.

Editor’s be aware: This submit was initially revealed in September 2013 and has been up to date for comprehensiveness.