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.
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.
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
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.
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.
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.
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.
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.
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.
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
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.
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.
Want to stay in touch and keep up to date with the latest posts @ CompSci.rocks?