How do I add an Instagram widget to my CMSimple website?

Adding your Instagram, Facebook or Twitter widget to your CMSimple 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.

In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.

A. Some points to look at:

CMSimple allows you to add your widget by adding contents with HTML code. It uses the TinyMCE editor but this causes a bit of a hassle.

TinyMCE strips out all <link> tags (for security reasons). This creates a problem when displaying your widget due to the call to the snapwidget-lightbox.css stylesheet file. This CSS file contains the style settings for displaying your image in a lightbox when clicking on it.

Luckily, we have access to the CMSimple files via your dashboard. This allows us to make changes to the applicable CMSimple system files.

In previous versions of CMSimple this was done by adding a line to the default stylesheet to import the snapwidget-lightbox.css file but with the new version of CMSimple, we have to add the contents of the above-mentioned CSS file to the current template file.

Don’t worry, we are not actually going to add the physical contents of the file, we are just going to add a line to the template to import the CSS file by means of a <style>@import “path to css file”;</style> instruction where the path to the file must be the full URL, in our case “https://snapwidget.com/stylesheets/snapwidget-lightbox.css”. This file is located on SnapWidget’s servers and will therefore always be the latest version.

Just to be on the safe side (we all have some finger trouble sometimes) we do suggest that you create an off-line backup of the contents of the CMSimple template file and store it somewhere on your local system. This will assist in restoring things to normal if you accidentally wipe out or overwrite the contents of the template.

We will go through all these procedures in the initial part of this tutorial.

B. Template modifications

Log in to your CMSimple website and select Template under Settings on the main menu bar.
This will open the CMSimple default template file.
To make an off-line backup of the contents before you start making changes, select and copy the whole contents of the displayed file by using Ctrl+A and Ctrl+C.
Create a text file somewhere on your local system (perhaps your desktop) and call it e.g., CMSimple_default_template.txt. Open this file with your favourite editor and paste the copied contents into this file. Save and close this file and return to your CMSimple website dashboard where you opened the default template.
The <style>@import "https://snapwidget.com/stylesheets/snapwidget-lightbox.css";</style> line must be inserted in the <head></head> area of the template file. Insert the line just before the closing </head> tag.
Click on Save.
Your CMSimple website has now been setup to allow SnapWidget to be properly installed.

C. Adding your snippet code to a page

Note: We won’t go through the process of creating pages, we will use the pages that were created for the purpose of this tutorial. The 2 pages that we have created for this tutorial are empty except for the Title and a horizontal line to separate the widget from the displayed title.

Select Pages on the main menu bar.
This will display all your pages you have available on you website (and also allow you to create new pages). For this tutorial we will look at the Grid Display and the Slideshow Display pages.
Click on the » arrows next to the page you want to edit. This will display the editor to allow you to add your snippet. The line with the yellowish background is the default level1_page header inserted by CMSimple in the page when it was created. This is however not displayed on your live website.
The default editor display is in WYSIWYG mode. To allow you to add your snippet you must click on the Source code button on the toolbar.
This will then open the contents of the page in Source code mode (you will see any contents added in HTML coding).
Insert your snippet below the last tag in the editor box.

Note: You will see that the <link> tag is still in the contents but this will disappear after you have saved the code.
Click on OK at the right bottom of the box.
You will be returned to the WYSIWYG mode with a preview of the widget you have just entered.
Click on the Save button on the editor toolbar to save all your changes.
Please note: The preview is not exactly what your live page will look like. To see a proper preview, click on the View Mode button on the main menu bar.
You will now see an exact preview of your live page.
To return to the editor click on the Edit Mode button on the main menu bar.
The widget uses 100% of the available space. If this is what you want to see, skip the next part of the tutorial, else read how we can change the way it is displayed. Note that the widget is responsive (will change size on smaller displays).
We can change the width of the displayed widget by changing the iframe width to e.g. 75%:
The widget will now be displayed at 75% but it will be left-justified. To center-justify it (or even right-justify if you want to) we will encapsulate the widget in a <div> area with the text-align attribute set to center (or right). Note that the widget stays responsive.
Please note: If you make the width too small, you won’t be able to click on an image to display it in a lightbox and your social media buttons will also not display properly.
Clicking on any of the images in the widget will display the image in a Lightbox.

D. Adding your Slideshow Display widget

In the above we worked with the Grid Display widget. Adding the Slideshow Display widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).
If you added your responsive Slideshow snippet to your page it will be displayed as follows:
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. As with the Grid display, if this is what you want just skip the next 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 widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.
We are now 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:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following:
And displays as follows on your web page.
Make the following changes to the snippet.
- Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
  - <div id=”Wrapper” style=”width: 45%; margin: auto”> (this sets the Wrapper to 45% of available width and center-justified. With this width setting we can change the width of the widget to any width we want). This ‘Wrapper’ width setting will change the width of your widget to 45% of the available area and the “margin: auto” parameter will display it center-justified. If you still want it to be displayed left-justified, just remove the “margin: auto” or change it to “margin: 0”.
    
    Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly. Any width <45% will be too small.
  - <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 to 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;).
This will then display the widget as follows.
If you click on any of the images in the slideshow it will be displayed in a Lightbox.
The widget is also responsive.