Joomla 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.
There 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 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.
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.
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!
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.
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.
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.
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.
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.
3) You can create custom CSS to modify the look of your FeedWind widget and match your site design.
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.