Home
This article explains briefly how to add JavaScript to your Joomla articles. Keep in mind that all the steps must be completed before your script will work.
First download and install JIncludes, a plugin for Joomla. JIncludes is available for free under the GNU Public License (GPL) from the Joomla Extensions Directory. Be sure to read the instructions and always back up your system before making any changes.
JIncludes lets you add several types of code (JavaScript, PHP, HTML) to your Joomla articles. The procedure for each type of code differs slightly. For JavaScript code, you'll create an external file, then link to that file using JIncludes (see below).
Install The JIncludes Plugin
Install the JIncludes plugin in the normal way, using Joomla's Extension Manager. Before you can use JIncludes, you must configure it.
- Go to the Plugin Manager (Extensions>>Plugin Manager).
- Click on the "Content - JIncludes" plugin to configure it.
- Remember to enable the plugin.
By default, JIncludes lets you define 30 "snippets," which are a combination of code plus an associated key to call the code. The procedure for JavaScript is slightly different, however; instead of entering the code, you enter a path to an external .js file.
Create An External JavaScript File
In the example below, I created an external JavaScript file named formverify.js and uploaded the file to the default Joomla script folder. I gave the keyname "formverify" to the snippet. Now when I want to include that JavaScript file, I simply put the keyname in double curly braces within the article.
Launch The Snippet
Launch the snippet by putting the keyname, enclosed in double curly braces, somewhere within your Joomla article. Example (note: without the asterisk!),
{{ formverify }*}
Configuring The Plugin Parameters
Below is a screenshot of the JIncludes Plugin Edit page. There are three pieces of information shown: the keyname, a URL, and the type of code. Notice that the URL to the external javascript file is a relative URL, as indicated by the preceding forward slash.
("Relative" means relative to the home directory. In other words, we write:
/media/system/js/formverify.js
and not
http://www.foothillwebdesign.com/media/system/js/formverify.js.)
Verify The Source Code
Finally, you can verify the success of the plugin by looking at the page's source code. Here we see the JavaScript file has been successfully included.
Where to go from here
JIncludes' author provides extensive documentation online at http://joomlacode.org/gf/project/jincludes/wiki/.