FeedSweep How-To's

How do I incorporate a FeedSweep widget into my web page or blog?

The critical step in placing your FeedSweep widget onto your web or blog page, is to ensure it is placed in the right location. In a web page, this means it is necessary to place the FeedSweep code in the correct location within the HTML; with a blog page, it means the blog template HTML must be properly modified.

Make certain the editor you use on your web or blog page, does NOT add extraneous characters or your FeedSweep widget will not work. A plain text editor is strongly recommended.

For this example, we will use a typical 3-column web page with HTML source code like this.

 1 <html>
 2 <head>
 3   <title>Typical Three Column Web page</title>
 4   <style type="text/css" media="screen">@import "layout3.css";
 5   </style>
 6 </head>
 7 
 8 <body>
 9   <div class="content">
10     <h1>Sample Web Page Heading</h1>
11     <p>Lorem ipsum dolor sit amet, consequat ut te est. Mazim diam possim vulputate.
12     Insitam qui ad legunt amet modo. Veniam quinta lectorum legentis eua ii.
13     id nunc. Aliquam videntur, in mutationem enim per. Fiant consectetuer 
14     amet aliquip. Ex te me sed liber feugiat consequat usus. Est dynamicus
15     consuetudium. Ad hendrerit dolor dignissim erat eorum modo cum, decima.</p>
16   </div>
17 
18   <div id="navAlpha">
19     <h2>Links</h2>
20     <p><a href="" title="">Fake Link One</a><br />
21     <a href="" title="">Nothing Here</a><br />
22     <a href="" title="">Links Nowhere</a><br /></p>
23   </div>
24 
25   <div id="navBeta"><!-- Important: content column width is maximum 190px -->
26     <h2>My FeedSweep</h2>
27     <p>This is where the FeedSweep widget should be added.</p>
28   </div>
29 </body>
30 </html>

To see this sample page, click here. Note the column width is limited to a maximum width of 190px, therefore we have to ensure our FeedSweep widget has been created with the same width.

THe HTML of our sample page, after inserting the FeedSweep widget code, now looks like this:

 1 <html>
 2 <head>
 3   <title>Typical Three Column Web page</title>
 4   <style type="text/css" media="screen">@import "layout3.css";
 5   </style>
 6 </head>
 7 
 8 <body>
 9   <div class="content">
10     <h1>Sample Web Page Heading</h1>
11     <p>Lorem ipsum dolor sit amet, consequat ut te est. Mazim diam possim vulputate.
12     Insitam qui ad legunt amet modo. Veniam quinta lectorum legentis eua ii.
13     id nunc. Aliquam videntur, in mutationem enim per. Fiant consectetuer 
14     amet aliquip. Ex te me sed liber feugiat consequat usus. Est dynamicus
15     consuetudium. Ad hendrerit dolor dignissim erat eorum modo cum, decima.</p>
16   </div>
17 
18   <div id="Div1">
19     <h2>Links</h2>
20     <p><a href="" title="">Fake Link One</a><br>
21     <a href="" title="">Nothing Here</a><br>
22     <a href="" title="">Links Nowhere</a><br></p>
23   </div>
24 
25   <div id="Div2"><!-- Important: content column width is maximum 190px -->
26     <h2>My FeedSweep</h2>
27         <p>
28     <!-- FeedSweep -->
29     <script type="text/javascript" src="http://www.feedsweep.com/products/feedsweep/
30     producer.aspx?feeds=http%3a%2f%2frss.news.yahoo.com%2frss%2fworld&width=190">
31     </script>
32     <!-- FeedSweep -->
33     </p>
34   </div>
35 </body>
36 </html>

To see the sample page with the FeedSweep widget code inserted beginning with line 27, click here. Note that this is live code. The FeedSweep you see is displaying live, fresh content. That's all there is to it. Rather easy, isn't it!

How to see the raw output of a FeedSweep widget URL?

Lets say you have created a FeedSweep widget that has produced this code:

<!-- FeedSweep -->
<script type="text/javascript" src="http://www.feedsweep.com/products/
feedsweep/producer.aspx?feeds=http%3a%2f%2frss.news.yahoo.com%2frss%2fus
&title=This+is+my+FeedSweep"></script>
<!-- FeedSweep -->

To see the output of this FeedSweep, strip out the URL contained within the "src" attribute and paste the entire URL into a browser (without ditto marks, but with 'http://'). In this case of the above example, it would be:

http://www.feedsweep.com/products/feedsweep/producer.aspx?feeds=http%3a%2f%2f
rss.news.yahoo.com%2frss%2fus&title=This+is+my+FeedSweep

Click here to see it in your browser now.

If you've written an article with relevance to feeds or FeedSweep, and would like to be published on this website, we would love to hear from you! Please contact us.