Home EDUCATION How to add HTML embed codes to your website

How to add HTML embed codes to your website [Quick Tip]

0
How to add HTML embed codes to your website [Quick Tip]

If you want to manage others’ content from social media or just create your own content visual social media content Working harder for your overall content strategy, you need to know how to embed HTML code into your blog or website.

But hold on… before we get to the crux of this tip, what the heck does “enclose” mean? And what is HTML? If you don’t know how to code at all, don’t worry – embed external content is extremely simple. Let’s take a moment to break the basics.

What does embedding mean?

Embedding means integrating external content into another website or page. You embed something when you put a block of code — called an embed code — into another website’s HTML editor. When you click ‘Save’ or ‘Publish’, the media will be displayed on the published page.

Embedded content is referenced by HTML. HTML is one of the most basic languages ​​used on the web to design and format web pages.

You will often see this code when you are in the “backend” of your blog post. There you add your embed code.

Most social and multimedia websites have an option to generate an embed code in each individual post. Here’s an example 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 on your blog posts and pages? Let’s see how to generate an embed code for the best social sites.

Below we discuss these steps in more detail for each platform. In general you want:

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

Let’s dive into each step.

1. Generate the embed code.

Before embedding external content, you must first generate an embed code for the post or page you want to embed on your website.

We’ll cover how to do that on most major social and content networks.

Embedding a Facebook Post

To embed a Facebook post, do the following:

  • Navigate to Facebook in your desktop browser and locate the post you want to embed.
  • Click on the three dots in the top right corner of the message.
  • In the drop-down menu, click Integrate.

Embed code button in a Facebook post

  • A pop-up will appear giving you the option to record the entire message and access advanced settings. For beginners, we recommend leaving the options as they are and just clicking Copy code.

Options for embedding code in a Facebook post

  • Finished! You have your embed code.

Embedding an Instagram Post

Want to embed an Instagram post? The process is similar to that of Facebook. Note that you can only embed messages from the desktop version and not the mobile app.

  • Click on the three dots in the top right corner of the message.
  • A pop-up will appear with several options. Click Integrate, the penultimate option.

embed-instagram post

  • A popup will appear with your embed code. You have the option to include or exclude the caption.
  • After you’re done adjusting your options, click Copy the embed code.

Copy embed code popup on Instagram

  • Complete! You have your Instagram embed code.

Embed a YouTube video

YouTube videos can take your blog posts to the next level, and the best part is that you can embed the wealth of content in your blog posts for free.

To do this, take the following steps:

  • Navigate to the video you want to embed on your website.
  • Click below the video, next to where the likes are located Part.

Share button below a YouTube video

  • A pop-up will appear with several options, including sharing the post with other social networks. Click Integrate.

Sharing options for a YouTube video

  • YouTube creates an embed code that you can customize. You can start the video at any point or hide the player controls.
  • After choosing your options, click To copy in the lower right corner of the popup.

Generated embed code for a YouTube video

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

Embed a Tweet

By embedding a Tweet on your website pages or blog, you can generate engagement for your Twitter profile without depending on your Twitter followers. Website visitors can also participate in your Twitter content.

To embed a Twitter post, follow these steps:

  • In a desktop browser, navigate to the message you want to embed.
  • Click on the three dots in the top right corner of the message.
  • A drop-down menu will appear. Click Embed Tweet.

Embed Tweet Button on Twitter

  • Twitter takes you to an external page publish.twitter.com, where you can further customize the look of the Tweet before embedding it on your site. For example, you can put it in dark mode and change the display language of the Tweet.

Options for embedding a Tweet

  • Once you’ve customized it, click Update.
  • Click Copy the code.
  • Finished! The Tweet is ready to be embedded into your site.

There is another way to generate an embed code for Twitter. Go to publish.twitter.com and enter the URL of the message you want to embed. Twitter then generates the embed code and you can customize it using the same process as the last method.

Embedding a Pinterest Post

