How to add HTML dating codes to your website (Schnellt tip)

As a consultant for digital marketing, I spend a lot of time to promote website content on social media. But what about promoting your social presence on your website? You can do exactly that by embeding. I will often use this tactic for video content to reuse it and increase its reach.

What is the process of embedding external content on your website? It differs slightly between platforms, depending on where they pull the content from, but the basic steps are usually the same.

Let’s take a look at how you can add HTML -embed codes to your website and the specific steps for different platforms.

Table of contents

Entered content is designated with HTML, one of the most basic languages used on the web to design and design websites.

You often see this code when you are, for example, in the “back” of a blog post. Here you add your embedding code. Most website editors, from WordPress topics to Drag & Drop Builder, have HTML blocks that you can place on a blog post or website page to insert the HTML code.

What is a embedding code?

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

I often use embedding codes to embed contributions from X or LinkedIn as a quick and easy way to add blog content, for example, the dimensions for the guidance of thought.

Most social and multimedia websites have the opportunity to generate a embedding code directly from each individual contribution. Here is an example of an embedding code for a Drift Kings Media YouTube video:

https://www.youtube.com/watch?v=egueavnpz48 ”

And here is the embedded result.

Would you like to do the same on your blog post and sides? Next I will pass how I can generate a embedding code from the most popular social websites. I found that the steps as soon as you know how to do this on a platform is very easy to replicate, where a embedding with small variations is available.

How to add to your website HTML dating code

1. Go to the social contribution, video or website that you would like to embed.
2. Generate the embedding code with the options of the post.
3. If necessary, specify the embedding post, e.g. B. the height and width of the element.
4. Mark the embedding code and then copy it into your clipboard.
5. Open your HTML viewer in your content management system.
6. Insert the HTML snippet, which you have just copied to your HTML viewer window. Then click on “Ok” or “Save”.
7. Complete! You have now embedded content into your website or blog.

Let us immerse yourself in more detail in every step.

Step 1: Generate the embedding code.

Before I embed external content, I first have to generate a bedding code for the post or the page that I would like to embed on a website.

Pro tip: Many website builders and CMS enable you to simply insert the link into the article and automatically embed it without calling up the embedding code. However, this varies from one platform to another.

So I generate the embedding code in most important social and content networks.

How to embed a Facebook post

So I embedded a Facebook post:

• First I open Facebook in a desktop browser.
• I find the post that I want to embed.
• After clicking on the three points in the upper right corner of the post, a dropdown menu is displayed.
• In the dropdown menu I click click on Embed.

• A popup is displayed and I have the option of taking the full contribution and access to extended settings. The extended settings are mainly suitable for people with advanced know-how who want to adapt the width of the post. For beginners I recommend leaving it alone and just clicking Copy code .

• Now I have copied the embedding code into my clipboard and I am ready to be inserted at the back of a website.

So embed an Instagram contribution

If I want to embed an Instagram contribution, this is a fairly similar process. Remember that embedding from Instagram post is only possible from the desktop version. So I do it:

• First of all, I find the post that I want to embed, and click to open it in the browser completely.
• Then I click on the three points in the upper right corner of the article and come from a pop-out dropdown menu.

• I choose that Embed Option from the list.
• The embedding code creates a button to copy it into my clipboard.
• Sometimes I would like to include the lettering. But I will often deactivate the box Contain SubtitleEspecially to the embedding videos.

• As soon as I met them Copy the embedding code Button, I am ready to return to the website to embed the post.

So embed a YouTube video

If I have spent a lot of time to put together video content for a YouTube channel, I would like to make sure that it is considered as much as possible. Setting up YouTube videos is one of the most common ways that I use the one -bed functionality. In this way, my video content for website users can be accessible to expand its reach.

The other reason is it good to embed videos? It saves a lot of bandwidth for a website. Videos are usually very large files. If you upload it directly to a website, you can drastically slow down page loading times. So if you want videos on your website, I recommend using a platform like YouTube or Vimeo.

Back to the embedding of YouTube videos:

• I click in the video I want to embed and choose share From the series of options under the video player.

• Embed is the first option in the list after you have clicked on clicking share Button.

• After clicking Embed, The video is reappeared on the right side with the embedding code.
• I just click copy In the lower right corner.

• I now have the embedding code in my clipboard and ready to insert into the website editor.

How to embed an X Post

There are a lot of useful thought leaders on X, and I like to embed tweets in the editorial or blog content to increase authority and social proof. This is also a good way to quote experts without having to contact them directly or to receive some habit for their contribution.

So I can embed X contributions:

• First I open the post that I want to embed.
• In the browser bar I copy the link to the post (more about this at a moment).
• As with other platforms, I click on the three points in the upper right corner of the post.
• This opens up a list of options, including Embed post.

• Here the process on X becomes a little more complex than it has to be. When I click on the bed, the website opens https://publish.twitter.com/ In a new tab with the question “What do you want to embed?”

