Tuesday, October 16, 2012

Using Wordpress for a Simple News Web Widget.


I often find myself needing a simple blog type news feed for the various sites I'm creating.  In the past when I was still doing my primary development on .NET I rolled my own solution using a SQL database to hold the entries.  At first I'd just put the data into the database directly but of course over time I wanted to be able to edit and add new entries from a web interface.  So I found myself incorporating TinyMCE and pretty soon I was writing a whole management interface just for editing news posts.  I knew it was time to stop myself before completely falling prey to NIH syndrome.

Lately I've been doing a fair amount of small projects using Wordpress and it seemed that I could just use its CMS to hold my news posts. I'd now have a repository for my posts as well as the ability to edit them.

In order to use the post data in my other sites I wanted to export my posts in JSON format. I've written a fair amount of JSON exporting code server side so I knew this wouldn't be a problem. Luckily I took a look in the Wordpress plugin repository and there's already a pretty nice plugin that dumps any post in JSON.

If you want to do this you first need to download and install the latest version of Wordpress.  This should take you all of 5 minutes unless you've never done it before in which case it might take you 30 minutes if you need to install LAMP or WAMP if you're on Windows.  You can also do it in about 5 minutes on an Amazon EC2 micro instance by following this excellent guide.

You will also need to download the JSON plugin and copy it to the plugins directory.  You can now create new posts in Wordpress and pull the data out in JSON. 

I'm using this for my Madtown yoga website.  If you look at the site you will see a list of  news posts on the right that are fed by the Wordpress blog.

The simple blog interface is here, where you can see a series of posts in the default wp skin. If you look here you can see the exact same posts rendered out as JSON data. Since I'm only using the blog as a data repository I didn't bother messing with the Wordpress UI. 

If you look at the HTML for the news section on the right you will only see two lines of relevant code.

<script src="/Scripts/wpnews.js" type="text/javascript"></script>
<div id="news-widget-container"></div>

I've implemented this as a web widget. A web widget is a way to allow people to very simply place some kind of functionality on a web page.  A container div with a specific ID is placed on the page and then that div is filled in on the client side by the corresponding JavaScript. If you want a good tutorial on web widgets you can check out this article.  It's the article I used to originally craft this news widget a few months ago.

In this case the JavaScript checks to see if JQuery v1.6.4 is currently loaded on the page and if not it loads it. It then reads the data from my Wordpress site as JSON into an array and then adds the posts as a series of divs to the HTML DOM . The actual formatting of the data is handled by a separate CSS file.

If you want to have some fun make a simple text document on your desktop that looks like this and save it as test.html.

<html>
<script src="http://madtownyoga.com/Scripts/wpnews.js" type="text/javascript"></script>
<div id="news-widget-container"></div>
</html>


If you then open this test.html file in your browser you should see an unformatted list of my news posts in the document you just created. If you add in the line

<link href="http://madtownyoga.com/Content/Site.css" rel="stylesheet" type="text/css" />

you will then see it with my formatting applied to the divs.  What's nice about widgets, besides the simplicity of using them, is the ability to their look on your page.  In this case add simple formatting to the classes FrontPageNewsTitle and FrontPageNewsContent and you can make my news feed look however you like on your web page.

If you take a look at the source code for wpnews.js it should be pretty straight forward to understand what I'm doing.  The majority of the code at the bottom is simply used to get JQuery loaded up if it isn't already used on the page.

A special note to be aware of when pulling data from a web site in JSON  format. Often when pulling data into a web widget the domain which has the data may be different from the domain from which we load our page.  The issue here is that JavaScript is not allowed to load JSON data cross domain. The way that you solve this problem is by using a format called JSONP. The only difference in JSON and JSONP is that in the latter case the data is wrapped in a function and then returned as an object when that function is called.  Since code can be loaded and executed cross domain you just got around the problem!


1 comment: