What is JavaScript?
JavaScript is a programming language used to make web pages interactive. It runs on your visitor's computer and doesn't require constant downloads from your website. JavaScript is often used to create polls and quizzes. JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari. Provided that the visitors to your site are using web browsers that support JavaScript (most do) and have JavaScript enabled (it is by default), then your JavaScript will run when they visit the page.
Module position basics
If you've been working with Joomla, you know that a Joomla template consists of HTML and some PHP snippets.
For one, it contains a component area where the output from the different components are shown (articles, blog lists, third-party components etc). A Joomla template also contains several PHP snippets, which are called module positions. You can assign modules to these positions and they will appear in the given position in your template.
Easier way to insert scripts
Of course, you can use an extension for each third-party script you want to enter. Probably there is one available (isn't there for almost anything?). The problem with this approach, though, is that you need to keep track of X number of extensions and their updates. And for each extension you add to your site, the chance of being hacked increases. After all, code is made by humans, and humans make mistakes.
For those reasons, I prefer using the 'Custom HTML' module when I need to insert code snippets. For best results, you should have special module positions for the JavaScript snippet modules. That way, you can control where in the source code the snippets appear, something which can be crucial for the workings of the snippet.
The method is simple, but effective.
You will need three module positions, and as many Custom HTML modules as you need (one for each snippet).
Inserting the module positions in your template
In order to make this as flexible as possible, you need three module positions:
Now you're ready to insert the module positions. You will need to enter the following code into your template index.php file. You'll find it here: /templates/yourtemplatename/index.php.
Make sure to create a backup of your index.php file before messing with it.
Enter this just before the </head> tag.
<jdoc:include type="modules" name="endhead" />
Enter this just after the <body> tag:
<jdoc:include type="modules" name="topbody" />
Enter this just before the </body> tag:
<jdoc:include type="modules" name="endbody" />
Save your template.
The next step is to add the actual modules that will hold your JavaScript. But before that, we need to do some adjustments to the text editor settings.
Allowing JavaScript in your editor
To be able to add the JavaScript to the Custom HTML module, you need to allow Javascript in your text editor. If you use TinyMCE, you find this setting in Extensions -> Plugin Manager -> Editor - TinyMCE 2.0. Make sure you have the setting for 'Code Cleanup on Startup' set to 'Off' and the 'Code Cleanup on Save' to 'Never'.
If you're using JCE, go to Groups -> Default (or other group you're using) -> Editor Parameters. Make sure the 'Allow Javascript' setting is set to 'Yes'.
Adding the script to the Custom HTML module
Now, you need to add the actual Javascript snippet to a Custom HTML module and assign it to the appropriate module position.
I'll use Google Analytics as an example. Go to the Module Manager and click New. Choose the 'Custom HTML' module type. You will see the module parameters.
Enter a title for the module, for instance 'Google Analytics code', enable the module, choose not to show the module title.
For the Google Analytics code, we assign the module to the newly created 'endhead' position. This has the Google Analytics snippet appear just before the closing HEAD tag (</head>). As you have not entered the new module positions to the template XML file, they will not appear in the module position drop-down. Not to worry: You can simply enter the position name 'endhead' in the field directly.
Lastly, enter the HTML mode of your editor and paste the Google Analytics code into the window. You can now save the module.
Best Joomla Hosting Recommendation
ASPHostPortal.com provides our customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. We offers Joomla hosting starts from $5/month only. We also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable Joomla Hosting, we should be your best choice.