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.
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!
Thanks a ton for JSON plugin ! http://www.wordpresstemplates.net/