Add an RSS feed block to the sidebar

[s0ct0j0c]

This guide will explain how to add an RSS feed block to the sidebar as shown below.



The code is fully customisable but this mod consists of 3 stacked feeds in a single block (left image) or a single feed (right image).
The snippet at the top will cycle through each feed in turn and the relevant feed will be underlined when selected. The snippet will also pause on hover (configurable).
Each headline can be hovered over to see the snippet or clicked on to load the URL.
The block titles in the stacked version can also be clicked on to load the full RSS feed.

Change the options and feed titles and URLs in cta_rss_feed_sidebar as required.
You may also need to tweak cta_rss_feed.css to suit your site but it does use the @styleProperties system so should hopefully work on most basic installations.

You can create additional templates for use elsewhere either using the same css stylesheet or by creating a new one.
You can also incorporate all of the above templates into one if you prefer to do it that way.
I have taken this approach with 3 separate template so I can re-use the cta_rss_feed.css and cta_rss_feed templates elsewhere.

There are some links at the end of the thread where you can find further information on how to customise it for your own needs.

I have also attached the templates I am using which you are free to use and modify.


Create a Google API Key
Log in to your Google account
Browse to this URL to sign up for an API key: http://code.google.com/apis/ajaxfeeds/signup.html
Enter your domain URL: http://www.mydomain.com/
Note down the API Key


Create the templates
Create the css template: cta_rss_feed.css
Create the master feed template: cta_rss_feed
Create the sidebar feed template: cta_rss_feed_sidebar


Populate the templates
Add this to cta_rss_feed.css
Note: If you want the snippet titles to use 2 rows then use the alternative css file attached; cta_rss_feed_2_rows.css.txt

.gfg-root { width: 228px; height: auto; position: relative; overflow: hidden; font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif; }  .gfg-title { font-size: 12pt; color: @primaryLight; padding-bottom: 2px; margin-bottom: 5px; border-bottom: 1px solid @primaryLighterStill; overflow: hidden; white-space: nowrap; }  .gfg-title a { color: @primaryLight; }  .gfg-subtitle { font-size: 12px; font-weight: bold; color: @contentText; background-color: @primaryLighterStill; line-height: 1.4em; overflow: hidden; white-space: nowrap; margin-top: 6px; padding: 0 4px; }  .gfg-subtitle a { color: @contentText; }  .gfg-entry { background-color: @contentBackground; width: 100%; height: 6.9em; position: relative; overflow: hidden; text-align: left; }  .gfg-root .gfg-entry .gf-result { position: relative; background-color: @contentBackground; width: auto; height: 100%; padding: 2px 4px; }  .gfg-list { background-color: @contentBackground; padding: 0 4px; position: relative; overflow: hidden; }  .gfg-listentry { line-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }  .gfg-listentry-odd { background-color: @contentBackground; }  .gfg-listentry-even { background-color: @contentBackground; }  .gfg-listentry-highlight { text-decoration: underline; overflow: hidden; }  .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; }  .gfg-root .gfg-entry .gf-result .gf-snippet { height: 3.8em; color: @contentText; overflow: hidden; }  .gf-result .gf-author, .gf-result .gf-spacer, .gf-result .gf-relativePublishedDate { color: @dimmedTextColor !important; display: inline; }

Add this to cta_rss_feed - ensure you replace your_API_key with the API key obtained earlier

<xen:require css="cta_rss_feed.css" />  <script type="text/javascript" src="http://www.google.com/jsapi/?key=your_API_key"></script> <script type="text/javascript" src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"></script>

Add this to cta_rss_feed_sidebar

Code:

<xen:include template="cta_rss_feed" />  <script type="text/javascript">     var options = {         title : 'News', /* Title of the feed block */         numResults : 6, /* Number of news items for each feed; default is 4 */         displayTime : 3000, /* Time in milliseconds each item is displayed; default is 5000 */         fadeOutTime : 750, /* Time in milliseconds for the current item fade out; default is 1000, 0 to suppress */         scrollOnFadeOut : true, /* Enable or disable scroll on fade out for the current item */         stacked : true /* Required for multiple feeds */     };      function loadRssFeed() {      var feeds = [         {         title: 'BBC News', /* Title of the feed */         url: 'http://feeds.bbci.co.uk/news/rss.xml' /** URL of the feed */         },         {         title: 'Autosport', /* Title of the feed */         url: 'http://www.autosport.com/rss/allnews.xml' /** URL of the feed */         },         {         title: 'XenForo Announcements', /* Title of the feed */         url: 'http://xenforo.com/community/forums/announcements/index.rss' /* URL of the feed */         }         ];      var fg = new GFdynamicFeedControl(feeds, 'rss_feed', options);     document.getElementById('rss_feed');     }      google.load('feeds', '1');     google.setOnLoadCallback(loadRssFeed); </script>  <div class="section">     <div class="secondaryContent" id="rss_feed">Fetching feeds...</div> </div>

If you want to have just a single feed then use this code instead

<xen:include template="cta_rss_feed" />  <script type="text/javascript">     var options = {         title : 'Announcements', /* Title of the feed block */         numResults : 6, /* Number of news items for each feed; default is 4 */         displayTime : 3000, /* Time in milliseconds each item is displayed; default is 5000 */         fadeOutTime : 750, /* Time in milliseconds for the current item fade out; default is 1000, 0 to suppress */         scrollOnFadeOut : true, /* Enable or disable scroll on fade out for the current item */     };      function loadRssFeed() {      var feed = 'http://xenforo.com/community/forums/announcements/index.rss'; /* URL of the feed */      var fg = new GFdynamicFeedControl(feed, 'rss_feed', options);     }      google.load('feeds', '1');     google.setOnLoadCallback(loadRssFeed); </script>  <div class="section">     <div class="secondaryContent" id="rss_feed">Fetching feeds...</div> </div>

Add to the sidebar
Open the PAGE_CONTAINER template
Find this:

   	 	                <!-- sidebar -->                 <aside>                     <div class="sidebar">                         <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>                         {xen:raw $sidebar}                     </div>                 </aside>

Replace with this:

   	 	                <!-- sidebar -->                 <aside>                     <div class="sidebar">                         <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>                         {xen:raw $sidebar}                         <xen:include template="cta_rss_feed_sidebar" />                     </div>                 </aside>

The following links may be of use when creating your own feeds

Pre-defined Code
For pre-defined code browse to
http://code.google.com/apis/ajax/playground/#load_feed

Select vertical and edit the code to suit
http://code.google.com/apis/ajax/pla...rol_-_vertical

Select horizontal and edit the code to suit
http://code.google.com/apis/ajax/pla...l_-_horizontal

Custom Code
To create custom code browse to
http://www.google.com/uds/solutions/...reference.html

source thread : http://xenforo.com/community/threads...-sidebar.9381/