Adding your Instagram, Facebook, or Twitter widget to your Showit 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.
Showit allows you to add your widget by using the Embed HTML Code widget. This is quite awesome, no editors to configure and you have full control over where you want to put it as well as the size of the displayed widget. The areas where you can add your content (any content, not only your SnapWidget) are called a canvas. Standard naming of the canvases on the Home (Landing) page in Showit are:
Header,
Hero,
Intro,
About,
Galleries,
Contact,
Follow and
Footer.
Showit also allows you to do a specific setup for both Mobile and Desktop displays (we will get to that during the tutorial).
To find out more regarding using the Embed HTML Code widget have a look here.
Adding your snippet code to a page
We will concentrate on the Home Page but if you have a blog included the process of adding your widget stays the same, just the canvas naming differs.
Log in to your Showit website and on your dashboard, select the Site tab on the left sidebar.
Under Pages select the Home page (this will be selected by default but just to make sure).
Your Home page will now be displayed in edit mode. You can have both display types displayed at the same (Mobile and Desktop) as well as separate. This is achieved by selecting the appropriate mode on the bottom menu.
We will use the Show Mobile and Desktop option in this tutorial to allow us to set the display size of the widget for both display types.
Click on the canvas you want to add your snippet code to (in this case we selected the Intro canvas as indicated in the CANVAS Property sidebar at the right side of the page.
For our tutorial, this canvas only contains a Heading and a descriptive paragraph. The widget will be inserted below this paragraph.
In the center area at the bottom of the page, you will see the following options.
The 1st option allows you to add text to the canvas. To add a nice title you will also have to make use of this option to add e.g. a Header and/or a paragraph with text (as we did above).
The 2nd option allows you to add other items such as a rectangle, an icon, Embed Code, a Video as well as a Gallery to the canvas. Although the Gallery option will display pictures, this is for displaying pictures uploaded to your Media Library (see 3rd option).
The 3rd option provides access to your media library which you should be familiar with if you have added images to your website before. We won’t use this option for our tutorial.
To add our widget snippet we will make use of the Embed Code widget in the 2nd option.
This will add an Embed Code widget to the canvas. If you have chosen the Show Mobile and Desktop option it will be displayed on both displays.
Double-click on the widget (in the Mobile or the Desktop canvas) and add your snippet code in the EDIT CODE text box and click on SAVE.
You will see the widget being displayed on both canvases.
By using the handles you can resize the widget as big as you want it to be displayed (in our case we have a 2x7 grid, which is why you only see 2 rows of 7 images).
Note: Make sure you have selected the Show Mobile and Desktop option on the bottom menu to allow you to set the width as it will be displayed on both display sizes.
You will also see a SIZE & POSITION option under EMBED INFO on the right sidebar. By using the CENTER TO CANVAS options you can center the widget horizontally and/or vertically on the canvas. No changes to the SnapWidget snippet code is necessary. Select between the Desktop and Mobile tabs to allow settings for the respective display type.
To get a ‘proper’ preview of your live website, click on Preview on the top right-hand menu bar. This will display a preview of your widget as it is displayed on your website, also allowing you to see the difference between Mobile and Desktop mode.
Desktop mode
Mobile mode
In the top left-hand corner of the Preview page, you will see a blue highlighted link (SITE PREVIEW) that you can use to open up your live website.
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:
You will notice that the Slideshow widget is displayed very small inside the provided area. This cannot be changed (even if you change the width setting of the iframe in your snippet it won’t make a difference as to how the widget will be displayed). Using the handles of the available display area also won’t increase the widget size.
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 setting is not important but make it at least 200px each. The code for this snippet will be as follows.
We are now going to add some HTML and CSS code to our snippet to create an area where the widget will be displayed. The area will be basically as follows (iframe is the Widget contents):
This gives us control over the width, height of the widget. It also causes the non-responsive widget to become properly responsive.
Make the following changes to the snippet:
Add a <div> area with the following style (the id (Wrapper) is just for explanatory purposes for this tutorial, it is not used for any other purpose so you can actually leave the id=”Wrapper” it out).
<div id=”Wrapper” style=”width:100%; margin:0 auto;”>
This sets the Wrapper to 100% of available width and center-justified. Together with setting the Width and Height settings of the SIZE & POSITION option under EMBED INFO on the right sidebar, we can now change the displayed widget size. Setting the width and the height can depend on the width:height ratio of the images you want to display in the slideshow. The width should be at least 350px else the 3 social media buttons won’t be displayed.
Remove the width and height (in pixel) 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 display as follows on your editor page.
And on the preview page
Desktop mode
Mobile mode
Similar to adding a Grid Display widget (shown before), you can also use the blue highlighted link (SITE PREVIEW) in the top left-hand corner of the Preview page to open up your live website.