As a digital marketing consultant, I spend a lot of time promoting website content on social media. But what about promoting your social presence via your website? Embedding enables you to do exactly that. I\u2019ll often use this tactic for video content as a way to repurpose it and increase its reach.<\/p>\n
<\/a><\/p>\n So what\u2019s the process for embedding external content<\/a> on your site? It differs slightly between platforms depending on where you\u2019re pulling the content from, but the basic steps are mostly the same.<\/p>\n Let\u2019s take a look at how to add HTML embed codes to your site and the specific steps for different platforms.<\/p>\n Table of Contents<\/strong><\/p>\n What does embed mean?<\/a> <\/a> <\/p>\n Embedded content is referenced with HTML<\/a>, one of the most basic languages used on the web to design and lay out web pages.<\/p>\n You often see this code when you’re in the \u201cback end\u201d of a blog post, for example. That\u2019s where you\u2019ll 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.<\/p>\n <\/a> <\/p>\n 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.<\/p>\n Most social and multimedia websites have an option to generate an embed code right from each individual post. Here\u2019s an example of an embed code for a HubSpot YouTube video:<\/p>\n <iframe width=\u201c560\u201d height=\u201c315\u201d src=\u201chttps:\/\/www.youtube.com\/embed\/eGUEAvNpz48\u201d title=\u201cYouTube video player\u201d frameborder=\u201c0\u201d allow=\u201caccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\u201d allowfullscreen><\/iframe><\/strong><\/p>\n And here\u2019s the embedded result.<\/p>\n Want to do the same thing on your blog posts and pages? Next, I\u2019ll go over how to generate an embed code from the most popular social sites. I\u2019ve 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.<\/p>\n <\/a> <\/p>\n Let\u2019s dive into each step in more detail.<\/p>\n\n 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.<\/p>\n Pro tip: <\/strong>A lot of website builders and CMS\u2019s 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.<\/p>\n Here\u2019s how I generate the embed code on most of the major social and content networks.<\/p>\n Here\u2019s how I embed a Facebook post:<\/p>\n First, I open Facebook on a desktop browser. 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 <\/strong>. <\/p>\n Now, I\u2019ve got the embed code copied to my clipboard and ready to be pasted in the back end of a website. <\/p>\n If I want to embed an Instagram post, it\u2019s a pretty similar process. Just remember that embedding Instagram posts is only possible from the desktop version. Here\u2019s how I do it:<\/p>\n First, I find the post I want to embed and click to open it up fully in the browser. I select the Embed<\/strong> option from the list. Once I\u2019ve hit the Copy embed code<\/strong> button, I\u2019m ready to head back to the website to embed the post. <\/p>\n If I\u2019ve 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.<\/p>\n The other reason it\u2019s 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.<\/p>\n Back to how I embed YouTube videos:<\/p>\n I click into the video I want to embed, and select Share<\/strong> from the row of options underneath the video player. <\/p>\n Embed<\/strong> is the first option on the list after clicking the Share<\/strong> button. <\/p>\n After clicking Embed,<\/strong> the video pops back up with the embed code to the right-hand side. I now have the embed code in my clipboard and ready to paste in the website editor. <\/p>\n There\u2019s 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\u2019s also a good way to quote experts without needing to contact them directly or get something custom for your post.<\/p>\n Here\u2019s how I can embed X posts:<\/p>\n First, I open the post I want to embed. Here\u2019s 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\/<\/a> in a new tab with the question \u201cWhat would you like to embed?\u201d <\/p>\n This is where I paste the link to the X post that I copied earlier from my browser bar. I click Embedded<\/strong> Post<\/strong> from the two options, but you can click Embedded<\/strong> Video<\/strong> for video content. Like Facebook, X also provides the opportunity to \u201cset customization options.\u201d I particularly like Pinterest posts for fashion, DIY, decor, cookery and recipe sites, and hobby sites. If your website is within a niche that lends itself well to Pinterest\u2019s format and audience, embedding your Pinterest posts is a great way to grow your following on the social platform.<\/p>\n Here\u2019s the process I follow for embedding a Pinterest post:<\/p>\n I open up the Pin I want to embed on the site. One of the things I like about Pinterest embed codes are the size options. It means you get the right sizing and resolution. If I\u2019m embedding the pin in a small area like sidebar content, I might choose small. But if I want a full-width image for a blog post, I would choose large. <\/p>\n Once I customize the size, I highlight the code and click Command + C <\/strong>or CTRL + C<\/strong>, depending on the device I\u2019m using. SlideShare presentations are a little dated these days \u2013 it\u2019s a long while since I\u2019ve embedded one on a website. But, you never know. So it\u2019s useful to know how, just in case.<\/p>\n Here\u2019s I grab the embed code for a SlideShare presentation.<\/p>\n I open the SlideShare presentation I want to embed. This prompts a Share this SlideShare<\/strong> box to appear over the presentation slides. At first, the field looks blank. But when I click into it, I can see the embed code. On a rare occasion, I might need to embed an external webpage. Like all embed codes, this is done using an iframe HTML tag.<\/p>\n Here\u2019s an example of what iframe HTML code looks like:<\/p>\n <iframe src=\u201curl\u201d title=\u201cdescription\u201d ><\/iframe><\/strong><\/p>\n I can use these same tags to embed an external webpage. Here\u2019s how I do it:<\/p>\n I take this entire line of code and paste it somewhere like a Notepad app: <iframe src=\u201curl\u201d title=\u201cdescription\u201d width=\u201d\u201d height=\u201d\u201d><\/iframe><\/strong><\/p>\n Then I go to the webpage I want to embed and I grab the URL from the browser bar. <\/p>\n Note: <\/strong>I\u2019ll need the entire URL, including the \u201chttps\u201d piece. I can also adjust the pixel height and width of the frame using the \u201cwidth=\u201d and \u201cheight=\u201d sections, which would look like this: <iframe src=\u201chttps:\/\/example.com\/embedded-page\u201d title=\u201cWebsite Page Title\u201d width=\u201d750\u201d height=\u201d500\u201d><\/iframe><\/strong><\/p>\n Finally, I copy the entire line of code to embed it on the website. <\/p>\n I work with a lot of different CMSs and they all work slightly differently. But the process of using the HTML block is fairly similar across the board. Here, I\u2019ll go over how you can do it in Content Hub<\/a> and WordPress<\/a>.<\/p>\n In Content Hub, although I could use the HTML editor if I wanted to, I actually don\u2019t need to in order to add embed content. Here\u2019s how it works:<\/p>\n I open up my HubSpot dashboard and go to Content > Blog<\/strong>. If I was embedding content on a website or landing page, I would go to Content > Website Pages<\/strong> or Content > Landing Pages<\/strong>, respectively. <\/p>\n Next, I find the blog post or webpage where I want to embed the content, hover over it in the list, and click on the page or post name highlighted in blue. <\/p>\n In the top editor bar above the post, I click Insert<\/strong> and select Embed<\/strong> from the dropdown menu. <\/p>\n A pop-up appears where I can either paste the embed code or enter a URL for HubSpot to embed content for me automatically. <\/p>\n Then all I need to do is paste in the code and hit Insert<\/strong>. I can click Source code,<\/strong> and the HTML of the page appears in a pop-up. <\/p>\n Then I can paste the embed code where it needs to go on the page and hit Save<\/strong> changes<\/strong>. <\/p>\n There isn\u2019t necessarily a single way to insert embed code on a WordPress site because it can depend on the template you\u2019re using. But if I\u2019m using the standard classic editor, here\u2019s how I do it.<\/p>\n First, I head to the admin area in the back end and go to either Pages <\/strong>or Posts<\/strong>. Finally, I paste the embed code where I want the embedded content to appear in the post. <\/p>\n Now all I need to do is save the page, or hit Update<\/strong> if I\u2019m on a WordPress blog, and refresh the live URL to see the embedded content on the front end.<\/p>\n There\u2019s a lot of good content out there even if it hasn\u2019t been created by me or the brand I\u2019m working with, and I find using the embed option is a great way to add depth and interest to my webpages. It helps to increase visual appeal and engagement, especially if you\u2019re embedding videos.<\/p>\n Plus, it\u2019s so easy to do. Once you\u2019ve embedded content a couple of times it quickly becomes second nature. So experiment with embedding from different social media platforms in your page or blogs and watch your user engagement grow.<\/p>\n Editor’s note: This post was originally published in September 2013 and has been updated for comprehensiveness.<\/em><\/p>\n As a digital marketing consultant, I spend a lot of time promoting website content on […]<\/p>\n","protected":false},"author":0,"featured_media":1548,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/posts\/1547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/comments?post=1547"}],"version-history":[{"count":0,"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/posts\/1547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/media\/1548"}],"wp:attachment":[{"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/media?parent=1547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/categories?post=1547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/internship.infoskaters.com\/blog\/wp-json\/wp\/v2\/tags?post=1547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n What is an embed code?<\/a>
\n How to Add HTML Embed Code to Your Site<\/a> <\/p>\n\nStep <\/strong>1:\u00a0Generate the embed code.<\/strong>
\n<\/h3>\nHow to Embed a Facebook Post<\/strong><\/h4>\n
\n I find the post that I want to embed.
\n After clicking the three dots in the top right corner of the post, a drop-down menu appears.
\n From the dropdown menu, I click Embed<\/strong>. <\/p>\nHow to Embed an Instagram Post<\/strong><\/h4>\n
\n Then I click the three dots in the top right corner of the post and out comes a pop-out dropdown menu. <\/p>\n
\n The embed code comes up with a button to copy it to my clipboard.
\n Sometimes, I want to include the caption. But a lot of times, I\u2019ll uncheck the box Include<\/strong> caption<\/strong>, especially for embedding videos. <\/p>\nHow to Embed a YouTube Video<\/strong><\/h4>\n
\n I simply click Copy<\/strong> in the bottom right corner. <\/p>\nHow to Embed an X Post<\/strong><\/h4>\n
\n Up in the browser bar, I copy the link to the post (more on this in a moment).
\n Like other platforms, I click the three dots at the top right corner of the post.
\n This opens up a list of options, including Embed<\/strong> post<\/strong>. <\/p>\n
\n I hit enter, and two options appear under \u201cHere are your display options.\u201d <\/p>\n
\n A pop-up appears underneath with the embed code and an option to Copy<\/strong> Code<\/strong>, so I click that option. <\/p>\n
\n Once I\u2019ve clicked Copy<\/strong> Code<\/strong> I can return to my website editor and embed the post. <\/p>\nHow to Embed a Pinterest Post<\/strong><\/h4>\n
\n I click the three dots on the top left, right at the end of the list of options.
\n Next I click Get Pin embed code<\/strong>. <\/p>\n
\n Now my Pin is ready to get embedded. <\/p>\nHow to Embed a SlideShare Presentation<\/strong><\/h4>\n
\n Under the presentation, I click the three dots and then select the Share <\/strong>option. <\/p>\n
\n I go to the Embed<\/strong> section underneath the social share buttons. <\/p>\n
\n The good thing about SlideShare is that I can select the size of the presentation on the left, and choose which slide the embed starts on to the right.
\n Once I\u2019m happy with those settings, I highlight the embed code and click Command + C or CTRL + C<\/strong>, depending on my device.
\n Now, I can go back to my website editor and embed the presentation directly on a website page or blog post. <\/p>\nHow to Embed an External Webpage<\/strong><\/h4>\n
\n In the space in my iframe code where it says \u201curl,\u201d I paste the full webpage URL over that text so it looks like this: <iframe src=\u201chttps:\/\/example.com\/embedded-page\u201d title=\u201cEmbedded Page Title\u201d width=\u201d\u201d height=\u201d\u201d><\/iframe><\/strong><\/p>\n\nStep <\/strong>2: Access your content management system and paste the embed code in your HTML viewer.<\/strong>
\n<\/h3>\nInserting Embed Code onto a Content Hub Site<\/strong><\/h4>\n
\n If I wanted to add the embed directly in the source code, I would click Advanced<\/strong> from the editor bar. <\/p>\nInserting Embed Code in a WordPress Site<\/strong><\/h4>\n
\n Then I click the title of the post or hover over it and click the Edit<\/strong> option that appears underneath the title to open up the post editor.
\n Next, I click on the Text <\/strong>tab on the upper right-hand corner of the text editor. <\/p>\nStep 3:\u00a0Finished! You have successfully embedded content on your website or blog.<\/strong><\/h3>\n
Add embedded content to increase user engagement.<\/strong><\/h2>\n