1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained Add an RSS feed block to the sidebar 1.0

Feed me!

  1. Brogan
    Compatible XF Versions:
    • 1.0
    • 1.1
    • 1.2
    • 1.3
    • 1.4
    • 1.5
    This resource is not affiliated with XenForo Ltd.

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

    rss_feed.png rss_feed_single.png

    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: Sign-up for an API Key
    Enter your domain URL: MyDomain | Domain Names, Web Hosting, and Free Domain Services
    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
    Code:
    .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
    Code:
    <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
    Code:
    <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:
    Code:
     <!-- 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:
    Code:
     <!-- 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/playground/#dynamic_feed_control_-_vertical

    Select horizontal and edit the code to suit

    http://code.google.com/apis/ajax/playground/#dynamic_feed_control_-_horizontal

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

    Update
    The above links are no longer valid - this appears to be the correct URL now: Google Feed API  |  Google Developers
    pjfry likes this.

Recent Reviews

  1. localhost8080
    localhost8080
    5/5,
    Version: 1.0
    Very cool. Thanks!
  2. SchmitzIT
    SchmitzIT
    5/5,
    Version: 1.0
    Very helpful. Thanks, fior sharing this, Brogan!