[Cory Watilo]

Twitter offers a variety of widgets that you can place on various websites like a blog or Myspace, but all of them use javascipt or flash, neither of which Posterous allows in a theme. Until that changes, the easiest way to get a Twitter widget onto your Posterous is to drop one of Twitter's widgets into an iframe. You will need a web hosting account for this (you can find free web hosting accounts out there, if you don't already have one). Here's how to do it.

What you need for this tutorial:

• Web hosting account

What you need to know:

• HTML
  
• File uploading

1. Visit Twitter's widget page and select Widgets for My Website



2. Select the type of widget you'd like to display. We'll use Profile Widget for this demo.

3. From here, you can customize the appearance and dimensions of your widget.



4. Once you've styled your widget just the way you like it, click Finish & Grab Code.

5. Copy the code to your clipboard. Be sure to notice the width and height of the widget.



6. Now, copy the code into the body of a blank HTML document.



7. Save and upload the html file to your web server.

8. Create an iframe in your Posterous theme and link it to your file you just uploaded.

<iframe src="http://linktoyourwebsite.com/twitter.html" marginheight="0" marginwidth="0" frameborder="0" style="border:0;height:300px;width:250px;"></iframe>

9. Preview your customized theme, and if everything looks good, you're all set!


Update: You can see this implementation in action on Tal Shafik's Posterous.

[Tal Shafik]

Awesome! This is a nice workaround until Posterous get their act together about Javascript. Too bad the default Twitter widget loops through 4 day old tweets.

Thanks for the great guide. Naturally, I gave you full credit in my post.

[devinreams]

Tal Shafik, on 30 September 2009 - 06:40 PM, said:

This is a nice workaround until Posterous get their act together about Javascript.

Hmmm, I'd be surprised if they ultimately allowed Javascript for security reasons. It's not unreasonable for hosted services (think MySpace, Blogger, WordPress.com) to block it, right?

Workarounds like this and built-in Posterous widgets are likely the only option. Nice work, Cory.

[Sam Sethi]

Hi Cory

Thanks for adding in the tutorial(s). I tried to use the one for adding in a twitter widget but sadly only partially successful. I successfully customised my twitter widget and created my twitter.html file which is stored here on dropbox. http://dl.dropbox.co...../Twitter.html (see attached  TwitWidget.html (4.01K)
Number of downloads: 12)

I then added it to the iframe <iframe src="hhttp://dl.dropbox.com/....../Twitter.html " marginheight="0" marginwidth="0" frameborder="0" style="border:0;height:300px;width:250px;"></iframe> even though I was not sure where best to place this line of code within the body. i.e Does it need to be inside of a block?

Using preview mode I can see the widget appears on the left hand side of my blog but the iframe only shows the html code and not the twitter widget content? I cannot see where I am going wrong. ;-( One possibility is the fact I had to add this line in manually <link href="http://widgets.twimg.com/j/2/widget.css" type="text/css" rel="stylesheet"> which maybe pointing incorrectly.

As I am using your stripes theme could you please let me know where it should be pasted and what I might be doing wrong.

Hope you can help

Sam

[Cory Watilo]

Sam Sethi, on 16 November 2009 - 11:29 PM, said:

Thanks for adding in the tutorial(s). I tried to use the one for adding in a twitter widget but sadly only partially successful. I successfully customised my twitter widget and created my twitter.html file which is stored here on dropbox. http://dl.dropbox.co...../Twitter.html (see attached TwitWidget.html)

Hi Sam,

You did just about everything right. The only problem is that the program where you pasted your code read your html as text and then converted it to code itself. What you need to do is save your code in a plain text editor like Notepad, if you're on a PC, rather than Word, which is maybe what you did. Notepad is a plain text editor, which means it doesn't deal with html markup so you know you're working with actual code.

I also converted it for you and attached, so if you download and use this file instead, it should work too.

[Cory Watilo]

Sam - I just looked at your code. Looks like you're on a Mac. I don't think TextEdit does text files straight up, but maybe it does. I always used TextMate on my Mac. I'm sure you can find a number of free text editors if you do a search.

[Mendy]

Hello guys, first of all, Happy new year! I wanna ask couple of questions about installing twitter widget. First one comes, where I should create "my twitter iframe" in the html code section? (Beginning? middle? middle where? bottom? any detailed explanation would be wicked awesome.) Second, which server I should use for hosting "my twitter widget html"? when I host it on godaddy, I see ugly ad. You can see from the attachment picture. Last question, bare with me! Could you guys tell some of your tricks for customizing "your twitter widget"? Thanks.

Twitter widget link: http://eng.mendorshi...ter_widget.html

[Cory Watilo]

Mendy, on 31 December 2009 - 06:14 PM, said:

First one comes, where I should create "my twitter iframe" in the html code section? (Beginning? middle? middle where? bottom? any detailed explanation would be wicked awesome.)

I would drop it somewhere after {Profile}, as that sits in the sidebar and the sidebar is the best place for it. Just try moving it around and previewing the results until you get it to a place you like.

Mendy, on 31 December 2009 - 06:14 PM, said:

Second, which server I should use for hosting "my twitter widget html"? when I host it on godaddy, I see ugly ad. You can see from the attachment picture.

You are getting an ad on your site hosted with Godaddy because you are on a free hosting account. If you upgrade to a paid account, the ad will be removed.

[Mendy]

Cory Watilo, on 01 January 2010 - 05:13 AM, said:

I would drop it somewhere after {Profile}, as that sits in the sidebar and the sidebar is the best place for it. Just try moving it around and previewing the results until you get it to a place you like.

You are getting an ad on your site hosted with Godaddy because you are on a free hosting account. If you upgrade to a paid account, the ad will be removed.

Hello Cory, thanks for the response.

[JoshG]

Cory Watilo, on 30 September 2009 - 04:48 PM, said:

Twitter offers a variety of widgets that you can place on various websites like a blog or Myspace, but all of them use javascipt or flash, neither of which Posterous allows in a theme. Until that changes, the easiest way to get a Twitter widget onto your Posterous is to drop one of Twitter's widgets into an iframe. You will need a web hosting account for this (you can find free web hosting accounts out there, if you don't already have one). Here's how to do it.

Hey Cory, thanks for this tutorial! I just followed these steps to add a twitter widget to my Posterous site and must say I'm way more impressed with my site now than when I was using a static twitstamp.com image for my twitter status. I'm really digging Posterous and the ease of posting directly from my iPhone. I gave it a try when they first launched, but was discouraged due to lack of customization and theming, but today I just migrated my main site from self-hosted WordPress & Thesis theme over to Posterous based off one of your templates.

Great job, thanks for your work!

Josh Gard
joshgard.com