Best Answer

Options to embed Instagram in Docebo Learn

  • 25 October 2021
  • 1 reply
  • 59 views

Has anyone successfully embedded Instagram on their default page using the iFrame widget? If so, how? We did this years ago (in version 6.0 of Docebo) but now I can’t figure it out again. 

icon

Best answer by Adam Ballhaussen 18 February 2022, 18:04

View original

1 reply

Userlevel 7
Badge +3

Hey @racheleinhorn, great question! I’m certainly no expert on this front, but I believe there are a few ways you could achieve this in Docebo Learn.

 

Before I get to my recommendations, I want to call out a common issue that admins face when trying to iFrame or embed content within Docebo Learn: X-Frame Options. I’m going to spare you any attempt that my non-technical self could make to explain the details of X-Frame Options and instead direct you to this resource to learn more about them. You’ll notice callouts in some of our Knowledge Articles regarding these X-Frame Options (like in our List of Widgets for Custom Pages article) since they often get in the way of an admin’s ability to embed a site or web resource. 

 

Example of an iFrame widget being “blocked” by X-Frame option restrictions 

You can investigate the reason for content not showing in Docebo Learn when you try to embed it via an iFrame or HTML widget by right clicking in your browser window, selecting Inspect, and navigating to the Console tab. There, you’ll likely see some sort of error message. In the case of the above example, you’d see something like:

 

Refused to display 'https://www.instagram.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

 

Now onto the realm of the usually possible. There are a few options you could try:

 

Use an HTML / WYSYWIG Page Widget

 

  1. Navigate to the Page where you’d like to embed an Instagram profile by navigating to ⚙️ Admin Menu > Manage Pages and selecting the page you’d like to edit.
  2. Navigate to the Composer tab
  3. Select the + icon in any row to add a new widget
  4. Select the HTML / WYSYWIG page widget
  5. Select Next Module
  6. Using the HTML Editor Type, enter the following code:
<center>
<p><iframe src="https://www.instagram.com/docebolearn/embed" width="100%" height="500" frameborder="0"></iframe></p>
</center>
  1. Replace the /docebolearn in the URL from the above code with whatever public Instagram profile you’d like to embed
  2. Make any tweaks to the HTML you’d like, including the height & width or any other properties you’d like to further customize.
  3. Select Add Widget

This will result in something that looks similar to the following:

 

Public Instagram profile embedded on a Page in Docebo Learn via the HTML / WYSYWIG Page Widget

 

Use a Public Catalog Custom Page

 

Public Catalogs allow you to show a catalog or set of catalogs to non-authenticated users (allowing you to surface content to users before they log in). When using Public Catalogs, you have the option to configure Public Catalog Custom Pages. Using the same iFrame code recommended for the HTML / WYSYWIG page widget, you could embed a public Instagram page in a Public Catalog Custom Page. I’ll walk you through how to do this below.

 

First, you need to make sure you’re using Public Catalogs.

  1. Navigate to ⚙️ Admin Menu > Advanced Settings
  2. Select Course Catalog in the Main Functions list on the left
  3. In the Public Catalog section, check the Show the catalog to non-authenticated users option
  4. Either check the Display all available public courses and learning plans or the Select catalogs to display option and make your selection accordingly.
  5. Select Save Changes

Now that you’ve configured your Public Catalog settings, you have the option to display Public Catalog Custom Pages to your learners. Let’s create an Instagram page to embed your preferred public Instagram feed.

  1. To configure your Public Custom Catalog Pages, navigate to ⚙️ Admin Menu > Public Catalog Custom Pages
  2. Select New Web Page
  3. Select the Language you’d like to assign the content for
  4. Create a Title (in this case, Instagram)
  5. In the HTML Page section, select the <> option in the editor to bring up the Source Code Editor
  6. Copy + Paste the following code into this editor:
<center>
<p><iframe src="https://www.instagram.com/docebolearn/embed" width="60%" height="1500" frameborder="0"></iframe></p>
</center>
  1. Replace the /docebolearn in the URL from the above code with whatever public Instagram profile you’d like to embed
  2. Make any tweaks to the HTML you’d like, including the height & width or any other properties you’d like to further customize.
  3. Select Ok
  4. Check the checkbox beside Publish in the bottom left
  5. Select Confirm

 This will result in something that looks like the following:

Public Instagram profile embedded on a Public Catalog Custom Page in Docebo Learn

 

📚 Check out the Activating and Managing a Catalog knowledge article to learn more about creating and using Public Catalog Custom Pages.

 

Use an iFrame Course Widget

 

This approach will be very similar to the previous two we’ve explored, only you’ll be embedding your public Instagram profile’s URL via an iFrame Course Widget.

  1. Navigate to ⚙️ Admin Menu > Course Management
  2. Select the course you’d like to edit
  3. Navigate to the Training Material tab
  4. Scroll down and select the Add Course Widgets button
  5. From the Select widget dropdown, select IFRAME
  6. Select your preferred width, either Half width or Full width
  7. Select the ⚙️ icon in the top right of the new External Content widget
  8. Copy + paste your public Instagram profile’s URL into the IFRAME URL field
  9. Add /embed to the end of your URL.
  10. Configure your desired Height for the widget in pixels. Your settings should look something like the following:
iFrame Widget settings when embedding a public Instagram profile
  1. Select Save Changes

This will result in something that looks like the following:

 

Public Instagram profile embedded in an iFrame Course Widget in Docebo Learn

 

Reply