Embed Twitter Timeline without JavaScript

I’ve used Twitter with my classes for a couple of years. And while the students don’t use it as much as I’d like, it’s still a good way to post articles that I’d like them to see, but not necessarily be part of a class discussion.

What I wanted to do was post my Twitter feed into a Canvas page so that when the students login they see the Twitter feed. Twitter tries to make this easy, but it requires inserting a JavaScript call into your page. Canvas, and most online editors, don’t allow this because it’s a potential risk.

What we can do is use iframes and link to a page on another site. For this we’re going to create a GitHub page and put the JavaScript there.

GitHub Pages

You’ve really got a lot of options on where to host the embedded page. If you’re already hosting a site somewhere like Host Gator or Blue Host, you can just upload the HTML that we’ll go over below somewhere on that site and use that link instead. If that works for you, you can skip this section. Hosting it yourself does give you a little more control though. For example, you can host it at your own domain instead of github.io and you’ll be able to create other pages for your students. It will cost you a few dollars a month though.

If not, GitHub pages are a free and easy way to get a simple static website online.

First step is to create a GitHub account if you don’t already have one. Go ahead and click the link and create one and then come back.

Once you’re on GitHub you want to look for the green New Repository button. It looks like this.

New Repository Button

Click that button and it will take you to a screen where you’ll be able to create a new repository. I’m going to call mine twitter-embed.

Create new repo form

The description doesn’t really matter. Odds are, nobody will ever see it except you.

You do need to make the repo public. One, your making a public website and keeping it private will lock it away. And two, GitHub charges you for private repos.

And one other trick. Go ahead and check the box next to Intialize this Repository with a README. What this will do is go ahead and put a readme file in your repo when it’s created. Not important for what we’re doing, but if you don’t you’ll have to jump through some hoops before you can create other files. It’s just easier this way.

gh-branch

Next we need to create a branch to hold our website. Branch is a term used in git repositories, but not one we have the space to go into here. So just follow along.

Look for a drop down right above your file list that says master. The default branch is called master. We’re going to create another one, so click on the branch dropdown. In the field that comes up enter gh-pages. gh-pages is a special branch name that GitHub will use for our site.

Create gh-pages branch

And then click on the link on the bottom to create the branch. The page will refresh and the only difference will be that the dropdown should say gh-pages instead of ┬ámaster. Now we’re ready to create our page.

Creating the Page

Now it’s time to actually build the HTML page. Look for a button labeled Create new file and click it.

Create file button

The file we want to create is called index.html. This is a special filename that web servers will use when you leave off a filename.

New filename

Then put the following contents into the page, with a couple of changes. On lines 7 and 8 change YourTwitterName to your actual Twitter username. Everything else should stay the same.

File contents

Then, scroll to the bottom and click on the green Commit new file button. You can add a comment if you’d like, but it’s not necessary.

You should now be able to go to githubusername.github.io/twitter-embed/ in your web browser and see your Twitter feed, swapping out githubuername with your actual GitHub username. And if you called your repo something other than twitter-embed, you’ll need to swap that out too.

Here’s the one I built for the example if you want to see what it should look like. Since this site doesn’t have a Twitter account, I used a different one that I post to. It’s going to be the full width of your browser, which is okay. We’ll take care of that when we actually embed it into Canvas.

Now that we’ve got the page, it’s time to head to Canvas and embed it.

Embedding into Canvas

Now that you have the page to embed, it’s time to embed it so let’s head over to Canvas and create a new page.

Canvas rich text editor

If you’re familiar with Canvas, this is probably a screen you’ve seen before. But we need to change it a bit so we can edit the HTML directly. Click on the small HTML Editor link on the top right of the editor.

Once switched we’ll be in HTML mode and can enter raw HTML, with a few exceptions like the script tag that would have made this whole post irrelevant.

So that you can copy and paste, here’s the HTML from the image above.

<iframe style="width: 300px; height: 500px;" src="https://yourgithubusername.github.io/twitter-embed/" width="300" height="150"></iframe>

You’ll want to change yourgithubusername to your actual username. And you can change the values after width and height to whatever size you want. The px means these are pixel widths. You can also use percentages like 50% if you want it to span half the page.

And when you hit save you should wind up with something like this.

And… done

Hopefully you’re up and running. I’ve used a very similar technique in my Canvas classes and, aside from the district network sporadically blocking Twitter on student accounts, it’s worked great.

If you’d like to see what the full GitHub repo looks like, here’s the one I created for this demo. I did change the repo name and edit the readme file, but it’s still pretty close to what the screenshots show.

If you’re having trouble, let’s talk in the comments and see if we can get you up and running.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *