Lecciones Prácticas

« Empty DIV takes up space in IE8 [SOLVED]

vBulletin: adsense module for vBAdvanced [SOLVED] »

vBulletin + vBAdvanced: Display google news RSS feed

May 17th, 2010 |

Author: Miguel

A client of mine asked to show a “Google News” RSS feed in his vbulletin forum board. More precisely, he wants this RSS feed to be shown in the main page of the vBAdvanced “home” page.

The RSS url to display is: http://news.google.es/news?pz=1&cf=all&ned=es&hl=es&topic=h&num=3&output=rss

First step: create a custom php file using Google AJAX Feed API. For further instructions refer to the the google ajax feed api reference manual. This file includes the visualization options and a custom CSS.

Mine is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search and Feed Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->
 
  <!--
  // The Following div element will end up holding the actual feed control.
  // You can place this anywhere on your page.
  -->
  <div class="tborder" style="background-color:#FFF; padding:3px; margin:3px;">
    <div id="feed-control">
      <span style="color:#ffffff;font-size:11px;margin:10px;padding:5px;">Loading...</span>
    </div>
  </div>
 
  <!-- Google Ajax Api
  -->
  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    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-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px solid #BCCDF0;
}
 
.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color : #3366cc;
  /*background-color: #E5ECF9;*/
  background-color: #ffffff;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}
 
.gfg-title a {
  color : #3366cc;
}
 
.gfg-subtitle {
  font-size: 12px;
  font-weight : bold;
  color : #3366cc;
  /*background-color: #E5ECF9;*/
  background-color: #ffffff;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 5px;
}
 
.gfg-subtitle a {
  color : #3366cc;
}
 
.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}
 
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}
 
.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}
 
.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}
 
.gfg-listentry-odd {
  /*background-color : #F6F6F6;*/
  background-color:#FFF;
}
 
.gfg-listentry-even {
}
 
.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}
 
/*
 * FeedControl customizations.
 */
 
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}
 
.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
 
/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */
 
.gfg-horizontal-container {
  position : relative;
}
 
.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}
 
.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}
 
.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}
 
.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}
 
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}
 
.gfg-horizontal-root .gfg-list {
  display : none;
}
 
/*
 * FeedControl customizations.
 */
 
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}
 
.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}
 
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}
 
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}
 
.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}
 
.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}
 
.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}
 
.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}
 
.gfg-collapse-href {
  float : left;
}
 
.clearFloat {
  clear : both;
}
  </style>
 
  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
	{title: 'Google Noticias',
	 url: 'http://news.google.es/news?pz=1&cf=all&ned=es&hl=es&topic=h&num=3&output=rss'
	}];
      var options = {
        stacked : false,
        horizontal : false,
		numResults : 16,
        displayTime : 5000,
        title : "---NOTICIAS---"
      }
 
      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
 
</body>
</html>

Second step: Upload your custom php file to $vulletinpath/modules/. Mine is named google_news.php

Third step:Create a new vbAdvanced PHP module
Just go to your VBulletin’s AdminCP > vBa CMPS > Add Module. Fill in the form and select the google_news.php file.

Last step: go to your VBulletin’s AdminCP > vBa CMPS > Edit pages. Select “Homepage” and add the module to left, center or right column.

Enjoy!

One Response to “vBulletin + vBAdvanced: Display google news RSS feed”

Kevin Kinsey says:

08/07/2011 at 20:00

Hey, nice blog article.

I don’t think that’s a “custom PHP file” you created in step one, though. All I see is HTML/Javascript?

Lecciones Prácticas

vBulletin + vBAdvanced: Display google news RSS feed

One Response to “vBulletin + vBAdvanced: Display google news RSS feed”

Leave a Reply