How to Embed Twitter into foneFrame

tweet into a mobile web page

foneFrame embeds Twitter feeds into mobile web pages. The foneFrame mobile framework publishes tweets to smartphones.

Please bear with us. This is more of a rough hack than an elegant trick. That will change. We just couldn’t wait to share it.

CSS styles can be applied to RSS feeds. The foneFrame schema includes a CSS3 stylesheet for Twitter RSS feeds. Linking to foneFrame converts a Twitter feed to a mobile web page without using the Twitter API.

A Twitter RSS feed for a given Twitter account is of the form: https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=mobileactive
where mobileactive is the Twitter user’s name.

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"?>

The alternative is to 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.

foneFrame.Tw.2.1.0.min.css is minimized for speed it’s hard to read. foneFrame.Tw.2.1.0.css isn’t minimized and therefore 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.