Twitter is great for sharing with your students and their parents. It’s a really good way to get information out. But what about embedding your Twitter feed into a Canvas page?
Isn’t there an App?
Yes, there already is an LTI app that will create Twitter timeline embeds. And it’s easy to install and use. But there’s a catch. It doesn’t show any images that may be attached to your tweets. Take a look.
It works and it’s easy to use. But if you include links or images in your Twitter feed, and you probably do, then this may not be exactly what you want.
The Twitter widget
Enter the Twitter widgets. Twitter wants you to embed your timeline and makes it really easy. If you head to their site you can easily get the HTML and JavaScript code that will put a Twitter timeline on a page.
But there’s a problem. The code that Twitter gives you has a bit of JavaScript to make everything work. And Canvas will strip out any JavaScript from posts you make. It’s a security feature, and it’s a good one. You wouldn’t want anyone putting arbitrary JavaScript into pages.
What you can do is take that code that Twitter gives you and put it onto a plain HTML page and then use an iframe to show it, which Canvas will let you do. But that requires you to make your own HTML page and host it somewhere.
Getting the Embed Code
You’ve got a couple of options here.
First, if you have the ability to create and host your own HTML page you can just copy and paste the code that Twitter gives you and then link to that page inside an iframe.
But, what happens if you can’t host a standard HTML file or just don’t want to bother? We’ve built a tool just for you. Click the link, fill in the blank, and it will give you the HTML that you need to insert into your Canvas page. Go ahead and follow the link and get your code. You want the one that starts with <iframe .We’ll be here when you get back.
Inserting the Code
Head on over to whatever page you want to put your Twitter feed on and click on the edit button. You’re also going to want to switch to HTML mode from Rich Text. It’s a link on the top right of the editor. Then paste the code into the editor. Your screen should look a bit like the following.
One thing that we did here was add a bit of styling to size the iframe. In this case it’s going be 40% of the width and 500 pixels tall. I picked this size mostly so it’ll make a good screenshot. You can pick whatever size works for you.
The screenshot also links to our Twitter feed instead of yours. But if you copied from our embed tool it should have your account in it.
Save your page and you should have something like this. This time it’s not a screen shot. It’s the embedded page with our live Twitter feed.
And there you have it. A Twitter feed with images and cards embedded into your Canvas page.