How to integrate WordPress RSS feed into your Website using XSLT

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).

XLST Process

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&amp;a=&amp;p=&amp;sa=&amp;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):
    <xsl:for-each select="rss/channel/item"> </xsl:for-each>


    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 substring function.

  • 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:

xml.transformNode(xsl)

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" />

Final Thoughts

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.

About these ads

3 responses to “How to integrate WordPress RSS feed into your Website using XSLT

  1. Thank you for writing this article. I really enjoyed it. I work in web design as well. Keep up the excellent work!

  2. It’s actually a nice and useful piece of information. I am satisfied that you simply shared this useful info with us. Please keep us informed like this. Thank you for sharing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s