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:
- Copy your Widget embedding code
- Paste your Widget embedding code
- HTML Basics
- Paste using WYSIWYG editors
- Common Problems
- 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.
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...
... or View -> Page Source if you are using 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.
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   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 type="text/javascript" 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" ></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