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.

Note: This tutorial only applies to the New Google Sites. The Classic Google Sites doesn’t allow adding Custom HTML to your website. In this tutorial we will refer to New Google Site as GS for the purpose of shortening the text.

Themes: GS provides 6 themes, i.e. 

  • Simple,
  • ARIRSTOTLE,
  • 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 GS 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. For this tutorial we have create two (2) pages, i.e. a Home page and an About Us page. The process is the same for both pages but the area where you want to display it could be different depending on current content on your page. 

Please note that your widget must always be encapsulated in a <div>  area if you want your image(s) to be clickable. We will discuss this later.

Adding your snippet to you web page.

  • Log in to your GS website. 
  • On your dashboard, select the Page you want to add the widget to (for this tutorial we will use the Home page).
  • 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 on your web page in an 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 lightblue 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.
  • If you want to ‘prettify’ your widget you can add a border around it by encapsulating the widget in a <div> area that includes inline CSS (the style attribute). In the following the example we have used a solid border, 5px wide and the color gray. The padding attribute creates a 5px padding between the border and the widget. Have a look at w3schools.com for more info regarding CSS border attributes. 
  • This will then display your widget as follows:
  • For a better looking border with rounded corners around your widget you can include the border-radius attribute. In the following example we have changed the border attributes to have rounded corners. The outcome of the display depends on the border radius value in px as well as the padding in px. The larger the radius value the larger the padding value else the rounded corners will be drawn on top of part of your widget.
  • This will then display your widget as follows:

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.

New Google Site’s way of handling Custom HTML

Note: In this tutorial we will refer to New Google Site as GS for the purpose of shortening the text.

The New GS 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). 

You must encapsulate your snippet inside a <div>  area else your images won’t be clickable. 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 GS iframe width (maximum width will depend on the width of the GS iframe). By using in-line CSS (width, alignment, etc.) you can change the size and placement of your widget. You can even add a border around your widget

The real width of your SnapWidget iframe will be based on the GS iframe width (which you physically stretched) and the SnapWidget iframe width (in %), e.g. if you set your SnapWidget iframe width to 100% then the widget width will completely fill the <div>  area. If on the other hand you change the widget width to 75% then the widget width will be 75% of the GS iframe and will be displayed left justified on your page. If this is OK then you don’t have to add any additional in-line CSS to the <div>  area. If however you want to display the smaller widget center aligned then you should add the following to the style parameter of the <div>  area:

<div style="margin: auto; text-align: center ;”>

Basic layout of how GS handles your Custom HTML:

Your Lightbox picture display will fill the entire GS iframe (the light blue frame). You must make sure that the GS 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.

Depending on the type of widget that you are using (i.e. Grid or Slideshow) the following applies:

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 you 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 GS iframe with your widget. 

Note that initially the GS 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 GS 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 GS iframe further down to allow full display of the widget and also to allow the Lightbox to display properly.
  • With the above setup the Lightbox will be displayed as follows:
  • You can now make changes to the displayed widget by adding a border around your widget.

In the following example we added a red border with rounded corners around the widget.

  • This will then display as follows on your website.

Slideshow

  • When displaying your widget as a slideshow it becomes a bit trickier. As with the Grid display, the size of the displayed widget must be large enough to allow you to click on the image to display the Lightbox. 
  • In the following example we inserted the standard widget snippet without any in-line CSS and the widget iframe width left at 100%. This will fill the width of the GS iframe with your widget. In the case of the Slideshow widget it will fill the whole GS iframe with one (1) picture but the bottom part of the picture will be cut off.

Note that initially the GS 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 GS iframe with your widget but the bottom will be cut off.
  • The above setting will display as follows on your website. As you can see the widget is too big for the GS iframe and a vertical scrollbar appears.

This will be very impractical. There are two (2) changes we will have to make, i.e. 

  • Make the <div>  area width smaller to allow the widget to fit in the GS iframe.
  • Make the GS iframe larger vertically if the Lightbox doesn’t appear correctly. 

In our example we have changed the <div>  area width to 25%. There was no need to enlarge the GS iframe.

  • This will display as follows on your website.
  • The widget will be displayed left justified. If you want to center align your widget, you should add the following in-line CSS to the opening <div> tag in your pasted code.
  • The widget will now be center aligned and displayed fully on your web site.
  • The Lightbox will then display as follows when clicking on an image.

As you can see it displays the same as with the Grid widget.

  • You can now make changes to the displayed widget by adding a border around your widget.

In the following example we added a red border with rounded corners around the widget.

  • This will then display as follows on your website.
Did this answer your question?