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.

A. Editors used in Joomla! 3.x.

The following options are available for editors used in Joomla!.

  • TinyMCE,

  • CodeMirror and

  • None

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.

  • Log in to your Joomla! website.

  • 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.

Note: 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.

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.

B. Adding your Grid Display widget to your Joomla! website.

  • Log in to your Joomla! website if not logged in already.

  • On the Control Panel, select Articles on the CONTENT list.

  • Select the Article you want to add your widget to in the list of available articles.

  • Insert widget below existing content (if any) of the article.

  • Click on Save and view your website. This will display the widget as follows.

  • Due to the iframe width setting of 100%, the widget fills the whole available display area. If you change the width to e.g. 75%, the widget will display smaller but will then be left justified.

  • To centre the widget on your page without modifying the iframe width, you can add a <div> tag, i.e. encapsulate the widget snippet in a <div> area. You can also set the width of the displayed widget in the <div> style setting. Remember if you make the size of the grid too small it won’t be able to display the Social media icons and you will also not be able to click on an image to display it in the Lightbox.

<div style="width:75%; margin:0 auto;">

  • Clicking on any of the images in the grid will display it in a Lightbox display.

  • To end the editing process, click on Save and Close.

  • Use the same process to add your Grid Display widget to any article on your Joomla! website.

C. Adding your SlideShow Display widget to your Joomla! website.

  • Log in to your Joomla! website if not logged in already.

  • On the Control Panel, select Articles on the CONTENT list.

  • Select the Article you want to add your widget to in the list of available articles.

  • Insert widget below existing content (if any) of the article.

- Adding a Standard responsive SlideShow widget

  • Click on Save and view your website. This will display the widget as follows.

  • The widget will be displayed at ~50% of available area and left justified with the Social Media icons displayed properly. The size as well as the justification cannot be changed. If this is OK for you, skip the following steps.

  • To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.

  • Create a non-responsive SlideShow widget on your SnapWidget dashboard. The width and height are not important, you can set them e.g. to 200px each.

  • The non-responsive SlideShow widget will display as follows.

  • We are going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:

  • Make the following changes to the snippet.

- Add 2 <div> areas with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you can actually leave them out).

<div id=”wrapper” style=”width: 100%; margin: 0 auto;”>

- This sets the wrapper to 100% of available width and center-justified. With this width setting we can change the width of the snippet to any width we want but please note that if you make the width < 45% the social media buttons won’t be displayed properly on the images.

<div id="container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">

- This sets the area used to display the iframe at 100% of the wrapper width as well as height = 100% of the width.

  • Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;)

  • Your widget will be displayed as follows with a Wrapper width=100%, thus filling the whole available area. The widget will also be responsive.

  • Changing the Wrapper width to 50%. Remember if you make the size of the widget too small it won’t be able to display the Social media icons and you will also not be able to click on an image to display it in the Lightbox.

  • Your widget will be displayed as follows with a Wrapper width=50%.

  • Clicking on any of the images in the grid will display it in a Lightbox display.

That’s it for now. Enjoy adding your SnapWidget widgets to Joomla!

Did this answer your question?