Cory Webb's How to Joomla!

Wikipedia defines a widget like this:

A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are akin to plugins or extensions in desktop applications. Other terms used to describe a Web Widget include Gadget, Badge, Module, Capsule, Snippet, Mini and Flake. Web Widgets often but not always use Adobe Flash or JavaScript programming languages.

For example, the "Help Azaria" module in the left column of this site uses a widget from ChipIn.com (to test it, make a donation to Azaria's Dolphin Therapy fund to see the progress bar go up - wink wink). Many "web 2.0" sites offer widgets for blogs and other sites to display their content or tools for performing a specific task (like raising money via the ChipIn widget). It is a great way to add content or functionality to your site with very little effort. The process for embedding a widget to your site is usually just copying and pasting a snippet of code into the appropriate location.

The problem is, Joomla!'s built-in WYSIWYG editors strip out parts of the widget's code causing it to work improperly. With this article, I will explain how to work around that problem and get the widget embedded into a user module without stripping out code.

Step 1: Disable your WYSIWYG editor.

There are two ways to disable your WYSIWYG editor: the global configuration and the user manager.

Global Configuration

To disable the WYSIWYG editor in the global configuration, follow these steps:

1. Log in to your administrator control panel.
2. Click Site -> Global Configuration.
3. In the first tab, set "Default WYSIWYG Editor:" to "No WYSIWYG Editor".
4. Click "Save".

The problem with disabling the WYSIWYG editor in the global configuration is that it affects all users. You may want to keep the editor enabled for other users and disable it for yourself. If that is the case, you should disable the WYSIWYG editor in the user manager.

User Manager

To disable the WYSIWYG editor in the user manager, follow these steps:

1. Log in to your administrator control panel.
2. Click Site -> User Manager.
3. Click the Name of the user you want to modify.
4. In the right column under "parameters", set "User Editor" to "No WYSIWYG Editor".
5. Click "Save".

Step 2: Create the module.

To create the module, follow these steps:

1. Log in to your administrator control panel.
2. Click Modules -> Site Modules.
3. Click "New".
4. Enter the details, parameters, and pages/items to suit your needs.
5. Copy your widget code from your widget provider.
6. Paste the widget code into the content box under "Custom Output".
7. Click "Save".

NOTE: You can add more content to the content box, but you will have to use HTML because your WYSIWYG editor is disabled.

You are now widgetized.

That's all there is to it. You now have a widget. I should caution you, though, that too many widgets make a page look cluttered and unprofessional. So, choose wisely. Only use the widgets you actually need to use.

Other options

There are mambots/plugins and modules available that enable you to paste code into your WYSIWYG editor without it stripping out parts of the code. One example of such a module is the Jumi module and plign. If you can think of any more, please feel free to list it in the comments.

Questions

If you have any questions or comments, as always feel free to add them to the comments below.

 TrackBack URI for this entry

Comments (4)

Subscribe to this comment's feed

Nez: ... http://www.gooeytechnology.com

I used to do that, but lately I've been using Fiji Web Design's Google Adsense Module. The name is misleading as it's actually a module that lets you add any html or javascript code. It's simply brilliant! http://fijiwebdesign.com//content/view/74/54/

Cheers,
Nez
www.gooeytechnology.com

1

report abuse

vote down

vote up

March 29, 2007
Votes: +1

Cory: ... http://www.howtojoomla.net

Thanks for the tip, Nez.

2

report abuse

vote down

vote up

March 29, 2007
Votes: +0

Rachel: ... http://www.ventureinvestornews.com

Thanks for taking the time to provide this tip, well written, easy to follow, thank you!

3

report abuse

vote down

vote up

October 19, 2007
Votes: +0

Tiff: ...

Ok, sounds good. But can I turn the WYSIWYG editor back on and do other things or will it strip the code again.

4

report abuse

vote down

vote up

February 09, 2008
Votes: +0

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Add Comment