How To Create A Mash Up Site Like iGoogle and Pageflakes With Popular AJAX Functions

Posted on 2007-10-19
Last Modified: 2013-11-18
Sites like iGoogle and use external content feeds and with clever use of AJAX, the user is able to move and re-arrange content boxes around in the page, add unique content or delete and customize to their heart's contentment.

If I wanted to create a similar website where users could select from external rss feeds and display them on their own 'mashup page', how could I do that?

I looked at the Google web developer tools, thinking they were offering something, but it turns out they only want you to make stuff for their own iGoogle page.  I have an idea for my website where I want to create like a information directory page - where a user can add a list of useful telephone numbers or email address on their 'mashup page', but then they can delete or add modules whenever they need to, with complete freedom.  Essentially the same core functionality found on the previous example sites, but maybe not as complex or with so much flair.

I'm sure there are many others out there wondering how to do the same thing.  I guess it may need the hands of an experienced developer, but how to start such a project?
Question by:thyros
    LVL 11

    Assisted Solution

    Just to clarify, the movable panels aren't AJAX but are often associated with AJAX since apps that use it are typically the ones with these interactive features. Google does offer a toolkit to build apps like these called the google web toolkit ( but it's a server side language using java.

    There are, however, tons of AJAX frameworks and libraries that also have the animation features that these do.
    scriptaculous -
    jquery -
    EXT JS -
    yahoo UI -
    dojo -

    And plenty more. Find one you like and start playing with it.
    LVL 82

    Accepted Solution

    First of all, since you are talking about various external domains, the browser security will not let you do this. However, you can achieve this through the marriage of client and server-side scripting:
    Server site:
    a. make a list of your urls EX.
    var uri = new Array();
    notice that you have inadvertedly assigned an id to each uri. Index 0 of the array is for the first array, index 1 is for the second array, etc.

    b. Check if the client browser has sent you uri id.
    If not, show them the options or show the default page
    If so,  use a server-side utility to import the page

    A sample server-side utility to do this would be MSXML2.ServerXMLHTTP.4.0 on a windows machine running IIS. Not sure what is available for other platforms.
    c. write the page to the client

    Client Side:
    1. Create an AJAX enabled page that request unique pages from your server.
    2. show a list of available url
    3. upon request make an ajax request to your page, indicating the id of the url that you are interested in. An example uri could be:'myProxy.asp?uri=1',false);
    You can make use of ajax frameworks if you do not want to implement it from scratch
    Look at:

    4. upon receiving the content from your server, update your content.
    5.Smile and be proud.

    Author Comment


    Thanks for your comments.

    Re; external domains - iGoogle and Pageflakes etc seem to be making use of RSS feed content to incorporate into the page, so that should not cause any browser security issues, no?

    For my own project, I want to load different 'modules/gadgets' of information from my own site, so I am not too bothered about external content immediately, but it would be a nice bonus to be able to add rss feeds.

    I guess what I am essentially trying to replicate is an RSS feed reader, but one that perhaps allows a bit of re-arranging, and incorporating a few web gadgets like a sticky-note txt editor.

    I am not a coder so I don't think I'll be programming this stuff myself, but I was hoping there would be a ready platform to take and build upon - like a white label rss feed reader.

    I'll take a look through those links and see what I can find..
    LVL 82

    Expert Comment

    The browser does not know nor care if the content is in RSS, HTML, or whatever format. The security limitations/restrictions are dictated by whether or not the page you are trying to "import" via scripting come from your own site(allowed) or from some one else's site(not allowed). Furthermore, I believe the restriction also applies if your "rss feed reader" is at and it is trying to get the content from Even though your feed reader and the rss feed reside on the same network (, strictly speaking, they are on different domains.
    Probably not your case, but something to keep in mind.
    I know EXACTLYwhat you are trying to do (been there, done that, but cannot share the url). That is why I posted step by step instructions on my previous post. Basically I even told you the "workaround" to retrieve rss feeds that do not come from your site!

    The styling/layout (meaning those extra gadgets that you want to incorporate) should not be a problem.
    The most challenging part would be to retrieve the feeds. If you had a gmail account maybe we could instant message. This way its is just crazy.

    Author Comment

    Hi Hielo,

    I will need to study this thread in some more detail to see if I can fully understand it.  ** removed content with contact info (i.e. email, skype) - b0lsc0tt **

    LVL 82

    Expert Comment

    Were you able to implement this?

    Author Closing Comment

    Sorry for the delay, but thanks for your help.

    Author Comment

    I wasn't aware of the contact info restrictions, but sure it makes sense.

    Regarding the topic, another option is to use some existing scripts and adapt them.

    Free but basic:

    Lots of features, but with a price tag:

    Hopefully that will help anyone looking for a quick solution.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now