Embed Twitter Timeline without JavaScript

Twitter Logo

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.

But there’s on big exception. You have to be able to insert JavaScript on whatever page it is where you want the timeline embedded. For most web developers that’s not a big deal. But for some web users you may not be able to do this. Many online editors strip out JavaScript as a security feature. And, it’s the right thing for the editors to do. Allowing untrusted JavaScript can make for a very dangerous page. But sometimes that just gets in the way of what we want to do.

That’s where this page comes in. The standard solution for not being able to include JavaScript on a page is to create a new page where you can put JavaScript that contains only the HTML and scripts that Twitter gives you. Then, you embed that page into an iframe. But, not everyone has the ability to host a page somewhere else, or the interest in doing so. So we’ve done it for you.

If you’re into more detailed instructions, they’re below. If not, just punch your Twitter username in the box and click the button.

@

Instructions

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.

Customization

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.

<iframe src="http://app.classcube.com/embed/twitter/ClassCube/"></iframe>

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.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>