• Here I add the link to the X -Post, which I used to be copied out of my browser bar.
• I hit the entry button and two options are displayed under “Here are your advertising options”.

• I click Embedded post From the two options, but you can click Embedded video For video content.
• A popup appears with the embedding code and an option copy codeSo I click on this option.

• Like Facebook, X also offers the opportunity to “set adjustment options”.
• As soon as I clicked copy code I can return to my website editor and embed the post.

How to embed a Pinterest post

I particularly like Pinterest contributions for fashion, DIY, decorative, cooking and recipe locations as well as hobby sites. If your website is in a niche that is well suited for the format and the public of Pinterest, embedding your Pinterest contributions is a great way to expand your followers on the social platform.

Here is the process that I follow to embed a pinterest contribution:

• I open the pen that I want to embed on the page.
• I click on the three points at the top left, right at the end of the list of options.
• Next I click Get PIN cosory code.

• One of the things I like in Pinterest codes are the size options. It means that you get the right size and solution. If I embed the pen into a small area such as the sidebar content, I can choose small. But if I want a picture with full width for a blog post, I would choose big.

• As soon as I have adjusted the size, I mark the code and I click Command + C or Ctrl + CDepending on the device I use.
• Now my pen is ready to be embedded.

How to embed a Slideshare presentation

Slideshare presentations are a little out of date these days – it has long since embedded one on a website. But you never know. So it is useful to know how, only in the case.

Here I grab the embedding code for a Slideshare presentation.

• I open the Slideshare presentation that I want to embed.
• Under the presentation I click on the three points and then select them share Option.

• This demands A Share this dialyhare Box to appear over the presentation films.
• I go to Embed Section under the buttons for social stocks.

• First the field looks empty. But when I click on it, I can see the embedding code.
• The good thing about Slideshare is that I can select and select the size of the presentation on the left, which sliding the embedding begins on the right.
• As soon as I am satisfied with these settings, I mark the embedding code and click click Command + C or Ctrl + CDepending on my device.
• Now I can return to my website editor and embed the presentation directly on a website or blog post.

How to embed an external website

In rare cases, I may have to embed an external website. Like all embedding codes, this is done with an iframe -HTML day.

Here is an example of what IFRAME HTML code looks like:

I can use the same tags to embed an external website. So I do it:

• I take this entire code line and add it somewhere like a Notepad app:
• Then I go to the website that I want to embed and take the URL out of the browser bar.
• Note: I need the entire URL, including the piece “https”.
• In the room in my iFrame code, in which it is “URL”, I insert the full websites about this text so that it looks like this:
• I can also set the pixel height and the width of the frame with the sections “Width =” and “Height =”, which would look like this:
• Finally I copy the entire code line to embed it into the website.

Step 2: access your content management system and insert the embedding code in your HTML viewer.

I work with many different CMS and all work a little differently. However, the process of using the HTML block is very similar. Here I will go beyond how you can do it Content Hub and WordPress.

Inserting the embedding code into a content hub site

In Content Hub I have to use the HTML editor if I wanted, I don’t really have to add to the content. This is how it works:

• I open my hubspot dashboard and go to Content> Blog. If I were embedded content on a website or a target page, I would go Content> Website pages or Content> target pagesrespectively.

• Next I find the blog post or the website on which I would like to embed the content via it into the list and click on the page or the post name, which was highlighted in blue.

• In the upper editor strip above the post, click I click Insert and select Embed From the dropdown menu.

• A popup is displayed where I can either insert the embedding code or enter a URL so that HubSpot automatically embeds the content for me.

• Then I just have to insert and press the code Insert.
• If I wanted to add the embedding directly to the source code, I would click Progressive From the editor strip.

• I can click Source code, And the HTML of the page appears in a pop-up.

• Then I can insert the embedding code in which it has to go to the side and press Save Changes.

Inserting the embedding code into a WordPress site

There is not necessarily one way to insert the embedding code on a WordPress site, as it can depend on the template you use. But when I use the standard classical editor, I do it that way.

• First I go to the administrator area in the back and go to both Pages or Contributions.
• Then I click on the title of the contribution or hover over it and click on the Edit Option that is displayed under the title to open the Post editor.
• Next I click on that text Tab in the upper right corner of the text editor.

• Finally, I add the embedding code in which the embedded content is displayed in the article.

Step 3: done! You have successfully embedded content on your website or blog.

Now I just have to save or click the page Update When I am in a WordPress blog and update the Live URL to see the embedded content at the front end.

Add embedded content to increase users’ commitment.

There are many good content out there, even if I or the brand I work with was not created, and I think that the use of the decorative option is a great way to give my websites depth and interest. It helps to increase visual attraction and commitment, especially if you embed videos.

It is also so easy to do. As soon as you have embedded content a few times, it quickly becomes a second nature. So experiment with the embedding of various social media platforms in your page or blogs and see how your user engagement grows.

Note from the publisher: This post was originally published in September 2013 and updated for completeness.