Embedding a Pinterest post can direct website users back to your Pinterest profile and help you grow your Pinterest following. To get started, follow these steps:

  • Navigate to the Pinterest post you want to embed.
  • Click on the three dots next to the image (or below the image, if you’re using the mobile website).
  • In the drop-down menu, click Get Pin Embed Code.

'Get pin embed code' button on a pin

  • A popup will appear with the embed code. You have the option to create a small, medium, large or extra large embedded pin.

Generated embed code for a Pin on Pinterest

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

Embedding a SlideShare presentation

Although SlideShare presentations are not as popular these days, they can still be a useful multimedia tool to spice up blog posts and pages. To embed a SlideShare presentation, do the following:

  • Go to the SlideShare presentation you want to embed.
  • Click Part under the presentation.
  • In the same window where the presentation appears, you’ll see the option to share it via social channels. Below that is the embed code.

Share SlideShare options with an embed code

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

Embedding an external web page

Don’t want to embed a social post, but rather a webpage? You can embed an external web page using the iframe HTML tag.

All embed codes, including those for social sites, use iframe tags. This is what they look like:


<frame src="https://blog.hubspot.com/marketing/url" title="description" ></iframe>

You can use the same tags to embed an external web page. Here’s how:

  • Navigate to the web page you want to embed in your site.
  • Open the Notepad app on your computer. Paste the following code into it:

<iframe src="https://blog.hubspot.com/marketing/url" title="description" width=”” height=””></iframe>
  • Go back to the web page and copy the URL.
  • Paste the full URL where it is url in your iframe code. Don’t forget to mention https:// at the beginning of your URL and to put the link in quotes. This is what your code should look like:

<iframe src="https://example.com/embedded-page" title="Embedded Page Title" width=”” height=””></iframe>
  • If desired, change the width and height of the frame.

<iframe src="https://example.com/embedded-page" title="Website Page Title" width=”750” height=”500”></iframe>
  • Copy the entire line of code. After that, the web page is ready to be embedded on your website.

2. Open your content management system and paste the embed code into your HTML viewer.

While every CMS is different, you can probably find the HTML viewer with similar steps. We will discuss how to do it in CMS hub and WordPress.

CMS hub

In CMS Hub, you don’t need to add your embedded content using the HTML editor (although you have the option to do so). Here’s how:

  • In your HubSpot dashboard, navigate to: Marketing > Website > blog. If you plan to add the code to a website page, go to Marketing > Website > Website pages.

Buttons for blog and website pages on the HubSpot CMS

  • Find the post or page you want to add the embed code to. Hover over it and then click Editing.

cms-hub-website-page-list

  • Click in the module where you want to add the embed code. An options bar will appear at the top of the screen. Click on the right side Insert.
  • To elect Integrate from the drop-down menu.

Embed button on the HubSpot CMS

  • A popup will appear. Paste the iframe code into the text bar.

Place embed pop-up in the HubSpot CMS

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

Follow steps 1-3 above to access the HTML editor. In the top options bar, click Advanced > source code. You can then manually paste your embed code. Note that the end result is the same.

WordPress

Use the following steps to paste an embed code into your WordPress website:

  • Go to your admin area and go to either Pages or Messages.
  • Click the title of the post to which you want to add the embed code. This action will take you to the post editor.
  • Click on the Text tab in the top right corner of the text editor.

WordPress plain text editor

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

3. Done! You have embedded content on 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 engagement on your website and allow visitors to your site to interact with the content you post on social media. The best part is that it’s easy to do: just generate the embed code, paste it into your HTML editor and watch your user engagement grow.

Editor’s Note: This post was originally published in September 2013 and has been updated for completeness.

New call to action

New call to action

Disclaimer: The opinions expressed within this article are the personal opinions of the author. The facts and opinions appearing in the article do not reflect the views of salesground.org and salesground.org does not assume any responsibility or liability for the same.

Previous articleVideo : Hassan Mapenzi – Dharau
Next articleAugust 2021 Coupon Codes, Discount Codes

LEAVE A REPLY

Please enter your comment!
Please enter your name here