2009-05-04

Image

Add Multiple Ajax Feeds In Blogger

Blogger currently offers two feed gadgets:
(1) FEED GADGET
where you can add content (maximum of 5 entries) from ONE RSS or Atom feed to your blog.
(2) BLOG LIST GADGET
where you can add MULTIPLE FEEDS (with ONE/latest entry for each feed) of your favorite blogs.


Don't you sometimes wish you can combine both and display MULTIPLE FEEDS with MULTIPLE ENTRIES for each feed?


Thanks to Dynamic Drive's gAjax RSS Feeds Displayer, this is possible.


To be specific, you may find it in action at my sidebar: TECH NEWS FEEDS section. Here, my subscription list includes feeds with multiple entries from DIGG Technology, PC Magazine, Reuter's Technology, SEObook, SEOmoz, Slashdot, and Yahoo Security.


Using gAjax RSS Feeds Displayer, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify which components of each RSS entry to display, and more. Dynamic Drive


How to add it in Blogger? Here's how.


Before you start editing your template, make sure to DOWNLOAD
(1) gfeedfetcher.js (right click and choose "Save As") first and upload to your site (e.g. Google Pages if you have one).
(2) (right click and choose "Save Image As") and upload to your image hosting site (e.g. Photobucket or Imageshack. I use PicasaWeb)

Now, let's get started.


NOTE: BACKUP YOUR TEMPLATE!


1. Go to Layout. Edit HTML.
2. Before the closing tag of


</head>

insert the following code:


<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript" src="gfeedfetcher.js">
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

NOTE: Please look at the above code closely. For your API Key, go to Google Ajax API Key Page, type in your blog URL and click Generate API Key. Then, on the below code:


<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">

replace "YOUR-API-KEY" with the CODE YOU RECEIVED from Google Ajax API Key Page.


3. Before the closing tag of


]]></b:skin>

insert this code to apply CSS.


.labelfield {
color:brown;
font-size: 90%;
}

.datefield {
color:gray;
font-size: 90%;
}

#example2 div {
margin-bottom: 5px;
}

#example2 div a {
text-decoration: none;
}


4. Save template.
5. Go to Layout. Page Elements.
6. Add A Gadget.
7. Choose HTML/Javascript.
8. Copy the code below and paste it on the HTML/Javascript gadget.


<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

9. Save.
10. View Blog.

How to customize the Feed script


<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

Below are the only codes that you need to change:

One.


socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")

where "Slashdot" is the title of your feed and
"http://rss.slashdot.org/Slashdot/slashdot" is the feed URL.


Two.


socialfeed.displayoptions("label datetime snippet")

where the display options can be set to include feed title ("label"), feed publishing date and time ("datetime"), and preview of feed ("snippet"). If you wish to include only the title and feed preview, kindly set the option to ("label snippet")


Three.


socialfeed.filterfeed(6, "label")

where 6 is the number of entries to be displayed and "label" is the sorting config meaning all feed entries will be sorted alphabetically by label.




0 التعليقات:

Total Pageviews