Social Web CMS: How To Add iPhone Rss Reader Tutorial

With the iPhone 3G recently having been released there is no better time to be thinking about adding iPhone functionality to your Social Web CMS based project. This tutorial will provide your Social Web CMS based site with an RSS feed designed for viewing on the iPhone, you will also learn how to test iPhone applications even if you do not physically own and iPhone.

To begin with lets gather together what you will need.

Safari Browser You will need the most recent copy of Safari Web browser from Apple, this is required to view iPhone content correctly.

TestiPhone.com: is a website that allows you to test iPhone applications online with the safari web browser.

iPhone RSS Package For Social Web CMS: you will need to download this package and upload the contents to you Social Web CMS systems root directory.

Download The Apple Safari Web Browser

Vist The TestiPhone.com Website

Download The iphonerss Social Web CMS Package

Installing The iphonerss function to Social Web CMS

  1. Open and extract the contents of the iphonerss.zip download package to your harddrive.
  2. Inside the extracted folder this is a file titled attributes.js open this file with notepad and change the line feedURL where it says yoursite.com to your own domain name.
  3.     feedURL: 'http://yoursite.com/rss.php?status=all'
  4. Close and Save attributes.js
  5. Upload the extracted folder /iphonerss to your Social Web CMS root directory.

Done.

Testing Your Social Web CMS iPhonerss Without An iPhone

  1. Install the safari browser from apple if you haven’t already done so.
  2. Open Safari and goto http://testiphone.com
  3. Input the url you would like to test in the on screen iPhone, in this case it will be http://yoursite.com/iphonerss
  4. You should now be able to navigate your new iphone RSS feed.

Styling the iPhone RSS feed to you own site

The task of restyling the RSS feed to suit you projects template is pretty straight forward. Below are the main images you will need to edit within the /iphonerss folder to quickly change the look of the application to match your template. Other styling elements are included within the main.css file.

  • HomeScreenIcon.png
  • images/bar.png
  • images/iphonelogo.png
  • images/refresh.png
  • images/refresh_clicked.png

The iphonerss code is courtesy of nzbullet.

Demo: Social CMS Buzz iPhone RSS

If you enjoyed this post, make sure you subscribe to my RSS feed!

Article Details

#

Author: on August 13th, 2008

Category: Social Web CMS

Tags: , , , , ,

  1. Ed says:

    Aptana’s IDE is great for working with iphone sites – just a FYI.