Adding your Instagram, Facebook or Twitter widget to your Webnode 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.
Webnode is used by more than 30 million users world-wide allowing 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.
Webnode provides a variety of templates to use when creating your website. For a quick overview of how to create your website have a look at Get started with Webnode. We won’t go into these details as it is beyond the scope of this tutorial.
The process for inserting your SnapWidget snippet does not depend on the template you have chosen. The only difference is the way the background and other elements are displayed.
Adding your widget to your Webnode 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. the Grid Display page and the Slideshow Display page. We added a title to both these pages. 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 Webnode does not display your widget in edit mode, you must publish your website after any changes 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.
A. Adding your snippet to your webpage.
Log in to your Webnode website.
On your dashboard under My Projects, select the website you want to add the widget to.
Click on Edit site on the next page.
On the editor page, select the Pages option.
Select the page you want to add the widget to and click on Edit at the bottom of the dialogue page.
This will display the selected page in edit mode.
As you move your mouse over the contents of your website page you will see the following popping up out of thin air.
Click on the + to insert content at that area on your website (this can be between existing content areas or after the last content). On the ADD CONTENT pop-up menu, scroll down and select the HTML option. This will allow you to add your snippet to the page.
On the INSERT HTML pop-up form insert your snippet in the Enter your HTML code text box and click on OK.
The editor will now display the following message to indicate that the widget will only be visible on your published website.
Click on Publish.
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.
B. Adding a Grid Display widget.
If you have added your standard unmodified Grid Display widget code to your webpage then your widget will now be displayed as follows on your web page.
The widget is displayed to fill the available area 100%. To change the displayed width you can change the iframe width of your snippet, e.g. change the width to 50%.
Please note that if you reduce the size too much you won’t be able to click on the images and your social media buttons will also not be displayed properly.
Your widget will now be displayed as follows on your web page. Note that the widget will still be displayed center justified.
If you click on any of the images in the grid it will be displayed as follows in a Lightbox.
NB Remember to click on PUBLISH after each change you make to the inserted code.
The process for adding your grid widget to any other page (or sub-page) or to a blog post 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.
C. Adding a Slideshow Display widget.
If you have added your standard unmodified Pro Slideshow Display widget code to your webpage then your widget will now be displayed as follows on your web page.
You will notice that the widget does not fill the HTML element area width and is displayed left justified.
If you change the width of the iframe to e.g. 50% it will be displayed as follows (size stays the same and it will ‘move’ towards the center).
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> 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: 35%; margin: 0 auto;”> (this sets the Wrapper to 35% 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. Any width <35% will be too small.
<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.
If you click on any of the Slideshow images it will be displayed as follows in a Lightbox.
NB Remember to click on PUBLISH after each change you make to the inserted code.