Adding your Instagram, Facebook or Twitter widget to your GoDaddy Website Builder 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.
The GoDaddy Website Builder uses sections to place contents on the website. For the purpose of adding your SnapWidget widget we are going to use the HTML section.
Log in to your GoDaddy Website Builder account.
On your Dashboard select the website you want to add your widget to and click on Edit Website.
While in edit mode, select the page you want to add your widget to.
If the page has no sections added yet, the editor will display your page as follows.
Click on the Add Section button to display the setup dialog for adding a new section to the page. On the displayed editor page, select HTML under Files & Web.
Click on Add on to Embed your custom code on the page.
Add a title in the Title input box and add your snippet in the Custom Code input box. As soon as you have entered the code it will be displayed as a preview on the editor page. You can also force the height of the widget if displaying it shows a too small area. The section editor also allows centering the widget.
Clicking on the Preview button will display an exact preview of your webpage.
It will be displayed in desktop mode as well as mobile mode showing the responsive capabilities of the section setup.
Click on Edit Site to return to the editor or on Publish to publish the site if you are satisfied with the changes you have made.
If you have published your site, you will be shown the following dialog box.
Make your selection regarding the domain to publish to and click on Save & Publish.
Your widget will now be displayed on your live website.
The process for adding your SlideShow Display widget is exactly the same, but the way the widget will be displayed differs and we will go through those changes in the next parts of this tutorial.
B. Displaying your Grid Display widget.
If you added your standard responsive unmodified Grid widget your live webpage will be displayed as shown above.
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%. Please note that 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.
Note: Due to the way the Website Builder handles the SnapWidget iframe, if you want to close the resulting Lightbox, do not click on the Close (X) button to close it. Click on the area just below the X. This is also applicable
In the above we worked with the Grid Display widget. Adding the Slideshow widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).
C. Displaying your Slideshow Display widget.
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:
Make the following changes to the snippet.
Add 2 <div> areas with the following styles (the id’s 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: 30%; margin: 0 auto;”> (this sets the Wrapper to 30% of available width and center-justified. With this width setting we can change the width of the widget to any width we want). 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 then display the widget as follows.
The widget is also responsive.