How to Add HTML Embed Codes to Your Website [Quick Tip]

If you want to curate others ‘ subject from social media or equitable make your own ocular social media message study hard for your overall content strategy, you need to know how to embed HTML code onto your web log or web site. → Click here to download our free guide to digital marketing fundamentals  [Download Now].
But wait a second … before we get into the kernel of this tiptoe, what the heck does “ embed ” mean ? And what is HTML ? If you do n’t know how to code at all, no worries — embedding external capacity is extremely easy. Let ‘s take a second gear to break down the basics .

What does embed mean?

Embed means to integrate external content into another web site or page. You embed something when you place a block of code — called an embed code — into the HTML editor of another web site. When you hit ‘ Save ’ or ‘ Publish, ’ the media then renders on the published foliate .
Embedded subject is referenced with HTML. HTML is one of the most basic languages used on the network to design and lay out vane pages.

You much see this code when you ‘re in the “ back end ” of your blog mail. There ’ second where you ’ ll add your embed code .

What is an embed code?

An embed code is a freeze of HTML that is placed in another page and renders a ocular element — a video, sociable media mail, form, or page — from another web site or source. You can embed YouTube videos, Twitter posts, GIFs, and early multimedia objects on another web site .
Most social and multimedia websites have an option to generate an implant code good in each individual post. hera ’ s an exercise of an implant code for a HubSpot YouTube video :

 

And hera ’ s the embed solution .
Want to do the same thing on your web log posts and pages ? Let ’ s go over how you can generate an embed code for the top social sites .

How to Add HTML Embed Code to Your Site

  1. Go to the social post 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.

Below, we cover these steps in more contingent for each platform. In general, you ’ ll want to :

  1. Generate the embed code.
  2. Access your content management system and paste the embed code in your HTML viewer.
  3. Finished! You have embedded content into your website or blog.

Let ’ s dive into each step .

1. Generate the embed code.

Before embedding external subject, you must first generate an implant code for the post or page you want to embed on your web site .
We ’ ll go over how you can do that on most of the major social and content networks .

Embed a Facebook Post

To embed a Facebook post, do the pursue :

  • Navigate to Facebook on your desktop browser and go to the post that you’d like to embed.
  • Click on the three dots on the upper right-hand corner of the post.
  • On the drop-down menu, click Embed.

Embed code button on a Facebook post

  • A pop-up will appear, where you have the option to include the full post and access advanced settings. For beginners, we recommend leaving the options as they are and simply clicking Copy Code.

Embed code options on a Facebook post

  • Finished! You’ve got your embed code.

Embed an Instagram Post

Want to embed an Instagram post ? The summons is exchangeable to Facebook ’ south. note that you can only embed posts from the background translation and not the fluid app .

  • Click the three dots in the upper right-hand corner of the post.
  • A popup will come up with several options. Click Embed, the second-to-last option.

embed-instagram-post

  • A pop-up will come up with your embed code. You have the option of including or excluding the caption.
  • After you’ve finished customizing your options, click Copy Embed Code.

Copy embed code pop-up on Instagram

  • Complete! You’ve got your Instagram embed code.

Embed a YouTube Video

YouTube videos can take your web log posts to the next level, and the best part is that you can embed its wealth of capacity on your blog posts for absolve .
To do sol, take the following steps :

  • Navigate to the video that you’d like to embed on your website.
  • Under the video, next to where the likes are located, click Share.

Share button under a YouTube video

  • A pop-up will come up with several options, including sharing the post to other social networks. Click Embed.

Share options for a YouTube video

  • YouTube will create an embed code, which you can customize. You can start the video at a certain point or hide the player controls.
  • After choosing your options, click Copy on the lower right-hand corner of the pop-up.

Generated embed code for a YouTube video

  • Complete! Your YouTube video is ready to get embedded.

Embed a Tweet

If you embed a Tweet on your web site pages or web log, you can generate betrothal for your Twitter profile without relying on your chirrup followers. web site visitors can engage with your Twitter content, besides .
To embed a Twitter post, do the follow :

  • On a desktop browser, navigate to the post that you’d like to embed.
  • Click on the three dots on the upper right-hand corner of the post.
  • A drop-down menu will appear. Click Embed Tweet.

Embed Tweet button on Twitter

  • Twitter will take you to an external page on publish.twitter.com, where you can then further customize the look of the Tweet before embedding it on your site. For instance, you can set it to dark mode and change the display language of the Tweet.

Options for embedding a Tweet

  • Once you’ve customized it, click Update.
  • Click Copy Code.
  • Finished! The Tweet is ready to embed on your site.

