Adding your Instagram, Facebook or Twitter widget to your Google Sites 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.
Please Note - This tutorial only applies to the New Google Sites. In this tutorial we will refer to New Google Sites as NGS for the purpose of shortening the text.
Themes: NGS provides 6 themes, i.e.
Simple,
Aristotle,
Diplomat,
Vision,
Level and
IMPRESSION.
These themes allow you to select the color scheme as well as the font style. For a quick overview of how to create your website have a look at Get started with Sites.
We won’t go into these details as it is beyond the scope of this tutorial.
Inserting your Snapwidget snippet does not depend on the theme you have chosen. The only difference is the way the background and other elements are displayed. For this tutorial we have used the IMPRESSION theme, color RED and font style Capital.
Adding your widget to your NGS website is achieved by adding Custom HTML to pages on your website. The snippet must be added to each page where you want it to be displayed. The process is the same for all pages but the area where you want to display it could be different depending on current content on your page.
Please Note - Your widget must always be encapsulated in a <div> area if you want your image(s) to be clickable. We will discuss this later.
A. Adding your snippet to you web page.
Log in to your NGS website and select the site you want to add your widget to (you could have more than one site created on NGS).
On your site dashboard, select the Page you want to add the widget to.
Select the INSERT tab.
On the INSERT tab, select < > Embed
On the Embed from the web pop-up form select Embed code, insert your snippet and click on Next.
Your widget will now be shown as a preview on the Embed from the web pop-up form.
Click on Insert to insert the Custom HTML on your webpage.
Your widget will now be displayed in your web page edit mode allowing you to resize the widget as well as moving it to a different area on your web page.
You can move the widget to the center of the display area by dragging it on the edit screen (note that the light blue shaded area is the actual area where the widget will be displayed.
You can also change the width and the height of the widget by using the handles. If you change the width of the widget it will also change the size of the displayed images. Changing the height does not change the displayed image size, it will only change the height of the area where your widget is displayed. If your widget is displayed with a vertical scrollbar after publishing , you can return to the page in edit mode, click on the widget to display the resizing handles and change the height of the widget until all images are displayed (this also applies to a slideshow widget).
Please note:
If you are displaying a grid widget with Sharing Buttons set to Yes, please make sure that your images are displayed in a grid large enough to allow you to click on the image.
For a slideshow make sure the displayed area has no vertical scrollbar as this will cause an erratic display of your widget on your live website .
When done, click on PUBLISH.
Your widget will now be displayed as follows on your web page.
NB! Remember to click on PUBLISH after each change you make to the inserted code.
The process for adding your widget to any other page (or sub-page) is exactly the same.
B. Adding your snippet to you web page.
NGS displays Custom HTML in an iframe. This means that if you have set up your widget Photo Link as Lightbox, then the size of the displayed picture will be limited to the size of the iframe you created when inserting your snippet (the light blue rectangle).
Important! You must always encapsulate your complete snippet code inside a <div> area else your images won’t be clickable, e.g.
This is applicable to a Grid display as well as a Slideshow display. This has an advantage since it allows you to change the width of the widget area independent from the NGS iframe width (maximum width will depend on the width of the NGS iframe). By using in-line CSS (width, alignment, etc.) you can change the size and placement of your widget.
The real width of your SnapWidget iframe will be based on the NGS iframe width (which you physically stretched) and the width of the <div> area. If you set the width of the <div> area to e.g. 75% (see below) and you leave the iframe width as 100% then the widget width will completely fill the <div> area. The “margin: auto;” setting will also center-justify the widget iframe in the NGS iframe.
Basic layout of how NGS handles your Custom HTML:
Your Lightbox picture display will fill the entire NGS iframe (the light blue frame). You must make sure that the NGS iframe area is large enough to display the Lightbox properly else you will see a single image with a vertical scrollbar. This will be mostly trial and error depending on the number of rows and columns you will be displaying in your widget. Also make sure that the actual width of the items in the grid is wide enough to allow clicking on the social media buttons.
Depending on the type of widget that you are using (i.e. Grid or Slideshow) the following applies:
C. Grid Display
Stretch the iframe area width to maximum and the iframe area height to display all your rows when inserting your snippet. If you are displaying only a few rows this could mean that the height must be far beyond the last row of your widget. The size of the displayed widget must be large enough to allow you to click on the image to display the Lightbox. If you are also displaying the Social Media buttons on your widget then it becomes a problem when your widget is too small.
In the following example we inserted the standard Grid widget snippet without any in-line CSS and the widget iframe width left at 100%. This will fill the width of the NGS iframe with your widget.
Please Note - Initially the NGS iframe width is set up as 50% of the web page display area width and the height to some value calculated on something that we could not figure out.
Stretch the iframe width to maximum.
This will now fill the width of the NGS iframe with your widget and leave some space at the bottom as in this case where we had only two (2) rows. In real life it could be necessary to drag the bottom of the NGS iframe further down to allow full display of the widget and also to allow the Lightbox to display properly.
The above is with a <div> area without any additional width setting. You could however change the width of the <div> as explained above to e.g. 75%.
This will display the widget at a width of 75% inside the NGS iframe (as in the preview).
And on your website as follows:
With any of the above settings the Lightbox will be displayed as follows:
Depending on the type of widget that you are using (i.e. Grid or Slideshow) the following applies:
D. Slideshow Display
Stretch the iframe area width to maximum and the iframe area height to display all your rows when inserting your snippet. If you are displaying only a few rows this could mean that the height must be far beyond the last row of your widget. The size of the displayed widget must be large enough to allow you to click on the image to display the Lightbox. If you are also displaying the Social Media buttons on your widget then it becomes a problem when your widget is too small.
In the following example we inserted the standard widget snippet without any in-line CSS and the widget iframe width left at 100%.
Please Note - Initially the NGS iframe width is set up as 50% of the web page display area width and the height to some value calculated on something that we could not figure out. ☹
Stretch the iframe width to maximum.
The widget will be larger but still left-justified.
The above setting will display as follows on your website.
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed.
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 iframe width and height is 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 Slideshow widget contains the following:
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: 40%; margin: 0 auto;”> (this sets the Wrapper to 40% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).
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.
<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 display as follows on your website.
The Lightbox will then display as follows when clicking on an image.
The widget is also responsive.