ARG! Embeding RSS feeds into .html page with Javascript

[PandoraH]

Greetings all...been a away while, but now am back

This is more of a solution request, then a request for specific help...

Summary: Looking for a solution that will allow me to embed a RSS feed into a static .html page Start Page

Details

I am in the process of building a series of .html pages that will reside on my machine and act as my Browser Start Page (FF and Chrome).

One of the things I need to create is a set of scripts and code that will allow me to insert RSS from various sources online, and then be able to customize the look and layout of said feed. And eventually, these pages will be made public, so updating the RSS feed URLS must be simple (no more complicated then opening the .html files in notepad or dreamweaver and editing a few lines of code).

To that end, I am looking for a javascript solution that will allow customization through CSS4 and HTML4/5. If there is a non-flash/php solution that I have overlooked, I'd also consider that.


My Concerns

Based on what I have read, I'll need access to one or more API's. I do not want to use a 3rd party solution, and intend to create the Javascripts myself. The issue here is that I am not quite sure how to proceed. A lot of the data I've found via Google search is old. Some of the API's mentioned are no longer available. I've found some resources that discuss creating scripts, but they are also a bit on the old side.

I'm hoping to get some advice on where to head online to get up to date information. Or, to correspond with someone who has been doing this sort of coding recently. I am not looking to be hand held, but a push in the right direction would be much appreciated, as I am very new to this sort of thing.

Thanks!

[J. H. Rasmussen]

With the restrictions you set, i don't think your problem can be solved. If you want to read news feed with javascript, you will need to use the XMLHttpRequest object to read the news feed, but because of security, you can't use XMLHttpRequest to read the news feed from a 3rd part website. So you will need to use something in between there can read the news feed data and return it to the javascript, you will need something like php for that, or a 3rd part api.

[PandoraH]

Actually, I did mention API’s in my original post, as I think I will need to use them. I did not say I would not use API’s, but I did say I didn’t want to use 3rd party solutions.


What I meant by 3rd party solutions is the service a lot of websites offer, where you input the RSS feed URL into a form field, and the form spits out code (<script> code, specifically) that can be inserted into an html page.)

Also, please note that I did state that I may have overlooked another solution and that I would be glad to hear it. Thank you for your reply, btw.

[J. H. Rasmussen]

3rd part api / 3rd part solution, in this context it sound like the same to me, but English is not my first language, so that might be the problem.

Anyway, not really knowing if you want to use a 3rd part api or not, and 3rd part api is probably the only way to solve this problem, i will take a chance and post a link to at Google api and hope it's helpful.

Google Feed API:

With the Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.

The Google Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website.

Source: https://developers.google.com/feed/v1/

[PandoraH]

Sheesh, I have been trying to get help on this for over a week now, and it seems very few people either have the knowledge, or want to discuss it.

Here is what I posted in the Google API group, which after 5 days has still not appeared:

GAH! Help Needed: Feed API, JSON Parameters

I'm very new to this sort of programming, and am at my wits end trying to figure this out. The main problem is that I am so very new, I do not understand HOW to build this, even after doing some reading and testing. Here is what I am trying to do:

Summary:
Multiple RSS Feed deployment on a series of client side .html pages. These pages will be heavily themed using images and CSS, and the feeds will need to blend in. These .html pages will be used as my Start Page,stored on my PC, and launched by my default and alt Browsers (FF and Chrome).

Script Details

API: Google Feed API
Format: JSON


Current Difficulty

I have repeatedly read, and tried all sorts of things based on this page:
https://developers.google.com/feed/v...ide#resultJson

My current issue is that I do not where to insert, and how write the proper code to incorporate the proper JSON code to display:

Post Title with (Clickable URL)

Post Description (with code to adjust number of charecters displayed)

And also, the best way to display 3 feeds on a single page - Eventually they will be displayed in 3 column display.


This page shows my current progreess (1 Feed, no JSON paramters)

Page URL
http://www.pharper2012.byethost8.com...eed-plain.html

Thanks in advance to anyone who can help me get past this hurdle! I am SOOO frustrated!

[J. H. Rasmussen]

I made an example with 3 feeds you might want to play with:

<html>
  <head>
<style type="text/css">
.feedItemsContainer
{
	background-color: white;
	border: 2px solid black;
	width: 400px;
	margin-bottom: 10px;
}

