457,706,384 widgets served
The largest re-publisher of feeds on the Internet
  • Home
  • FeedSweep Insertion

How to install your widget code into a web page or blog

We understand that copying and pasting your widget embedding code can sometimes be confusing, especially if you are new to HTML and web design. This guide will cover some HTML basics, give two examples of pasting code using two different types of web editors, and discuss common problems you might experience after pasting the widget embedding code.

This guide covers many topics, so feel free to skip ahead to a specific section:

  1. Copy your Widget embedding code
  2. Paste your Widget embedding code
  3. HTML Basics
  4. Paste using WYSIWYG editors
  5. Common Problems
  6. Viewing the raw output of a FeedSweep widget

1. Copy your Widget code

Let's start with the basics. You use the FeedSweep Designers to produce embedding code for your widget. Your widget embedding code will look something like:

<!-- FeedSweep vXXX --> <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 -->

The purpose of this code is to talk to the FeedSweep servers and obtain the widget you have created, complete with fresh content, and inject it exactly where you inserted the code in your web page or blog template.

To obtain your Widget code, click on the "Get Code" button at the bottom of any of the FeedSweep Designers and note the produced FeedSweep Widget Embedded Code. This is what you will copy and paste into your site's HTML source code or blog template.

Embedded Code Box

To copy your code, highlight the contents of the FeedSweep Widget Embedded Code box by clicking anywhere in this box with your mouse. You will see the entire contents are selected and highlighted automatically.

Next, from your browser's Edit menu, choose Copy in order to copy the highlighted area. If you prefer not to paste your code directly into your web page's HTML source code or blog template at this time, you can paste it into an alternate application such as Notepad for temporary storage.

If you make changes to your widget, you will have to update your web page or blog template with the new widget code.

2. Paste your Widget code

In this section, we will cover pasting your Widget embedded code into your web page or blog template HTML source code. If you are not familiar with HTML, review step 3.

In order to display your FeedSweep widget contents on your web page or blog, it is very important that you copy the code exactly as it was generated and paste it directly into the HTML source code of your web page(s) or blog template without any modifications. Modifying the code is against our usage policies and may also result in errors on your page.

After copying your Widget code, leave your browser and open an HTML editor if you are editting a web page or your blog administration pages if you are adding your widget to a blog. Open your HTML source code file or blog template, click on the spot where you would like to place your widget code and select Paste from the Edit menu.

When you have finished pasting the code into your source files, you will need to save the changes and upload or publish the changes to your server or blog host. If you have difficulty uploading to your server, please contact your web or blog host. Keep in mind that, after you have pasted the widget code into the HTML source of your page or template, it must look exactly the same as the widget code displayed in the FeedSweep Widget Embedded Code box.

If implemented correctly, your widget content should appear almost immediately.

Back to top

3. HTML basics

If you are unfamiliar with HTML, here is a some background.

HTML (Hyper Text Markup Language) is the programming language in which web pages are written. This coding language is used on the World Wide Web. Web browsers read HTML in order to display the contents of a page.

3a. How to view your source code

If you would like to view the source of an HTML page (also known as the 'source code'), first open your web browser and then go to a page whose source you would like to see. Click View -> Source on the menu bar at the top of the screen (you may need to press the ALT key to have the menu bar appear) if you are using Internet Explorer...

View Source in IE

... or View -> Page Source if you are using Firefox.

View Source in Firefox

The HTML document containing the source code of that page will appear.

3b. What to look for in your HTML source code

Every HTML document consists of bracketed tags which tell the web browser how to display the contents. All HTML elements start with an opening tag (< >) and end with a closing tag (</ >). HTML documents have the following basic structure:

1 <html> 2 <head> 3 <title>Typical Web page</title> 4 </head> 5 6 <body> 7 8 9 </body> 10 </html>

The opening <html> tag informs a browser that this is the start of your HTML document. The opening <head> tag contains your header information and is not visible when you view the page in your browser. Any text displayed between the BODY tags (<body> and </body>) will be displayed in your browser. The closing </html> tag informs your browser that this is the end of your HTML document.

For FeedSweep widgets to appear properly, you will need to place your widget code between the opening <body> and closing </body> tags of your source code. Do not place your widget code between the <head> and </head> tags, even though your widget contains JavaScript.

If you are experiencing difficulty finding the <body> tags, try pressing the 'CTRL' and 'F' keys on a PC, or 'COMMAND' and 'F' keys on a Mac to open a Find Text box when you are in your HTML editor. Then type '<body' (without the quotes) to find the opening tag or '</body' (without the quotes) to find the closing tag, and click Find Next.

