Integrating News Feeds (cont'd)

The Controller
Next, you need to create a JavaScript file as part of the Controller tier. In this application, the Controller must prepare the data within the Model for presentation. From within the script, you'll need to access the article array from the news feed, build an HTML string from the properties you'd like to display, and finally, display the resulting HTML.

Open up your text editor and create the file newsfeed.js:

   function writeHeadlines(numHeadlines,title){
      document.write('<p style="font-weight: bold">' 
         + title + '</p>');
      for(i=0; i<numHeadlines; i++){
         tempString = '<p>';
         tempString += '<a style="font-weight: bold; " +             
            "color: maroon" 
            target="_blank" href="' + 
            article[i].url + '">';
         tempString += article[i].headline_text + 
            '</a><br>'
         tempString += article[i].source + '<br>';
         tempString += article[i].harvest_time;
         document.write(tempString);
      }
   }
The writeHeadlines()function generically allows you to determine the number of headlines to display for any given news feed. It also establishes a title for the news feed. The sample code displays three news feeds, but that number is arbitrary.

There are a few guidelines for making use of the free news feeds at moreover.com:

  1. Don't change the headline text for any article
  2. Always display the source of the information
  3. Open the articles in a new window.
If the news feeds are to remain free, it's important to follow the guidelines. In addition, I've chosen to use the url property rather than the document_url property of any given article. There are a couple of reasons for this:

  1. The document_url isn't guaranteed to open the article. It may only open the home page of the source and then your users will have to hunt for the article link.
  2. The url property points to a Perl script on moreover's server. I suspect that this is how they get sources to contribute to the free news feeds. It also points to the individual article rather than a home page.
Swapping out moreover.com's feeds for those provided by Magportal requires only a simple re-write of the writeHeadlines() function to access the appropriate properties and arrays. The following example uses the Web Development feed referenced by the array named "a_57". You'll receive the URL to the feeds you'd like to display when you register for them at Magportal's site.

   function writeHeadlines(numHeadlines,title){
      document.write('<p style="font-weight: bold">' 
         + title + '</p>');
      for(i=0; i<numHeadlines; i++){
         tempString = '<p>';
         tempString += '<a style="font-weight: bold; " +             
         "color: maroon" 
         target="_blank" 
         href=http://magportal.com/cgi-bin/rdir.cgi?w="' + 
            a_57[i].i + '">';
         tempString += a_57[i].t + 
            '</a><br>'
         tempString += a_57[i].m + '<br>';
         tempString += a_57[i].pd;
         tempString += '<a href=http://www.magportal.com>
            from MagPortal.com</a>';
         document.write(tempString);
      }
   }
The guidelines for using Magportal's feeds are virtually identical to those of moreover with the exception that you must provide a link to MagPortal.com in close proximity to the article listing. Once again, I chose to use the id property for the link but, since Magportal only provides the id, I needed to append the id to the server location to let users access the article in a single click.




Previous: The View		 
Next: Putting It All Together


Introduction Where Are The News Feeds? The Model
The View The Controller Putting It All Together


Return to Get Help with dhtml Page

Return to Main Get Help Page 		 





Problem: Users like news feeds, and they can increase traffic to your site, but the real trick is to implement them and avoid creating a maintenance nightmare. How can you implement a newsfeed generically, with reusable code?




Solution: Use the Model-View-Controller (MVC) architecture to minimizes the changes required to switch news feeds. This solution shows you how to switch news feeds by changing just a few lines of code.



Find Out More
• Get the Code

• Microsoft Windows Script Technologies

• Essential JavaScript

• Live Sample: Test the Newsfeed from Moreover.com

• Moreover.com

• Backwash.com

• Magportal.com
TALK BACK
Do you use a newsfeed service now? Did you think you had to create complicated script or use controls to implement newsfeeds in your site? Do you like this article's approach to implementing a newsfeed? Join the discussions at Web.dhtml.general and Web.dhtml.scripting to get answers, make comments, or help others with their problems.
Talk Now


Sponsored Links