Embedding Twitter Feed with Images

[kbeimfohr]

It is very easy to use the Twitter EduApp to embed a Twitter feed into a Canvas course page.  One of the things I have noticed is that if the tweet includes an image, it displays the image as a link that then takes students out of Canvas.  I would like to embed a twitter widget that expands the photos automatically on my Canvas page.  I have gone to the widget page on Twitter and copied the embed code that does it, but when I past it into the HTML editor in Canvas, it does not work properly (see image below).  Any assistance on how to fix this problem is greatly appreciated.  Thanks!

[James_Kocher_UF]

Since the eduApp site only lists Instructure as the author, it's hard to know who to approach about making this change.  I would imagine the LTI guru Brian Whitmer (@whitmer on Twitter) could at least help you in the right direction!

[kona]

kbeimfohr​, I'm wondering if you might get more of a response from the Instructional Designers​ or Canvas Developers​ groups? Would it be ok if I moved your question over to one (or both) of these groups?

[kbeimfohr]

Definitely.  Thanks for your help.

[kent]

As I understand it, canvas will restrict code entered in their text-entry boxes. We can see this in action where canvas seems to be stripping the <script> tag from the twitter widget html code. This has to do with security so that people won't embed malicious code.

Because of this, the twitter external widget code will not be handled in a way that would make it easy for you to simply copy+pasta it into your html editor. But the twitter edu app will work perfectly other than being able to expand images (which isn't that great for security anyway if I am correct). I'm unaware of what to do in this case -but I will see what I can do with it during my free time today.

[kbeimfohr]

I know there is a code out there that does it.  I found it online at one point last year.  I am unable to locate it again.  As far as security, that shouldn't be an issue for teachers wanting to show images they are posting to twitter.  Many post images of student work or what's going on in class that week.  If anyone can find it, I would be forever in their debt.  🙂

[kbeimfohr · Accepted solution]

I found a teacher who had the embed code that worked in Canvas where the pictures showed up.  It is listed below.

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://www.edu-apps.org/tools/twitter/twitter_embed.html?widget_id=618406513804054528&url=https%3A%..." width="444" height="640"></iframe></p>

[jamely]

To add on to this, kbeimfohr​, this has to do with creating an embedded twitter feed from Twitter. If someone else wanted to do this, go to https://twitter.com/settings/widgets, Create New, make sure to check mark the Auto-expand photos checkbox, and create your widget.

It will look like this:

<a class="twitter-timeline" href="https://twitter.com/Amely_llama" data-widget-id="690242311326949376">Tweets by @Amely_llama</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

With the code copied, paste it to the Canvas HTML box, and also paste in Kyle's teacher's code, and exchange the widget_id (numbers up to the & but not including it). Looks something like this, noticed the numbers changed after the widget-id.

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://www.edu-apps.org/tools/twitter/twitter_embed.html?widget_id=690242311326949376&url=https%3A%..." width="444" height="640"></iframe></p>

Next, replace the part after the https, in this case, the link https://twitter.com/Amely_llama" and include a closing ;"

It will look like this:

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://www.edu-apps.org/tools/twitter/twitter_embed.html?widget_id=690242311326949376&url=https://t..." width="300" height="450px"></iframe>

Now you can delete the remaining Javascript gibberish, everything after your closing </iframe> tag. You will probably want to change the height to what you set it in the Widget Configurator, (the default is 600px), or else you will get 2 scrolling bars, one from the twitter embed, and one from the iframe.

I like this one better than the LTI, because it responds to the mobile app size. With the LTI one, the mobile app requires you to scroll to the right to see the entire tweet, and I have been unable to remedy that. This is specifically about embedding the Twitter LTI on a content page, not with the Module's External Tools link. I needed it within a home page. Embedding it as a tool makes the mobile app require me to sign in to the webpage instead.

Hope this helps someone else out!

[esnipes]

Thank you, thank you, thank you!!!!

[holtond1]

This appears to no longer work.  Twitter doesn't allow you to create widgets anymore than use iframes, although old ones continue to work (but cannot be modified).

The new embedding uses a script tag, meaning it will not work in Canvas.

If anyone knows another workaround, please share.

[laurakgibbs]

As Doug Holton notes here (and he's the one who alerted me when this happened: thanks again,  @holtond1  ), Twitter made some dramatic changes to the widget interface in Fall 2016. Some of the widgets (hashtag search) still have a widget ID, but others (like embedding an account timeline) do not. After I figured out a javascript Canvas workaround for some other javascripts (those are at Laura's Widget Warehouse), I realized that I could use the same https/iframe workaround for all the Twitter widgets too, so that you can use any type of widget generated by Twitter, displaying all the media (images and video). I've written all that up as a workshop here:

Twitter4Canvas (blog-as-workshop)

and I've also got a Canvas course going (totally open) which shows the Twitter widgets in action:

Twitter4Canvas (Canvas course)

I've also created some ready-to-use widgets that people can just copy and paste; I did one for the student newspaper at my school, for example, and I've got one set up for the fabulous #ColorOurCollections event that happens every year in February; here's a screenshot. I'd like to spread the word about this, being a big fan of Twitter for course content streams... I hope this can be useful to others, and if you have questions or suggestions how to make this more useful, let me know! 🙂

Color Our Collections: Twitter4Canvas