First of all, I am going to take as my example, my own website, kirstiebirr.com which has integrated the WordPress RSS feed within it on both the home page and on the blog page in two different forms. The aim of this blog post is to help others who are trying to do the same and give some tips for overcoming some of the pitfalls along the way. This does assume some web development experience (but hopefully not too much).
First, get your WordPress RSS feed
Your feed is located at the URL which is the same as your WordPress blog URL with /feed added to the end, e.g. kirstiebirr.wordpress.com/feed (N.B. there is also a comments feed which is located on your blog page with /comments/feed added on).
Transforming your RSS feed into user friendly HTml
Ultimately, we desire to display the data from our blog into our website in nicely formatted xHTML. In order to do this conversion quickly and easily, we use XSLT. XSL stands for EXtensible Stylesheet Language, and is a style sheet language for XML documents and XSLT stands for XSL Transformations. There is a great tutorial on XSLT for beginners at w3schools.com. The transformation of RSS to HTML using XSLT can either be done within the browser or on the web server. In this example used in this post, it has been done on the server side. This removes the possibility of incompatibility of some web browsers.
creating the transformation style sheet
The XSL document is what the parser on the server will use to determine how the RSS feed should be rendered. An example of the XSL document is shown below:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <xsl:stylesheet version="1.0" 3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 4 xmlns:content="http://purl.org/rss/1.0/modules/content/" > 5 <xsl:output method="html"/> 6 <xsl:template match="/"> 7 <html> 8 <head> 9 <link rel="stylesheet" type="text/css" media="all" 10 href="http://s1.wp.com/wp-content/themes/pub/coraline/ 11 style.css?m=1304098755g" /> 12 <link rel="stylesheet" 13 href="http://s0.wp.com/wp-content/themes/h4/global.css? 14 m=1297799136g" type="text/css" /> 15 <link rel="stylesheet" 16 href="http://s0.wp.com/wp-content/mu-plugins/admin-bar/ 17 admin-bar-css.php?t=Coraline&a=&p=&sa=&td=ltr" 18 type="text/css" /> 19 </head> 20 <body> 21 <h1 style="font-family:arial;font-style:italic;"> 22 Latest blog entry 23 <span style="font-family:arial;font-style:italic;"> 24 - Last updated <xsl:value-of 25 select=" 26 substring(/rss/channel/item[position()=1]/pubDate,0,23)" /> 27 </span> 28 </h1> 29 <h2 style="font-family:arial;font-size:1em;"> 30 <xsl:value-of 31 select="/rss/channel/item[position()=1]/title"/> 32 </h2> 33 <p style="font-family:arial;font-size:0.875em;"> 34 <xsl:value-of 35 select="/rss/channel/item[position()=1]/content:encoded" 36 disable-output-escaping="yes"/> 37 </p> 38 </body> 39 </html> 40 </xsl:template> 41 </xsl:stylesheet>
Initially, this can look a little daunting, but going through it line by line will help make it more manageable for the less technically minded.
- Line 1: This line is needed – just add it as the first line of every XSL transform.
- Lines 2-4: This is the opening of the stylesheet container. It also contains as attributes all the namespaces which are used within the XSL document. These should generally be added as and when required (with the exception of the xsl namespace, which should always be
xmlns:xsl="http://www.w3.org/1999/XSL/Transform". When a namespace is required, take it from top of WordPress RSS feed source.
- Line 5: Describes the output result of the XSLT. In this case, it is HTML.
- Line 6: Tells the parse to start applying the XSL from the top of the RSS feed.
- Line 7: Start of the resulting output HTML
- Lines 8-19: The head element of the HTML output. This contains the links to the CSS stylesheets which are used within the WordPress blog. To obtain these links, goto the WordPress blog, view the source and copy all the link elements of type
"text/css". Of course, if you want a different style (e.g. font, colours, etc) to the blog as it appears in WordPress, then do not copy the links to these stylesheets.
- Line 20: Start of the HTML body output.
- Lines 21-28: This line defines the date header formatting of the blog entry. Note that this XLS only transforms a single entry. If we wanted to apply this over all the blog entries in the WordPress RSS feed, we would surround lines 21-37 with the following (and also remove the occurrences of
[position()=1]within the XSL):
In this instance, we have some static text (where we have defined the style inline), which states this is the latest blog entry and give the date and time of when this was last updated. This information is being pulled out of the RSS feed using:
<xsl:value-of select="substring(/rss/channel/item[position()=1]/pubDate,0,23)" />
This selects published date of the RSS item which is at position 1 in the list of items. As we are not interested in the seconds of when the blog was published, we remove them using the
- Lines 29-32: This will extract the title of the first entry in the RSS feed
- Lines 33-37 : This line extracts the contents of the first blog entry. However, as content is not recognised namespace, we need to add its definition to the list of namespaces in line 2 (this definition can be obtained from the source of the RSS feed). The attribute
disable-output-escaping="yes"directs the parser to take the data from within the CDATA container.
- Lines 38-41: Correctly close all the open element tags.
Configuring the Server to use the XLS Transform
Now we have the XLS stylesheet done, we now need to configure the server to load in the WordPress RSS feed and transform it as we defined above. This can be done within a number of web based languages including PHP, Java and ASP. As the kirstiebirr.com website is built ASP, the example below uses ASP.
1 'Load the contents of the RSS feed into memory 2 Set xmlpre = Server.CreateObject("MSXML2.ServerXMLHTTP") 3 xmlpre.Open "POST", "http://kirstiebirr.wordpress.com/feed/", _ 4 False 5 xmlpre.Send 6 text = xmlpre.ResponseText 7 8 'Load XML 9 set xml = Server.CreateObject("Microsoft.XMLDOM") 10 xml.async = false 11 xml.loadXML(text) 12 13 'Load XSL 14 set xsl = Server.CreateObject("Microsoft.XMLDOM") 15 xsl.async = false 16 xsl.load(Server.MapPath("wordpress.xsl")) 17 18 'Transform file 19 Response.AddHeader "Content-Type", "text/html;charset=UTF-8" 20 Response.CodePage = 65001 21 Response.CharSet = "UTF-8" 22 Response.Write _ 23 (Replace(xml.transformNode(xsl),"<a ","<a target=""_blank"" "))
Lines 1-6: The first ServerXMLHTTP object gives us a way for invoking a URL without any user interaction. Using it we open a connection to the our WordPress RSS feed and then make the request. Finally, we put the response for the request into a variable called text.
Lines 8-11: Next we create a XMLDOM object. This is used to parse the plain text currently stored in the text variable into an internal tress like structure.
Lines 13-16: Then we have to create another XMLDOM object and do the same thing for our XSL document we created earlier.
Linse 18-23: Finally, we transform the RSS feed into our desired HTML using the XSL we defined earlier. This is done using:
However, there are a few things we might like to do to the output before we present it the browser. Firstly, we want to make sure our output is UTF-8, if not, we might end up with some weird characters appearing in our output. Even if we have stated UTF-8 encoding in our XSL document, we must also state UTF-8 for the output of the XSLT. In this example, this is done in lines 19-21. The final thing done before the writing the result of the transform to the response is to insert all
target="_blank" into all the hyperlinks so that links will open a new tab within the web browser. This is especially helpful if the XSLT output will eventually reside within an iframe (of course
target="_top" would also have been a valid option). This operation could have also been done within the XSL stylesheet.
Presenting the Transform with a Web Page
Lastly, we need to add our blog to a Web Page. The easiest and most versatile way is to put it into an iframe. An example of this is shown below (where the XSLT processing script is located at http://www.kirstiebirr.com/xml/wordpress.asp):
<iframe src="http://www.kirstiebirr.com/xml/wordpress.asp" style="border-width:0;background-color: white" width="720" height="720" frameborder="0" scrolling="auto" />
Of course there are some plugins which exist for doing this stuff already, which might be easier to set up. However, once you have this in place, you would be able to use XSLT in a variety of ways with some minor adjustments to the XSL stylesheet. It has the advantage that it is not limited to just WordPress, but any well formed RSS feeds (such as podcasts) or any other XML document.