Symphony.

Step 8. Integrate a Twitter Feed

Our last task is to pull in data from a Twitter feed and integrate it into our layout. Symphony's dynamic data sources make this a trivial task.

8.1. Create your Twitter Data Source

Go to Blueprints > Data Sources and click the green Create New button. Name your data source Tweetings, and in the Source dropdown select "Dynamic XML". You'll see the data source editor change based on your selection.

In the Dynamic XML section, in the URL field enter:

http://search.twitter.com/search.atom?q=%23symphonycms

Note that you can use parameters in this field too, to make bits of the URL dynamic—something that we'll leave aside for now.

Let's change the cache time to 2 (you'll see why later), and leave the rest of the fields at their default values and click Create Data Source.

Now let's attach the new DS to our index page. Go to Blueprints > Pages and click "View Greetings". Select the "Tweetings" data source in the Data Sources multiselect and click Save Changes (careful not to deselect the already-selected data sources).

Now let's head to the home page to see if the data's coming through. Go to http://your-site.com/?debug. Scroll down the XML source and you should see something like this:

Just like that, we've pulled a Twitter feed into our home page.

8.2. Resolve Atom Namespace Conflict

There's a slight hitch though. If you look very closely, you'll see that the Atom feed provided by Twitter uses the default namespace:

<feed ... xmlns="http://www.w3.org/2005/Atom" ... >

All the other namespace declarations on the feed element use prefixes (xmlns:google, xmlns:twitter), but Atom takes the default namespace (no prefix). This will cause a conflict when we try to address the elements in the feed from our template. To get around this, we just have to make a minor adjustment to our template. Go to Blueprints > Pages and click "home.xsl" in the Template column. At the top of your stylesheet, you'll see this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Here, our stylesheet declares the xsl namespace prefix. It's what allows us to use elements like <xsl:template>. What we have to do is assign a namespace to the elements in our Atom feed in order to resolve the default namespace conflict. Add the atom namespace as shown below:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:atom="http://www.w3.org/2005/Atom">

Now we'll be able to address elements inside the Atom feed. Instead of /data/tweetings//entry (which wouldn't work because of the conflict), we can now use /data/tweetings//atom:entry.

8.3. Add the Twitter Feed Content to your Template

Ok now let's get those tweets onto into our layout. In the data template (<xsl:template match="data">), after the existing <ul>, add the following:

<div id="tweets-list">
    <h3><del>Gr</del>Tweetings</h3>
    <ul>
        <xsl:apply-templates select="tweetings//atom:entry"/>
    </ul>
</div>

Then, at the bottom of our page template, just above </xsl:stylesheet>, add a matching template for our atom entries:

<xsl:template match="tweetings//atom:entry">
    <li>
        <p><xsl:value-of select="atom:content" disable-output-escaping="yes"/></p>
        <p class="meta">
            <a href="{atom:author/atom:uri}"><xsl:value-of select="substring-before(atom:author/atom:name, ' (')" /></a>
            <xsl:text> </xsl:text>
            <xsl:call-template name="format-date">
                <xsl:with-param name="date" select="substring-before(atom:published, 'T')"/>
                <xsl:with-param name="format" select="'x M Y'"/>
            </xsl:call-template>
        </p>
    </li>
</xsl:template>

This template creates a list item (<li>) for each entry in the atom feed. The list item contains two paragraphs. The first outputs the value of the entry's <content> node. We've added the disable-output-escaping attribute so that our page will actually get unescaped HTML to render (instead of stuff like <a>). Then we do some finagling to trim the author name and date for our meta paragraph. We're able to pass the modified date right into our format-date template from Step 2. Your final home.xsl template should look like this.

Save your changes and Voila! The Twitter feed is now integrated right into your homepage alongside the rest of your content. Go see for yourself:

Conclusion →