As you know, iPhone has Safari browser onboard. It's pretty neat and great working... but sites with huge layouts don't look good on small iPhone screen. When you have own blog it would be good to display it in customized way.
Today almost all blogs have RSS Feeds so if we want to display our blog in cusomized, iPhone ready look it's just to put blog's feed through some RSS parser and display it as iPhone ready web page. Let's use iui - project started by Joe Hewitt - creator of firebug. It's a simple JavaScript framework for iPhone web pages.
So, we have iui now we need some PHP RSS reader. We'll use SimpleXMLObject class because it's ... simple.
<?php
$feed = simplexml_load_file($feedURL);
?>
As you can notice in php code we have function calls to something called xcache - it's very nice plugin for php speeding up your code by doing magic opcode caching. But for now we'll use different advantage of cache - you can store variables just in your server memory and get access to it on different php file calls. I this case we use this to download RSS feed once and store it for a while. So if you refresh your browser or some one else will go on your blog we do not need to download feed again.
Now we have our blog's feed and we can display it in nice iui internface.
Putting all things together we have pretty simple and neat iPhone blog: http://botmonster.com/iFeed/
Now, let's make browser detection - if browser is iPhone's Safari redirect user to our "iPhone ready" blog page. Just paste this JavaScript snippet into html section of your blog template. Replace "feedURL=" with link to your blog's feed.
<script type="'text/javascript'">
//<!--[CDATA[
if(document.location.href == 'http://blog.botmonster.com/' && navigator.userAgent.match(/iPhone|iPod/i)){ document.location='http://botmonster.com/blog/?feedURL=http://feeds.feedburner.com/BotmonstersWired'; }
//]]-->
</script>
It's very simple detection, if you need more sophisticated detection I'll recommend using this webkit detect script Just try to enter this address into your iPhone: blog.botmonster.com - you'll be redirect into iFeed page and you will see something like this:
You can download all iFeed code from google code at http://code.google.com/p/ifeed/
Available under MIT licence.
Showing posts with label blog. Show all posts
Showing posts with label blog. Show all posts
Tuesday, December 25, 2007
How to put your own blog on iPhone...
at
22:46
3
comments
Labels: blog, iPhone, JavaScript, php
Subscribe to:
Posts (Atom)
