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:
<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:
<div id="latest-news"></div> |
3. In your own JavaScript code, add the following content:
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; } } } |
Notice that I simply use a link and title above. You can replace your HTML with any of the following properties:
author
categories
content
contentSnippet
link
publishedDate
title
Now you can edit the HTML anyway you want.
// REPLACE THIS WITH YOUR OWN HTML
rssoutput += ‘‘ + feeds[i].title + ‘‘;
for the above section, can you confirm what you need to change it to? It isn’t clear to me how to edit this to get it to work…
It’s going to be finish of mine day, but before end I am reading this great article to improve my
knowledge.
You need to be a part of a contest for one of the finest websites on the web.
I am going to recommend this website!