There ’ s another way to generate an embed code for Twitter. Go to publish.twitter.com and insert the URL of the post that you ’ d like to embed. Twitter will then generate the embed code, and you can customize it using the like serve as the last method .

Embed a Pinterest Post

Embedding a Pinterest post can lead web site users back to your Pinterest profile and avail you grow your Pinterest following. To get started, do the follow :

  • Navigate to the Pinterest post you’d like to embed.
  • Click on the three dots right next to the image (or under the image, if you’re using the mobile website).
  • On the drop-down menu, click Get Pin embed code.

'Get Pin embed code' button on a Pin

  • A pop-up will appear with the embed code. You have the option of creating a small, medium, large, or extra-large embedded pin.

Generated embed code for a pin on Pinterest

  • Once you customize the size, highlight the code and click Command + C or CTRL + C.
  • Finished! Your Pin is ready to get embedded.

Embed a SlideShare Presentation

While SlideShare presentations are not as democratic these days, they can still be a handy multimedia tool for spicing up web log posts and pages. here ’ s how to embed a SlideShare presentation :

  • Go to the SlideShare presentation you’d like to embed.
  • Click Share under the presentation.
  • In the same window where the presentation appears, you’ll see the option to share it via social channels. The embed code will be underneath that.

Share SlideShare options with an embed code

  • Choose the size of the embed window and which slide you’d like the presentation to start on.
  • Highlight the embed code and click Command + C or CTRL + C.
  • Ready! You can now embed the SlideShare presentation in a web page or post.

Embed an External Webpage

Don ’ thyroxine want to embed a social military post but quite a web page ? You can embed an external network page using the iframe HTML tag .
All embed codes, including the ones for social sites, function iframe tag. This is what they look like :

 

You can use these like tag to embed an external web page. here ’ mho how :

  • Navigate to the webpage you’d like to embed into your site.
  • Open up the notepad app on your computer. Paste the following code into it:
 

  • Return to the webpage and copy the URL.
  • Paste the entire URL where it says url in your iframe code. Don’t forget to include https:// at the beginning of your URL and to place the link inside the quote marks. Here’s what your code should look like:
 

  • Change the width and height of the frame if desired.
 

  • Copy the entire line of code. After, the webpage is ready to get embedded on your website.

2. Access your content management system and paste the embed code in your HTML viewer.

Although every CMS is unlike, you can probably find the HTML viewer with alike steps. We ’ ll go over how you can do it in CMS Hub and WordPress .

CMS Hub

In CMS Hub, you actually don ’ t need to add your embed contented using the HTML editor ( although you have the choice to ). hera ’ s how :

  • In your HubSpot dashboard, navigate to Marketing > Website > Blog. If you’re planning to add the code to a website page, navigate to Marketing > Website > Website Pages.

Blog and Website Pages buttons on the HubSpot CMS

  • Find the post or page that you’d like to add the embed code to. Hover over it, then click Edit.

cms-hub-website-page-list

  • Click into the module where you’d like to add the embed code. An options bar will appear near the top of the screen. In the right-hand side, click Insert.
  • Choose Embed from the drop-down menu.

Embed button on the HubSpot CMS

  • A pop-up will appear. Paste the iframe code into the text bar.

Insert embed pop-up in the HubSpot CMS

  • Click Insert.
  • Finished! You can edit the width and height of the embed content to customize it further.

To access the HTML editor, complete steps 1-3 above. On the top options bar, click Advanced > Source Code. You can then paste your implant code manually. note that the end result is the same .

WordPress

To paste an embed code into your WordPress web site, use the following steps :

  • Access your admin area and go to either Pages or Posts.
  • Click the title of the post that you want to add the embed code to. This action will take you to the post editor.
  • Click the Text tab on the upper right-hand corner of the text editor.

WordPress plain text editor

  • Paste your embed code where you want the module to appear.

3. Finished! You have embedded content onto your website or blog.

once you reload the page, your embedded social post will appear.

Add Embedded Content to Increase User Engagement

By embedding external content on your pages and posts, you can increase date on your web site and get your web site visitors to interact with the subject you post on social media. The best contribution is that it ’ sulfur easy to do — plainly generate the embed code, paste it into your HTML editor program, and watch your exploiter betrothal turn .
Editor ‘s bill : This post was originally published in September 2013 and has been updated for breadth .
New Call-to-action

reservoir : https://thefartiste.com
Category : Tech

About admin

I am the owner of the website thefartiste.com, my purpose is to bring all the most useful information to users.

Check Also

articlewriting1

Manage participants in a zoom meeting webinar

Call the people who attend the meet as follows Alternate host host Who scheduled the …

Leave a Reply

Your email address will not be published.