Tag Archive for 'php'

Twitter Timeline Updated

In my previous post Timeless Belt Of Time: How I Integrated Twitter in Timeline, I posted the code for laying out twitter posts on the timeline.

Previously that was done by calling the json Twitter API. It work well for the current 20 status but the archive call (80 posts) didn’t work. I filed a bug report at Twitter, but when I last check again 3 days ago, it was still not working.

To implement a workaround for archives, I modified my server side php code to get the XML format. SimpleXML was used for parsing the xml, then since my server didn’t support json, I use the json library from pear php.

Here’s the updated code for download.

Recently, I have a regain interest in adobe products, namely flash lite and flex. My first flash lite app is a Metronome, and maybe I might post it if I polish it up.

School Started Updates

Hi all,

Timetable
First of all, for those who are interested in my timetable.
Semester 2 Timetable

Previous Next Close
My Timetable Year 1 Semester 2

Here’s this semester, compared to last semester.
Semester 2 Timetable
Previous Next Close
Previous Timetable- Year 1 Semester 1

Hislide Flash Issue Fixed
Hislide popup images usually get covered by flash objects, and the fix to it is to add wmode=”transparent” to the embed tag. Photos taken for my last concert Miniatures can be viewed.

Fotobook Problem Solved
I was running into some problems important facebook albums. I was getting
Fatal error: Allowed memory size of 15728640 bytes exhausted (tried to allocate 71 bytes) in [...] /wp-content/plugins/fotobook/facebook-platform/simpleXML/IsterXmlNode.php on line 234. I fixed this problem by replacing the php4 facebook client library with php5 client. I’ve also added jquery chilli plugin and scripturizer on this blog, but I’ll skip the elaboration.

Facebook Hello World (with Flash, Fbjs, Fbml, css, ajax and ElizaBot)
Random Beautiful Flash Text

Previous Next Close
Random Beautiful Flash Text Generation on Canvas Page

View my application page here or visit the canvas page here.
Previous Next Close
Hello Alice World Profile - Chat Dialog

Actually a challenging part of this was setting up and configurating a Solaris 10 Zone. I thought of trying rails, but with some restrictions I didn’t carry on that idea.

InnoFusion
I’ll be leading a project- a epublishing business, with nextfusion.

Things are getting busy and stressful but I hope I’ll be able to manage.

Blog Posts on a Timeline

Its 2008, so wishing all readers here a very happy new year!

Yesterday, I touched about glancing back at a previous year (2007) , and one good way is to retrieve all the posts on your blog and place visualise it on a timeline. Of course there are other ways, say looking and sharing photo albums with friends could be a better way to bring back memories.

My Blog on the Timeline

I revisited Dandelife (A Social Biography Network?), and found that they have made more features and progress, compared to the last time I tried using it. Some features include importing “life streams” from flickr, facebook, blogs, feeds etc… anyway I didn’t manage to import my blog so I moved on.

Next I tired SIMILE Timeline plugin for Wordpress. Pretty good it seems, but I encountered couple of problems which i didn’t bother to troubleshoot and fix much. I considered implementing my own wordpress plugin when I got the idea to create a client which uses MetaWeblog API, so that it can work not only for my blog, but any wordpress blogs, blogger sites etc.

I will use the metaWeblog.getRecentPosts method to retrieve the post from the webservice. Since metaweblogapi is based on xmlrpc, I used the library phpxmlrpc. The data returned is then formatted as timeline xml to be used the timeline api (in my case I chose to truncate blog contents too). Pretty simple right?

Here’s my source code which I glued together quickly, isn’t too pretty, but works dandy for me. I’ve placed the script online, so you may want to try it.


<?php
/* by http://zz85.is-a-geek.com/ 31 December 2007 */
session_start();
if ($_POST['login']) {
	$reponse = blogconnect ($_POST['blogaddr'],1, $_POST['username'],$_POST['password']);
	if ($reponse->errno=="0") {
		$_SESSION['blogaddr'] = $_POST['blogaddr'];
		$_SESSION['posts'] = $_POST['posts'];
		$_SESSION['username'] = $_POST['username'];
		$_SESSION['password'] = $_POST['password'];
		showhtml();
	} else {
		echo "login failed";
		showform();
	}
} elseif ($_GET['js']) {
	$_SESSION['username'].$_SESSION['password'];
	printxml(blogconnect($_SESSION['blogaddr'],$_SESSION['posts'], $_SESSION['username'],$_SESSION['password']));
	exit;
}else {
	showform();
}

