Easily pull a blog post into a regular HTML page

RSS Feeds. AKA Really Simple Syndication. As a professional web developer of over 13 years, I have to say that I never really understood why anyone would use them. Seemed like a nice idea, but never had any attraction for me.

I still had to work with them all the time because they were “in vogue” and I simply saw them as a way for other a**holes to steal content from legitimate authors. (Side note: if you are here to steal content from other websites, you can choke on something). Strangely, after all this time, I have found that the same mechanism can be quickly used for good, with the help of Google.

This article will show you how to quickly add a WordPress post to your web page using JavaScript.

Solid Statement: You can accomplish this in one of two ways: Through client-side JavaScript or through server-side calls using the language you prefer.

I will show you the JavaScript method here and the PHP method separately. See the other languages’ examples here.

Who Needs This?

I have worked on a few blogs or “blog websites.” I say blog website because the entire site was made using the blog engine. I will make it no secret that I prefer WordPress, as it is simply a triumph for PHP. However, I recently found myself working on a web property that had a non-blog site already built and wanted to add WordPress as a sub-folder within the website.

It occurred to me that a nice addition to the home page would be to add the latest blog post to the page. It would be under a “Latest News” heading.

That leaves two types of people who will use this tutorial:

Those who want to add a blog post to a page outside of their own blog installation.
Those who want to pull an rss feed from a public news outlet, such as CNN or ESPN.

How to pull a post into your webpage with JavaScript

1. Add the following 2 lines to the head of your page:

PHPview code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("feeds","1");</script>

Google PREVIOUSLY required an API key for this service. but no longer. The first line loads the Google JavaScript API. The second line loads the RSS Feed functions and calls version 1. It has been version 1 for awhile now.

2. Add a div element somewhere on your page to hold the results:

HTMLview code

<div id="latest-news"></div>

3. In your own JavaScript code, add the following content:

PHPview code

var rssfeed = new google.feeds.Feed("http://solidlystated.com/feed"); // URL of your feed, of course!
rssfeed.setNumEntries(3); // how many posts to pull
rssfeed.load(showEntries);
 
function showEntries(result)
{
    if(!result.error)
    {
        var feeds = result.feed.entries;
        var rssoutput = "";
        for(var i=0; i<feeds.length; i++)
        {				
            // REPLACE THIS WITH YOUR OWN HTML
            rssoutput += '<a href="' + feeds[i].link + '">' + feeds[i].title + '</a><br />';								
        }
        document.getElementById("latest-news").innerHTML = rssoutput;
        }
    }
}