Creating a Live Feed Sidebar Widget

Introduction

          What's a Feed?

A feed is a technical term for a sort of tool that is used to relay consistent and up to date information from a source page to the (sometimes another site and then to the) end user without them actually going to the source page.

In this tutorial, I will be covering the creation of a live feed sidebar widget for your personal blog. You will learn how to create a Google account, link it to FeedBurner, and how to link a blog's source to FeedBurner to create then live feed link. After creating the link to the feed you will finally learn how to make a widget for your personal movable type blog and adding it to your main sidebar. I've written these instructions for users of a low level; anyone with some basic knowledge at least will be able to use this guide without any issues. There will also be no issues that can arise from using this tutorial, everything is completely safe and has no consequence as long as you follow the guide closely.

You will need to create a google account title, as well as a title for the header which your feed will have above it. The example below is the code used:

            <h3 class="widget-header">English 202C Feed </h3>

                In the highlighted text you will want to choose an appropriate name for your header
that tells what the feed is or where it's from in a short as possible manner.

            The task will take you up to 7-10 minutes at most and will require: a working 
internet connection, a web browser, a Google account (which I will help the user
create) a personal blog, and a blog you will use as the feed.

Now, if you're ready go ahead and start at Part I and end with Part II of the videos,
 if you need more help with completing the task than provided in the videos there 
are numbered instructions below that go into more depth.

         

   
Part I - Creation of Google account and Live Feed Link                                                                                                                                                                                                                                    

Part II - Finishing Widget

As a brief side note, to those who want to use this for class, I will include a link to the actual code for the widget at the bottom so there's almost no work required.

Phase I, Gmail/Google Account Creation:

1.      Open up your web browser of choice, for this procedure I will be using Mozilla Firefox as the web browser. If you use Internet Explorer it'll be pretty similar except Movable type which won't agree with you usually.

2.      Type in http://www.google.com into the navigation bar at the top of your browser.

3.      At the top of Google's first page you'll see a blue link that says "more" with a blue arrow pointing down. This is a drop down box that you left click on

Now go ahead and left-click it and then you will have to go down and click on "even more >>" which pops up at the bottom of the new pop up box.

4.      On the right hand side of this new page you should see "Gmail" with what looks like a letter. Left-click on this link and you'll come to another page.

5.      On this page for Gmail, you will need to look to the mid/bottom right where you will see a large button for "Create an Account >>", left-click on this and you will continue on to make a gmail account now which also operates as a Google account.

6.      Now I'll go through the creation of the account quickly.

a.      For this, follow the guide and in each place put in what's requested such as in this picture. Do your best on the Word verification, left-click on the handicap symbol if you have trouble figuring it out. When finished, left-click on the "I accept" button.

b.      Remember to click on "check availability" to make sure the login name is available though

Phase II, Linking Google With Feedburner:

1.      Open up your web browser of choice, for this procedure I will be using Mozilla Firefox as the web browser. If you use Internet Explorer it'll be pretty similar except Movable type which won't agree with you usually.

2.      Type in http://www.feedburner.com into the navigation bar at the top of your browser.

3.      On the right side, enter the password for your Gmail account and click on "Sign In"

4.      The next page will have a text field which you will put the URL for your blog into, for this example it is http://www.personal.psu.edu/jun3/blogs/assignments/blog/

5.      And after doing so click on next

6.      On the next page, find "Next" on the mid/lower left and left click it. Keep clicking on "Next" until you end up on the page with the title of your blog at the top.

7.      Left-click on publicize tab

8.      Now left-click on BuzzBoost in the left margin of the page.

9.      Once on the next page, scroll down to the bottom and click on activate with the red bar.

10.  On this next page you will have a large text box containing code, left-click in the text box and press ctrl + A, then ctrl + C to copy all the text you see.

Don't forget to click on save before you're done and make sure it says "This service is active" which appears beside "Save"

11.  Now, back to Windows desktop, we'll be opening Notepad now. Left-click on Start, then on All Programs, then Accessories near the top, and find Notepad and click on it. (Start > All Programs > Accessories > Notepad)

12.  Paste the text into Notepad by pressing in the text area and pressing ctrl + V. Once you do so, in the top left of Notepad and press on "File" then "Save as" at the bottom of the save as pop-up you will see "*.txt". Get rid of the * and name it something like feedcode.txt.

Phase III, Making the Live Feed Sidebar Widget:

1.      Now if you don't use movable type, you will need to figure this portion out by yourself but it should work just about the same in any blog usually. Also, the buzzboost page has a link to make widgets in almost every blog except movable type, so you wouldn't require much help to do it.
Open up your personal blogspace by going to http://blogs.psu.edu and left-clicking.

On the next page you will be asked for your personal login username/password for PSU so go ahead and type those in and then left-click on login.

2.      You should now be on the dashboard for your PSU blog, hover your mouse on "Design" and then press down and left-click on Widgets which drops down from "Design".

3.      Now on this page scroll down and look for a green + sign symbol and left

click on the blue text (the link) saying "Create Widget Template"

4.      At the top of the blank text areas you should see a long text box above a large square text box which you need to type in a title that you will recognize for the widget. After you make a title (represented in red) you will now have to enter in the code for this widget.

5.      In the black text in the picture above is the code you will enter on the first line, the red is the title that will appear above your feed in the sidebar so make it something you need for others to recognize what it's a feed of. After you type that, press enter to go to the next line and press ctrl + V to paste the text into the 2^nd line. If you don't have the code with you still, you can open the notepad file you made earlier to re-copy the code and paste it back in.

6.      Left-click "Save" on the lower left of the page and now you will want to return to the page you were at containing all the widgets. To do this, at the right margin of the page you will see ">> Widgets" click this or press the left arrow at the top of your browser to go back now.

7.      Now at the top of the page within the area listed as "Widget sets" you will see "main sidebar" left-click on this.

8.      On this page you will see some widgets on the left, and some widgets on the right. The ones on the right are the ones that aren't active, you want to left-click and hold it down to drag the "Feed Widget" over to the left hand side and then let go, it should appear under the widgets in the left-hand side now. After you see it in there, click save changes at the bottom.

9.      Now you will look at the top of your blog dashboard for the arrows moving in a cycle graphic. It should look like this

10.  A pop-up window will come up with a blue box saying "Publish" click on it and you are officially done, go to your main page and scroll down. You should see something like this.

English 202C Feed Code for Widget.