function blogconnect($link, $posts, $username, $password) {
	//requires xmlrpc.inc from http://phpxmlrpc.sourceforge.net/
	require_once('lib/xmlrpc.inc');

	// Using metaWeblogApi http://www.xmlrpc.com/metaWeblogApi
	$client = new xmlrpc_client($link);
	 $client->return_type = 'phpvals';
	 //$client->setDebug(1);

	 $params[] = new xmlrpcval("n/a");
	$params[] = new xmlrpcval($username);            //your wordpress login
	$params[] = new xmlrpcval($password);
	$params[] = new xmlrpcval($posts);
	 $msg    = new xmlrpcmsg("metaWeblog.getRecentPosts",$params);
	$response = $client->send($msg);
	return $response;
}
function printxml($response) {
	header('Content-type: text/xml; charset=utf-8');
	echo "<data date-time-format=\"iso8601\">";
	foreach ($response->val as $entry) {
		/*
		['dateCreated']
		['userid']
		['postid']
		['description']
		['title']
		['link']
		['permaLink']
		['categories']
		['mt_keywords']
		['wp_author_display_name']
		['date_created_gmt'] -8
		*/

		$description = htmlentities (substr($entry['description'],0,255)."...");
		?>
<event
        start="<?=$entry['dateCreated'];?>"
        end="<?=$entry['dateCreated'];?>"
	link="<?=$entry['link'];?>"
        title="<?=htmlentities($entry['title']);?>"
        >
	<?=htmlentities ($description);?>
        <?=htmlentities('<br/>by '.$entry['wp_author_display_name'].'');?>
</event>
		<?php
	}
	echo "</data>";
}

function showform(){
?>
<form method="post">
Blog Address: <input name="blogaddr" value="http://yoursite/blog/xmlrpc.php" size="40"/><br/>
No. of posts: <input name="posts" value="100" /><br/>
Username: <input name="username" /><br/>
Password: <input name="password" type="password" /><br/>
<input name="login" type="hidden" value="1"/>
<input type="submit"/>
</form>
<a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a>
<?php } 

