Adding your Instagram, Facebook or Twitter widget to your WebsiteBaker 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.
WebsiteBaker allows you to create a website within a couple of minutes without real coding knowledge. Some knowledge of HTML, CSS will be to your advantage when adding your widget but all steps are explained in detail so you can don’t need to be an HTML boffin.
Adding your widget to your WebsiteBaker 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) child (sub) pages under the Home page, i.e. a page demonstrating the Grid Display and a page demonstrating the Slideshow Display. The process is the same for both display types with a few subtle differences to make the widget appear as you need.
Please note that WebsiteBaker does not display your widget in edit mode. To see the exact result you must save your website after any change you make to a page to be able to see the changes.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Please note that WebsiteBaker uses the CKEditor by default (in our case v4.9.2.0). Although this editor allows you to add Custom HTML code to your webpage, it has a few rules where it reformats your code. To bypass this, we will deselect the CKEDITOR as our WYSIWYG editor under Settings.
While logged in to your website, click on Settings on your dashboard.
On the Settings page, click on Show Advanced Options at the bottom of the page.
Click on the + in front of General Settings to expand the category.
Scroll down to the bottom part of the General Settings and select None for WYSIWYG Editor.
Click on Save to save the new configuration.
Adding your snippet to your web page.
Log in to your WebsiteBaker website.
On your dashboard click on Pages (any of the 2 options) and select the page you want to add the widget to.
WebsiteBaker utilises sections to allow you to add your snippet (or any other Custom HTML code).
For our tutorial, on the Modify Page form you will see that we have already created a section called “Widget Header”. This is just a section with the Welcome message and some other jargon you want to display on your page. You could add your snippet to this section but for clarity purposes we are going to create a new section called “Widget Snippet” in which we will insert our snippet. WebsiteBaker allows you to move sections around on your page so separate sections will allow you to make use of this option.
Click on Manage Sections to stat editing the page.
Under Add Section click on Add (leave the Section type as WYSIWIG).
You will see a new WYSIWIG section has been added to you page without any title or contents.
Click on the new section to start editing the contents.
Add a description to your new Section and click on the Save button right next to the Description text input box. Insert your snippet in the content area and click on Save at the bottom. To make inserting your code easier you can enlarge the area by dragging the bottom-right corner of the contents area.
To view your website click on the View button at the top of the page.
Your website should display something similar to this.
The widget takes up all the space allowed in the main content column of your webpage due to the 100% width setting in the snippet for the iframe. Changing this is different for the Grid and the Slideshow display as we will see in the following steps.
The above steps are the same for adding a Grid Display widget as well as a Slideshow Display widget to your page. The actual contents of your snippet will be different for the 2 types of widget.
Adding a Grid Display widget.
If you added your standard unmodified Grid Display widget code to your webpage then your widget will now be displayed as we have shown in the previous picture.
To change the displayed width you can change the iframe width of your snippet, e.g. change the width to 75%.
If you only change the width of the iframe it will now be displayed smaller and left-justified on your webpage.
To display the widget center-justified we are going to encapsulate the widget in a <div>…</div> area and add in-line CSS (the style parameter) to the <div> tag.
If you reduce the displayed width too much you won’t be able to click on the thumbnails to display the pictures in the Lightbox, only the Sharing buttons (Facebook, Twitter and Pinterest) will be available. This you can test by trial and error but we found that with the iframe width set to 60% this is about the smallest you can go. This also depends on how you did set up your widget on your SnapWidget dashboard on snapwidget.com.
Add a <div> tag just before the <iframe … tag and add style=”text-align:center;” to it.
Your widget will now be displayed as follows on your web page.
The process for adding your grid widget to any other page (or sub-page) is exactly the same.
The above tutorial is for adding your Grid Display widget to a page. The next part will cover the process to add a Slideshow Display widget to your page.
Adding a Slideshow Display widget.
If you added your standard unmodified Slideshow Display widget code to your webpage then your widget will now be displayed as follows on your web page.
Not very practical I should think (a bit small and left justified). As with the Grid Display, with the standard snippet you cannot change the justification of the widget. To change the appearance of your Slideshow widget we will be making some changes to the contents of your snippet.
Remove the class="snapwidget-widget" line in your snippet. This will allow you to change the size of the displayed widget. Be careful not to remove anything else from the snippet.
Add a height:100%; attribute after the width attribute to the iframe part of your snippet. Because your Slideshow display is always in a rectangle area you must set the width and the height to the same value else your displayed thumbnail will be stretched out of proportion.
Encapsulate the widget in a <div>…</div> area so that we can set the display size of your widget as well as center justify the widget.
Applying the above, we can thus set the size of the displayed widget to 2x the actual size (see the Thumbnail Size as set up on your SnapWidget dashboard), in this case 2 x 100px = 200px.
and center justify the widget (in this case we use the margin:auto; attribute).
This will then display your widget as follows (with iframe width and height set to 100%):
Changing the iframe width and height to 75% will display the widget a bit smaller. As with the Grid Display, take care not to make it display too small. 60% seems to be the smallest without causing erratic problems.
Remember to click on Save after each change you make to the inserted code.