280 Million Impression / Month

FeedWind is an RSS feed widget. Simply copy & paste the snippet of code to embed into your web page. It's free and ready to use without having to register!

Use FeedWind RSS in Joomla

joomla rss feed widgetJoomla is a very popular website builder and can be used to create any type of site, from a simple one-page product review site to a full on ecommerce site with masses of pages and products - or anywhere in between. Whatever the size or type of your Joomla site, there will be room for an RSS feed which will deliver live information and media about your favorite topic in a visual, text, sound or video format. We have all seen the typical newsfeed items on more serious news sites but RSS feeds come from a surprisingly wide range of sites from the latest prices on the stock market, to the last special offer from Amazon and can really enhance a site.

feed widget for Joomla exampleThere seems to be an never ending selection of RSS feeds to choose from, but very little in the way of RSS readers that can put the information where you want it AND which are customizable to match the style, background and colors of a site. The whole background of a site could be a live FeedWind from for example an image site that publishes free wallpaper every day. There are endless customization possibilities with many CSS commands acceptable for use in a FeedWind Custom, CSS. The results can be stunning. What will be learned in this tutorial is how to use FeedWind in a Joomla installation.

Joomla - Quick Structure Overview

Joomla has its own way of handling website components and although it would be nice to simply be able to point you to our 'Customization of WordPress' tutorial, unfortunately the way Joomla works is completely different so the processes are not the same.

Joomla works on the basis of a template structure which supports the content management system, and an Extension system of which there are five distinct Extension types. You will need Admin access to perform the required actions in this tutorial.  For those unused to digging around in the adminstrator dashboard of Joomla, it is important to understand how Joomla is structured, in order to know where your code can be placed.  

Components - These are mini-applications and contain complex structures and code such as the articles that make up a site pages. A newsfeed is a component and one which we will be looking at more closely with respect to FeedWind RSS as a Joomla component.  

Template – This extension contains mostly design information and will contain information such as color scheme numbers/codes to enable you to match a FeedWind design to your Joomla site. Check out the tutorial we have about using custom CSS in FeedWind to match your site design .

Plugin – in Joomla, a plugin is mainly used as an event handler assessing input data and performing actionable transactions such as word filtering etc. A plugin might for example be able to filter the input from FeedWind wo prduce customized RSS. It is easier to do this using proper filters however - we created a FeedWind Filetered RSS tutorial here for you if you need it. This is a more elegant way to implement FeedWind RSS than using a plugin.

Module –These are basically containers so we will be interested in these as part of this FeedWind tutorial as the FeedWind RSS output will be displayed through one of these.

Language – assists with Joomla language handling and not of interest in this tutorial. 


Placing FeedWind in a Joomla Module

To get a FeedWind RSS feed to display in a Joomla site you need a module extension which allows for the use of Javascript. Note: There is a module in Joomla for custom HTML but this cannot be used for FeedWind as the FeedWind RSS code is not simply HTML; it contains Javascript in it which sadly is not supported in any of the standard Joomla Modules. WordPress and other similar platforms do not have this issue as Javascript has native support in most CMS.

Download a Free Custom Javascript Module for Joomla

The way to get around this lack of JavaScript support is to install a Custom JavaScript module as an extension. An easy one to use is available at:

There is an option to donate if you wish but otherwise this module is free and uninhibited by advertising or restrictions. The webpage is in Spanish – Google can translate it if you need to - but all you need to do really is download the file from the link given and install it. After your download is complete, go to your Joomla Extension manager, select the first option which is to upload a packaged installation file and upload your new module.

joomla rss feed widget uses extension manager

 

 

Tip: when uploading a previously downloaded file, there will frequently be a bar at the bottom of the screen to show you the downloaded file. When you need to make an upload, rather than using the browse button next to the entry field for the path of the file you just downloaded, simply drag and drop the file from the status bar at the bottom of the screen to the “choose file” button and the path to your file will automatically be put in so save you having to browse to find it. This works not just in the Joomla upload but elsewhere in Windows and other O/S too and is a real time-saver!

 

 

joomla module uses rss feed scriptOnce this package is uploaded, it will automatically install. In the list of modules you will see a new one with the rather unhelpful name: MOD_CUSTOM_JS.Find this in the list of modules (it will have a Type listed as “Custom Javascript” in the listing.

Once you find it, click on the module to edit. In the admin area you will be able to modify a few entries. The first thing we need is the FeedWind HTML code that will provide the input for the Module. We get this code from the FeedWind site http://feed.mikle.com where an RSS feed can be entered and a container created that can be used as a page element.

 

 

Tip: If you want to create a FeedWind widget that has customization, check out our tutorial on how to use CSS  to create custom RSS feeds that are design-matched to the site they appear on.

joomla feed widget HTML

At the FeedWind site, once you have created the code you need for your RSS HTML widget, copy the code as indicated in the box that displays it and paste it into the relevant area in the JavaScript module in Joomla.

Once it is pasted, there are a few other options that need to be selected. For those with a good understanding of how Joomla, and in particular the template you are using works; this will be a simple process. Add a title (or not if you don’t want one) that will display according to the stylesheet of the template, usually above the FeedWind Widget you are creating.

The title here is not customizable as part of FeedWind as it belongs to the Joomla template. To find the origin of the title style for the template, you can use the F12 key in your favorite browser (Mozilla FireFox is free and has the best developer features) and bring up the developer console where you can see in the right hand pane, the necessary CSS files to amend if desired. In our example we have titled our RSS feed ROCK ‘n ROLL news as this feed is from Rolling Stone magazine. 

finding joomla CSS for a feed widget

Position Your RSS Widget 

A major factor is the position you want the widget to appear on the page. This is entirely dependent on the template you are using. The options available in the Module Manager view of your Custom JavaScript include the option of selecting this position from those available. 

position feed widget in Joomla

A drop down gives you the list if available page positions. If you don’t know the name of the page position that will display the widget in the correct place for you, (there may be many positions available) you can simply select one, hit SAVE and then in a new browser tab or window, open your site up and see where the widget lies on the page. 

If its not where you wanted it, you can select another and a little trial and error will soon find you the spot you want. If there are too many to experiment with like this, you will have to check out the template documentation. It may be possible to use the developer console to examine these locations too. In our example we placed the widget in “position 7” which equates to the top of the left hand sidebar.


Important Settings

feed widget public setting in Joomla

There are several other settings to be selected to ensure that the widget you have created appears on the page. The most important is to ensure that you specify the “status” whether the content is published or not which is selected from another dropdown In addition there is the option to restrict or allow access. The module can be made public, private etc.

 

 

 

 

Getting your FeedWind RSS widget to look just right

webpage feed widget

Once these settings are complete, remember to hit the save button. Check out your new site with your widget on display. If it isn’t quite how you want it, there are several things you can do. 

1) You can re-edit the FeedWind RSS widget at the FeedWind website where you generated the FeedWind code.

2) You can edit the code that you pasted into the Custom JavaScript module you created in Module Manager of your Joomla admin panel.

3) You can create custom CSS to modify the look of your FeedWind widget and match your site design.

 

 

 

 

 


Creating a second RSS widget in Joomla

Joomla webpage RSS widget

If you need to create more than one feed, you have to create a new module for your FeedWind widget.The easiest way to do this is simply to open the one you just created and then click the option “Save as Copy.” You can then close the original and open up the copy and modify it as required. 


Posted by Tim Higgins
rss and joomla, joomla rss,

Back to Top