function showhtml() {
?>
<html>
  <head>
  <title>Wordpress (MetaWeblog) API and Timeline API Integration</title>
   <link rel='stylesheet' href='http://simile.mit.edu/timeline/docs/styles.css' type='text/css' />
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
    <script>
    	var tl;
	var eventSource = new Timeline.DefaultEventSource();

	function onLoad() {
		createTimeline();
	}

function createTimeline() {
  var bandInfos = [

   Timeline.createBandInfo({
        width:          "25%",
	//timeZone: 8,
	eventSource:    eventSource,
        intervalUnit:   Timeline.DateTime.DAY,
        intervalPixels: 50
    }),
    Timeline.createBandInfo({
	showEventText:  true,
	eventSource:    eventSource,
	width:          "60%",
        intervalUnit:   Timeline.DateTime.WEEK,
        intervalPixels: 100
    }),
    Timeline.createBandInfo({
        width:          "15%",
	eventSource:    eventSource,
	showEventText:  false,
        intervalUnit:   Timeline.DateTime.MONTH,
        intervalPixels: 95
    }),

  ];

  // sync bands
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[2].syncWith = 1;
  bandInfos[2].highlight = true;

  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

  Timeline.loadXML("<?php echo $PHP_SELF; ?>?js=1", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

  </script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
  	<h2>Laying Out a Year (2007) Full of Blog Posts on the Timeline</h2>
	Using Simile Timeline Library, Wordpress API/MetaWeblog API, and PHP to translate that into Timeline XML. <br/>
	<div id="my-timeline" style="height:450px; border: 1px solid #aaa"></div>
	<a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a>
  </body>
</html>
<?php } ?>

So now, I can have twitter and blog posts displayed on the timeline. If I have the time, calendars and metadata would be next. But there’s also too many other data sources around. Emails- run a search on gmail. On handphone, view the calendar data and smses for a year. Photos: Run time view in Picasa. Diary: read. Gps: Color tag them on googlemaps? Too many! so I’ll be satisfied with the blogs posts on the timeline for now.

Happy revisiting your posts!

Timeless Belt Of Time: How I Integrated Twitter in Timeline

using JSON, PHP, CURL, JS, and of course HTML, and APIs of Simile Timeline and Twitter.

Timeline Twitter Mash up
Looks a little like a seismograph?

My first little personal project in this year was dealing with time, used by myself and view daily by my colleges in TAD. Later in the year, I brainstormed several other ideas that I hope to implement as a web 2.0 application. I stumbled on the Simile Timeline project earlier, thought it was a good idea, but never tried it until today. But it was also the fun using Twitter that sparked the interest to use Timeline and to integrate them.

However, given the large interest in twitter and mash ups, I would have expected someone else to have done before. Still there are handful of resources with the knowledge required to hack the pieces together. So let me outline what I did.

1. Prepare a php script to call Twitter’s API to retrieve Twitter posts using CURL. To do as little coding as possible, I decided to use JSON format (over XML), pass it self as an object into the (html) client’s javascript method.
2. The javascript method would iterate each of twitter’s data then generate the events in Timeline’s format.
3. Initialize and run Timeline’s API to render.

twitter.php The server side script.


<?php
/* 29 Dec 2007, http://zz85.is-a-geek.com/ */
// Edit your twitter's username and password
$username = 'USERNAME';
$password = 'PASSWORD'; 

// The twitter API address
//$url = 'http://twitter.com/account/archive.json'; // Each archive API call could return 80 statuses,
								// but there seem to be an error on Twitter's side so I'll use
								// the User timeline call which returns only the last 20 posts.

$url = 'http://twitter.com/statuses/user_timeline.json';

$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);

echo "timeline_data($buffer);"; // timeline_data is the javascript method to be execute
?>

time.html The Client side html

<html>
  <head>
  <title>Timeline API and Twitter API Integration</title>
   <link rel='stylesheet' href='http://simile.mit.edu/timeline/docs/styles.css' type='text/css' />
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
    <script>
    	var tl;
	var eventSource = new Timeline.DefaultEventSource();

	function onLoad() {
		var scriptTag = document.createElement('script');
		scriptTag.src = "http://CHANGEME_DOMAIN/twitter.php"; // Change to URL of your php script
		document.body.appendChild(scriptTag); // Runs the contents from the URL being called as javascript
	}

function createTimeline() {
  var bandInfos = [

   Timeline.createBandInfo({
        width:          "65%",
	timeZone: 8, // I have to adjust the time as I live in GMT +8
	eventSource:    eventSource,
        intervalUnit:   Timeline.DateTime.HOUR,
        intervalPixels: 80
    }),
    Timeline.createBandInfo({
	    showEventText:  false,
	eventSource:    eventSource,
	width:          "20%",
        intervalUnit:   Timeline.DateTime.DAY,
        intervalPixels: 70
    }),
    Timeline.createBandInfo({
        width:          "15%",
	showEventText:  false,
        intervalUnit:   Timeline.DateTime.MONTH,
        intervalPixels: 100
    }),

  ];

  // sync bands
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[2].syncWith = 1;
  bandInfos[2].highlight = true;

  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
   //tl.loadJSON("cubism.js", function(json, url) { eventSource.loadJSON(json, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

function timeline_data(tjson) { // method called after response of twitter.php is exectured
	for (entries in tjson) {
		 var dateEvent = new Date(tjson[entries]["created_at"]);
		 var urlbase = 'http://twitter.com/' ;
		var evt = new Timeline.DefaultEventSource.Event(
		dateEvent, //start
		dateEvent, //end
		dateEvent, //latestStart
		dateEvent, //earliestEnd
		 true, //instant
		 tjson[entries]["text"], //text
		 '<a href="'+ urlbase + tjson[entries]["user"]["name"] + '/">' +
		 '<img src="' + tjson[entries]["user"]["profile_image_url"] + '" />'
		 + tjson[entries]["user"]["name"] +'</a>' + ' '
		  + tjson[entries]["text"] +
		 '<br /><a href="' + urlbase + 'statuses/' +tjson[entries]["id"]+'">Source:</a>'+ tjson[entries]["source"] + ''
		 //description
		);
		eventSource.add(evt);
	}
	createTimeline();
 }    </script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
  	<h2>Zz85 Integration Test of Timeline API with Twitter API</h2>
	<div id="my-timeline" style="height:450px; border: 1px solid #aaa"></div>
	<br />version 1 by <a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a>
  </body>
</html>

Well, I hope this would work for you, or at least help you to do something better. At least if you managed to do what I did, you would be able to visualise what you were doing on the dynamic scrollable timeline. Of course, the timeline javascript library issnt perfect, and I wish there were features like: adding events by clicking on the timeline, dragging the duration, zooming in&out and dragging the events around. Anyway I have some ideas, that I’m likely not to do it, but its implementable.

  • Integrate Photos eg. Flickr/Fackbook + Blogs + MAps + …
  • Integrate Calendars (eg. Google Calendars)…
  • Automatic Widening/Narrowing
  • Import and usage of own database with metadata
  • Layered Rows for Different events.
  • Integrate with other time applications like countdown counter
  • Integrate ToDo List

Have timeless fun! Drop me a note if you manage to do something satisfying after reading this article, or if you have some other cool ideas too =)

Further Readings

  1. Tutorial on using Timeline
  2. About JSON
  3. Posting to Twitter using PHP and CURL
  4. twitter api
  5. Google’s method of dynamic json data import
  6. a json inspector
  7. Creating timeline from (blog) feeds