Archive for the 'WP-Plugins' Category

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.

Juicing Up Photo Viewing Experience: Part I

on this blog, on your wordpress site, or anywhere else. This series is a result of my recent craze with scripting/programming and photo ideas.

Screenshot of Fotobook Highslide

Previous Next Close
Fotobook Highslide - Mash up of Wordpress, Facebook Photos & Highslide JS

1. Photo Gallery
I tried a couple of wordpress plugins in the past: Gallery2, Simple Extended Gallery, Flickr….

They were perhaps good, but perhaps complex, lacking and I didn’t seem to like it. Then I created PhotoZip and even though Photozip plugin had its short comings (eg. perhaps a little slow due to batch processing), I’m glad Tim have the interest to improve it so much better than I would.

It is only recently I found out about Aaron Harp’s Fotobook, an integration/mashups of Facebook’s photos into your blog. So I tried it, and it works.

The integration is good (since I use facebook too), the layout neat, the configuration all done with much ease. It seems like it was something I tried looking so hard before, now that I found it, I love it. My photo gallery can be viewed by clicking on the Photos tab.

2. Highslide
Tim’s improved PhotoZip supports LightBox, so does Fotobook. No doubt it gives great effect and I like it too when used appropriately. Even my cousin’s portfolio uses it to enhance viewing experiences.

However, a reason why I don’t use it? Perhaps it was due to some negativity when I experienced it on some sites. But when I come across the Highslide javascript library, I thought I would use it for the following reason
1. At the first impression it reminds of LightBox- to expand an image in the same window.
2. However, unlike Lightbox, it is less obstructive. The background is not grayed out, and window can still scroll, and the expanded image can be dragged around.
3. It seems more reactive.

Not only it good to find the right tool for the right job, it good to find the best package available. So I’m using Highslide Wordpress plugin. Since fotobook was written in a way it was simple to customise it, I created a style/theme similar to Aaron’s lightbox style, except it works with highslide. Check out one of my gallery for example.

(Tip: You can use arrow buttons on your keyboard to navigate through the photos. You can also click/expand more than one photo at a time too.)

Click here to download Highlight Style for Fotobook.

Instructions:
Ensure you have Fotobook and Highslide plugin working.
Copy the highslide folder into fotobook styles folder
(eg. /wordpress/wp-content/plugins/fotobook/styles)
Select the highslide style under fotobook options.
View your photo gallery, test and enjoy!

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!

WP 2

Ok, so Wordpress 2.0 ‘Duke’ was released.

Offical release here.
http://wordpress.org/development/2005/12/wp2/

Download it here
http://wordpress.org/download/

Read whats new
http://asymptomatic.net/2005/11/29/2135/whats-new-in-wordpress-20

Learn about how to upgrade from your previous WP versions.
http://codex.wordpress.org/Upgrading_WordPress

Or maybe you want to read some slashdot commotion about it
http://developers.slashdot.org/comments.pl?sid=172631

[Edit]GRR.. no idea why do my posts keep getting truncated.

I tried out wordpress 2 over at the free blogging service at Wordpress.com which is not bad, comes with themes, plugins like live search..

http://zz85.wordpress.com/

My consensus, no doubt, wordpress has been and is improving. wp2 has more features, especially ajax admin, more abstraction so on.. As for ajax admin, that was what I like and hoping for, but for now, im not trusting it yet. On the programmer’s side, I not willing to commit time to develop any plugins. But I’m sure, given some time, we should get some impressive plugins from other writers for wp2. On the user side, its pretty much the same.. so my decision is still to hold on the older versions.

Threaded/Nested Comments History and Beta 1

When I first saw it(can’t remember on some forums or wordpress), the threaded comment idea got stuck to me.

When I wanted to install that for my blog, it seems that I couldnt even decide which webpage to visit and even more complex for to to decide what to install.

Anyway at least I knew later 3 important names were involved.

Dodo.
Mark.
Brian.

It was difficult for me to know whats going on, because the installation instructions does not seem to be easy and for no reason I still cannot visit Brain’s blog (I managed to get the code looking at the source, and from wiki/). So as far as I could make out the history, the story goes something like this.

Dodo, running her on blog using the b2 engine,  created the earilest threaded comments hacks or plugin I could find.

Mark,  came to "translate or port" the script for wordpress 1.2. Although it supports non-javascript browsers, everytime you click on a comment  to reply it, it redirects you to another page to post your comment.

Dodo have since moved over to wordpress. She finds that  its troublesome to open another page just to submit a comment. She add javascript and a hidden field to mark’s script  so a visitor can post a thread reply in the same page.

Dodo then switch to 1.5, and has upgraded her scripts. She also has plugins for notifying visitors who made comments through email called Threaded Comments Notification.

The latest advancements for the plugin was made by Brian. More javascript and DOM was involved, css, and option page was also there. Brian’s threads could be expanded and hidden, giving the wandering effect. Clicking the reply to comment would move the commentbox into the thread, compared to previous version where the page just scrolled to the bottom to make a comment.

Then came along I, who wanted to make things even similar. I didnt want to modify the database or edit the comment.php file. So I used javascript, "injecting" fields into the comment page, using DOM to do the reordering of comment boxes. Much work was based from Brain’s version. If someone do no have javascript enabled, he would see the normal layout.

Of course its far from perfect, and it has alot of issues. Anyone who can help is great. Esp. it does not work with IE.

Goto the plugin page.