What is this?
Twitter makes it easy to embed a timeline into pretty much any webpage that you want. You just copy a bit of HTML code and paste it into your page and you should be all set.
If you’re into more detailed instructions, they’re below. If not, just punch your Twitter username in the box and click the button.
Enter your Twitter username into the field. This script validates that the username matches a certain pattern to be a valid Twitter username. That is; it’s between 1 and 15 characters and only contains the characters A-Z, a-z, 0-9, or underscores. It does not validate that it’s an actual account though.
Click on the Get Link button. Once you click the button you should see 3 things pop up. There’s a link, a snippet of HTML, and a preview.
Using the Code
The HTML code starting with <iframe is probably what you’re going to want. Copy all of that field. You’ll need it in a bit. And be careful. It’s likely that you may need to scroll to get all of the code.
You’ll then need to paste the code into your online editor. One catch on this is you need to make sure you’re in HTML mode for this to work. Some editors have what they call WYSIWYG or Rich Text editing mode. That won’t work. It needs to be set where you can insert direct HTML. Many editors use an icon that looks like this
<> to switch between the two modes.
Odds are that you want to tweak the code a bit though. By default iframes are pretty small. But it’s easy to make them bigger.
Let’s look at the following HTML snippet that would create a frame holding our Twitter timeline.
We’re going to change it to the following.
<iframe style="width:300px;height:500px;" src="http://app.classcube.com/embed/twitter/ClassCube/"></iframe>
Now the frame will be 300 pixels wide and 500 pixels tall. It also works with percentages of the screen like this.
<iframe style="width:100%;height:75%;" src="http://app.classcube.com/embed/twitter/ClassCube/"></iframe>
This time it’ll be 100% of the available width and 75% of the available height. You can also mix and match units.