How to Embed Twitter into foneFrame

display tweets on smartphones

You can display tweets on smartphones. Twitter generates RSS feeds (though they don’t go out of their way to tell you about it). If you link a Twitter feed to a foneFrame stylesheet, you can read it in a browser without a feed reader.

CSS styles can be applied to RSS feeds. foneFrame includes a CSS3 stylesheet made for Twitter RSS feeds. Linking to foneFrame converts a Twitter feed to a mobile web page. The Twitter stylesheet is hosted in the cloud for ease of use & decreased latency.

Every Twitter account has a URL and RSS feed associated with it:
  https://twitter.com/#!/[username]
  https://twitter.com/#!/EFF

  https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=[username]
  https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=EFF

(If you have trouble getting a feed for your account, try adjusting your Tweet Privacy settings.)

Download the Twitter feed to your computer. Open it in a text editor and link to the foneFrame stylesheet by copying these two lines to the beginning of the Twitter RSS file:
  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet href="http://code.foneFrame.com/fF/foneFrame.Tw.2.1.0.min.css"?>

Or download foneFrame.Tw.2.1.0.min.css and host it yourself.
  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet href="foneFrame.Tw.2.1.0.min.css"?>

Linking the foneFrame stylesheet to a Twitter feed maps the elements in the feed to the styles in the CSS3 file. Some elements are displayed, others aren’t. Don’t forget to edit the channel/title and channel/link in the RSS file.

Downloads: foneFrame.Tw.2.1.0.min.css is minimized for speed and therefore it’s hard to read. foneFrame.Tw.2.1.0.css isn’t minimized and is easier to read. Here’s a sample Twitter feed file linked to foneFrame for you to play with.

We’re not done with this trick yet. It doesn’t require the Twitter API, just the feed’s URL. We’re gonna clean this up a bit. OK, a lot.