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.
Hey
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.
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
- 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.
- Navigate to the Composer tab
- Select the + icon in any row to add a new widget
- Select the HTML / WYSYWIG page widget
- Select Next Module
- 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>
- Replace the
/docebolearn
in the URL from the above code with whatever public Instagram profile you’d like to embed - Make any tweaks to the HTML you’d like, including the height & width or any other properties you’d like to further customize.
- Select Add Widget
This will result in something that looks similar to the following:
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.
- Navigate to Admin Menu > Advanced Settings
- Select Course Catalog in the Main Functions list on the left
- In the Public Catalog section, check the Show the catalog to non-authenticated users option
- Either check the Display all available public courses and learning plans or the Select catalogs to display option and make your selection accordingly.
- 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.
- To configure your Public Custom Catalog Pages, navigate to Admin Menu > Public Catalog Custom Pages
- Select New Web Page
- Select the Language you’d like to assign the content for
- Create a Title (in this case, Instagram)
- In the HTML Page section, select the <> option in the editor to bring up the Source Code Editor
- 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>
- Replace the
/docebolearn
in the URL from the above code with whatever public Instagram profile you’d like to embed - Make any tweaks to the HTML you’d like, including the height & width or any other properties you’d like to further customize.
- Select Ok
- Check the checkbox beside Publish in the bottom left
- Select Confirm
This will result in something that looks like the following:
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.
- Navigate to Admin Menu > Course Management
- Select the course you’d like to edit
- Navigate to the Training Material tab
- Scroll down and select the Add Course Widgets button
- From the Select widget dropdown, select IFRAME
- Select your preferred width, either Half width or Full width
- Select the icon in the top right of the new External Content widget
- Copy + paste your public Instagram profile’s URL into the IFRAME URL field
- Add
/embed
to the end of your URL. - Configure your desired Height for the widget in pixels. Your settings should look something like the following:
- Select Save Changes
This will result in something that looks like the following:
Anyone know how to add in a LinkedIn company page?
Anyone know how to add in a LinkedIn company page?
You just want to show the page? Have you checked out using an external link page and just try not having it open in new tab? https://help.docebo.com/hc/en-us/articles/360020126199-Creating-and-Managing-External-Link-Pages
If you are trying to add it as a smaller widget, would need to find a supported iframe embed method from linkedin, not sure of their options besides individual posts though.
Reply
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.