Need HTML help for the Straight Dope

Factual Questions
1

If you know some HTML, I could use your help. I’m trying to create an RSS feed display for the SD main page and SD columns, which will display thread titles from the SDMB like this:

SDMB RSS Feed Display

You can read about how I did it in this thread:

SDMB RSS coolness!

Well, now I’d like to do the same thing, but for display on the SD main page and the SD columns. Thing is, the HTML/CSS has to be edited to make it blend in with the rest of the page. On the SD main page, there is a lot of white space in the second column, and I’d like to display it just above “Weird Earl’s”. Similarly, I’d like to add it somewhere nice on the column pages, either as a break in between paragraphs or on the right where the other ads are.

I don’t have the time to do this, so I’m asking for help here. If anyone would like to take this on, I’d really appreciate it. It’s simple to do, it just needs a lot of trial and error to get the look and feel right. You can download the SDMB main page and a sample column page to your local machine to make changes to it.

And here are help files to get you started:

http://www.google.com/uds/solutions/dynamicfeed/reference.html

http://tutorialwebforblogger.blogspot.com/2010/04/display-dynamic-feed-with-google-ajax.html

Let me know if you have any questions. I will offer a free year’s membership and a year’s custom title subscription to the SDMB to anyone who does this. Thanks.

2

I would love to do this in the next few days if no one gets to it sooner. If someone else does want to, by all means, go for it!

3

Thanks, Reply. Let me know if you need help figuring out anything.

I can give you access to a live CSS file which you can edit to see changes on your local machine, or if you have your own web server you can just upload the original Google CSS file and edit it.

Essentially, you’ll need to tweak the CSS file parameters to blend in with the look and feel of the SD and column pages.

The Google CSS file is at:

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css

And you need to change the line that references the .css in the Feed Display code to use your CSS file instead:


 <!-- Dynamic Feed Control and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  </style>

You can play around with the Wizard and click the Generate Code button to see the code it uses for the feed display:

http://www.google.com/uds/solutions/wizards/dynamicfeed.html

4

Done. Sorry it took so long. I was really busy the whole week.

Examples:
Front page (bottom of right column, end of Threadspotting): http://www.asdfv.com/sd.html
Columns (lower left, end of Threadspotting): http://www.asdfv.com/sdcolumn.html

Relevant code:



<!-- Begin Google Feed API slideshow-->
<div class="item">
	<div class="teaser">
		<div id="feed-control"> <span>SDMB live feed loading...</span> </div>
		
		<!-- Google Ajax Api --> 
		<script src="http://www.google.com/jsapi?key=ABQIAAAAuFidFM6kQm7K4UpJ44DGtRRVbqCPYFF4IjqrZyjjrok-eqT5KRRwBQ_cLbMfaamje9SU2ygpnNRh4A" type="text/javascript"></script> 
		
		<!-- Dynamic Feed Control and Stylesheet --> 
		<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
		<style type="text/css">
			.gfg-horizontal-root * {display: inline}
			.gf-snippet, .gfg-list, .gfg-branding, .gf-author {display: none !important}
		</style>
		
		<script type="text/javascript">
			function LoadDynamicFeedControl() {
			var feeds = [
			{title: 'Straight Dope Message Board',
			url: 'http://boards.straightdope.com/sdmb/external.php'
			}];
			var options = {
			numResults : 50,
			stacked : false,
			horizontal : true,
			title : ' ',
			}
			
			new GFdynamicFeedControl(feeds, 'feed-control', options);
			}
			// Load the feeds API and set the onload callback.
			google.load('feeds', '1');
			google.setOnLoadCallback(LoadDynamicFeedControl);
		</script> 
	</div>
	<div class="details">SDMB live feed powered by Google</div>
</div>
<!-- End Google Feed API slideshow -->

Relevant CSS (don’t include the Google stylesheet at all, just use the following inline as in code snippet above or add it to your master stylesheet:



.gfg-horizontal-root * {display: inline}
.gf-snippet, .gfg-list, .gfg-branding, .gf-author {display: none !important}

Let me know if that works for ya.

5

Awesome! Thanks a lot. Will try to integrate it into the live site when I get time. Will let you know if I need any more help with this.

Your shiny new membership and custom title subscriptions are on their way.

6

Neat :slight_smile: Thanks!