Adding your Instagram, Facebook or Twitter widget to your Joomla website is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
- Log in to your Joomla! website.
The following options are available for editors used in Joomla!.
- CodeMirror and
- No editor
The default editor used in Joomla! 3.x is TinyMCE and by doesn’t allow iframes, JS scripts and links to stylesheet (CSS) files. To allow iframes, JS scripts and stylesheet links you will have to change the default editor to CodeMirror. CodeMirror allows all the above items.
Set CodeMirror as your default editor.
- Select System > Global Configuration on the Admin toolbar.
- Select the Site tab and under Site Settings change the Default Editor to Editor - CodeMirror.
- Click on Save & Close.
Now you will be able to add your widget (which contains an iframe, JS scripts and a link to a CSS file) to your Joomla website.
- If an error occurs when saving (Could not write to the configuration file) then you will have to set write permissions on the configuration.php file in the top folder on your hosting server. If you have access to your Joomla! folder structure you can do it yourself else you will have to contact your Service Provider to do this for you. The following was done via Core FTP. Set write permission for User only.
Adding your widget to your Joomla! website.
- Select System > Control Panel on the Admin toolbar.
- Select Articles on the CONTENT list.
- Select the Article you want to add your widget to in the list of available articles.
Adding the widget without any heading
- Insert widget below existing content of the article.
- Click on Save and view your website.
- This will display the widget without a Header in the article on your website.
Adding the widget with a heading.
- To make the display of your widget a bit more attractive to your visitors you can add a Header to it. This is no change to the widget snippet itself, just an additional HTML line. Here is an example with a <h1>…</h1> header, text centred and color Navy.
<h1 style="color:navy; text-align: center; ">Our Products</h1>
- Insert this line above the snippet.
- Click on Save & Close and view your website.
- This will display the widget with a Header in the article on your website.
- Use the same process to add your widget to any article on your Joomla! website.