cancel
Showing results for 
Search instead for 
Did you mean: 
benjamin_shiple
Community Participant

Instagram Content Embedding

Jump to solution

When trying to embed content from Instagram, the content is 'grayed out.'

Any ideas?

1 Solution

Accepted Solutions
benjamin_shiple
Community Participant

Hi Everyone,

In doing a little bit more sleuthing, I've found a work-around. Use this code,

<p><iframe src="//instagram.com/p/______________/embed/" width="612" height="710"></iframe></p>

but replace the underscores with the part of the instagram url following "https://instagram.com/p/"

Instagram URL

Solution from Wordpress Instagram Embed: One Problem, Two Solutions | Pace

View solution in original post

8 Replies
chofer
Community Coach
Community Coach

Hi there,  @benjamin_shiple ​...

I tested this out in my own sandbox course.  I am also getting a gray box after using embed code from an image uploaded to Instagram.  I went a step further and compared the embed code I pasted in to a Canvas page with the same page after I had saved the page and then went back to edit the page.  The code was significantly less than what I originally pasted in...which tells me the editor was probably stripping out some of the code that it doesn't allow in Canvas pages.

instagram.jpg

The code on the left was the code I got from Instagram.  I pasted that into a Canvas page, and then I saved the page to see what it looks like (result: gray box).  Then, I went back to edit the page and check out the HTML.  The code on the right is what I saw.

I think it would be cool if Instagram/Facebook created a LTI integration.  It would, hopefully, resolve the issue you and I are seeing here.

Hope this helps, Benjamin.

Stefanie
Community Team
Community Team

 @benjamin_shiple ​,  @chofer ​ has nailed it; the embed code Instagram supplies isn't supported by the Canvas RCE. For a full list of supported tags, elements, and attributes, please refer to the Canvas HTML Editor Whitelist.

benjamin_shiple
Community Participant

Ahh yeah, it does seem unsupported. Maybe one day! Thanks!

benjamin_shiple
Community Participant

Hi Everyone,

In doing a little bit more sleuthing, I've found a work-around. Use this code,

<p><iframe src="//instagram.com/p/______________/embed/" width="612" height="710"></iframe></p>

but replace the underscores with the part of the instagram url following "https://instagram.com/p/"

Instagram URL

Solution from Wordpress Instagram Embed: One Problem, Two Solutions | Pace

View solution in original post

mandana_mahdavi
Community Member

This Instagram embed code is not working? It does not show the feeds. Any idea?

rachel_millstei
Community Member

We have successfully embedded a Instagram Feed onto the canvas page using the free widget https://snapwidget.com/

It is easy and you do have to create an account.  It is free and it works if you can't find the numbers in the previous post from Ben Shipley.  It autoupdates and is size customizable.

It also has Twitter Feed options.

Great job Rachel. I just embedded a Instagram feed in Canvas.

Thank you for sharing