.feedItemClass
{
	background-color: lightblue;
	border: 1px solid white;
	border-top: 0px;
}

.feedItemTitleClass,.feedItemDescriptionClass
{
	padding: 2px;
}

.feedTitleClass
{
	padding: 4px;
	text-align: center;
	font-weight: bold;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--

//These variables can be changed to fit your needs
var maxFeedItems = 10;

//the feeds - first the feeds urls, second the IDs of the containers where the feed data should be added to
var feeds = [
    ["http://www.v7n.com/forums/external.php?type=RSS2&forumids=16","Feed01"],
    ["http://www.v7n.com/forums/external.php?type=RSS2&forumids=45","Feed02"],
    ["http://www.v7n.com/forums/external.php?type=RSS2&forumids=22","Feed03"]
];

// this variable should not be changed
var curFeedIndex = 0;

function initialize() {
var feedItem = "";
var feed = new google.feeds.Feed(feeds[curFeedIndex][0]);
feed.setNumEntries(maxFeedItems);
feed.load(function(result) {
	if (!result.error) {
		feedItem = "<div class=\"feedTitleClass\">" + result.feed.title + "</div>";
		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];
			feedItem += "<div class=\"feedItemClass\">";
			feedItem += "<div class=\"feedItemTitleClass\"><a href=\"" + entry.link + "\">" + entry.title + "</a></div>";
			feedItem += "<div class=\"feedItemDescriptionClass\">" + entry.contentSnippet + "</div>";
			feedItem += "</div>";
		}
		document.getElementById(feeds[curFeedIndex][1]).innerHTML = feedItem;
		if(curFeedIndex < feeds.length)
		{
			curFeedIndex++;
			initialize();
		}
	}
});
}

google.load("feeds", "1");
google.setOnLoadCallback(initialize);

-->
</script>
  </head>
  <body>
    <div id="Feed01" class="feedItemsContainer"></div>
    <div id="Feed02" class="feedItemsContainer"></div>
    <div id="Feed03" class="feedItemsContainer"></div>
  </body>
</html>

[PandoraH]

Gosh thanks! This is a great example. I was pretty close with some of the code for the title and description, but way off on other stuff. Again, many thanks

[Emmett]

I am looking for something similar. I need one that will display the latest url from a feed. I have figured out how to display the latest post with a link to it but I do not want the post title in the display.

[J. H. Rasmussen]

Originally Posted by Emmett

I am looking for something similar. I need one that will display the latest url from a feed. I have figured out how to display the latest post with a link to it but I do not want the post title in the display.

Could you give me an example of how you want the feed item to be shown or give a little bit more details about how the feed item should be shown?

[Emmett]

I do not want the post title to show. I want the url or the site title to be displayed with a short description of the post.

[J. H. Rasmussen]

Originally Posted by Emmett

I do not want the post title to show. I want the url or the site title to be displayed with a short description of the post.

Something like this:

<html>
  <head>
<style type="text/css">
.feedItemContainer
{
	background-color: white;
	border: 2px solid black;
	width: 400px;
	margin-bottom: 10px;
}

.feedItemClass
{
	background-color: lightblue;
	border: 1px solid white;
	border-top: 0px;
}

.feedItemURLClass,.feedItemDescriptionClass
{
	padding: 2px;
}

.feedTitleClass
{
	padding: 4px;
	text-align: center;
	font-weight: bold;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--

function initialize() {
var feed = new google.feeds.Feed("http://www.v7n.com/forums/external.php?type=RSS2&forumids=16");
feed.setNumEntries(1);
feed.load(function(result) {
	if (!result.error) {
		var entry = result.feed.entries[0];
		var shownURL = entry.link;
		if(shownURL.length > 40)
		{
			shownURL = shownURL.substring(0, 40) + "...";
		}
		var feedItem = "<div class=\"feedItemClass\">";
		feedItem += "<div class=\"feedItemDescriptionClass\">" + entry.contentSnippet + "</div>";
		feedItem += "<div class=\"feedItemURLClass\"><a href=\"" + entry.link + "\">" + shownURL + "</a></div>";
		feedItem += "</div>";
		document.getElementById("Feed").innerHTML = feedItem;
	}
});
}

google.load("feeds", "1");
google.setOnLoadCallback(initialize);

-->
</script>
  </head>
  <body>
    <div id="Feed" class="feedItemContainer"></div>
  </body>
</html>