Back to top

4. Paste using WYSIWYG editors

If you are using a WYSIWYG (What You See Is What You Get) editor, it will use a Code View feature that allows you to edit the HTML source code directly. Because every editor is different, we are unable to give you exact instructions for pasting your widget code. However, we hope you'll find the example helpful.

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.

4a. Using Code View

If your web editor uses a Code View feature, please follow these instructions for pasting your Widget code:

Using your editor, open the web page on which you would like to display your widget. In the Normal or Design view, select the location in your document where you want to place your widget. In this example, we will be placing a widget just below the title.

Copy the widget code from the FeedSweep Widget Embedded Code text box.

Code Box

In your editor, switch to the HTML view. Paste the widget code between the <body> and </body> tags - where the cursor is blinking. Pasting the widget code outside the <body> tags will prevent the widget's content from appearing correctly.

Go to your editor's Preview tab to confirm that the widget code has been pasted correctly. If done correctly, you should be able to see the widget contents.

If you are satisfied with the results, put your changes to your website or blog. This could include File -> Publish Web... or File -> FTP or simple File -> Save As... depending on your editor. This should upload your changes.

4b. An Example

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

After inserting the FeedSweep widget code, the HTML of our sample page 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 vXXX --> 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 28, click here. Note that this is live code. The FeedSweep widget you see is displaying live, fresh content.

That's all there is to it. Rather easy, isn't it!

It is not correct to place your widget code within the <head> element even though it is JavaScript. The widget code must be inserted within the HTML <body> element. Confirm this after installation by checking the source view of your web or blog page.

Back to top

5. Common Problems

If, after pasting your Widget code and publishing your web or blog page, you experience difficulty seeing your widget contents, you can troubleshoot the widget yourself by reading the following sections.

5a. Paste your code exactly

If you don't see any widget contents at all appearing on your site or you only see partial results, or if you see an error on your site such as the HTML widget embedding code appearing, check the HTML source code of your web page or blog template to make sure the Widget code on your site looks exactly the same as the FeedSweep Widget Embedded Code box.

To check the HTML source of your web page or blog template, follow these steps:

  • Open a browser window and view your web page.
  • Under your browser's View tab, select Source in Internet Explorer or Page Source in Firefox. A text document displaying the HTML code of your site will pop up.
  • Press the Ctrl and F keys, or the COMMAND and F keys if you are using a Mac. This will bring up a Find box. Type 'FeedSweep' into the box and press 'Enter' to locate your widget code.
  • Next, open your Widget account in a new browser window and go to the Your Widget code box, under the Widget Setup tab. On your screen, place your HTML source code alongside the widget code in the Your Widget code box. Compare the widget code and ensure that it looks exactly the same on both pages.

The most common reason FeedSweep users do not see their widgets is that the code was copied incorrectly.

5b. Look for extra HTML added to your widget code

If the widget code in the source of your live site appears differently from the widget code in your FeedSweep Widget Embedded Code box, it may be that your web host automatically includes or changes certain tags when you place code onto your site. You may see that extra HTML code such as '<br>' or &nbsp tags have appeared in your widget code, as in the examples below. The widget code may also be reformatted to appear in one line. In addition, sometimes the "Javascript" declarations have been removed from your widget code.

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

If you are confident that you pasted the Widgtet code into your editor exactly as it appears in your FeedSweep Widget Embedded Code box, you should contact your web host about any unexplained changes you see to the widget code (such as reformatting or extra tags).

5c. Be patient after pasting your widget code

If you do not see changes to an existing widget after replacing your widget code, you may simply need to give our servers time to expire all cache entries. It can easily take up to 30 minutes to have fresh content appear.

If you continue to see no change after 2 hours, please contact us.

5d. Use widget widths that fit your site layout

If you use an inappropriate widget widget, your web or blog page's layout can be affected. For example, a widget with a declared width of 250 px. will "push" a column wider in a 200 px. column.

Back to top

6. Viewing the raw output of a FeedSweep widget

Let's say you have created a FeedSweep widget that has produced this code in the FeedSweep Widget Embedded Code box:

<!-- FeedSweep vXXX --> <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 raw output of this FeedSweep, strip out the URL contained within the "src" attribute and paste the entire URL into a browser (Internet Explorer is best). 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 this in your browser now.

Back to top