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. For this tutorial we have used the template that is indicated as Joana’s Recipes because it is a clear template with no specific background.
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. 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 Webnode does not display your widget in edit mode, you must publish 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.
Adding your snippet to your web page.
Log in to your Webnode website.
On your dashboard under My Projects, select the website you want to add the widget to.
Click on Start to edit on the next page.
On the editor page, select the Page you want to add the widget to (for this tutorial we will use the Home page).
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, click on the page selector (top right-hand) to select the second set of options.
This will display the HTML option allowing you to add your snippet to the page. Click on HTML.
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.
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.
Note that 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%.
Your widget will now be displayed as follows on your web page.
Note that the widget width is reduced to 50% BUT it is now left justified.
With the standard snippet you cannot change the justification of the widget. To change the justification you will have to encapsulate the widget in a <div>…</div> area and add in-line CSS (the style attribute) to the starting <div> tag as follows. Note that we have left the iframe width at 100% but included a width:50% attribute in the in-line CSS. The margin:auto attribute will center justify your widget:
Your widget will now be displayed as follows on your web page.
If you want to ‘prettify’ your widget even further, you can add a border around it. In the following 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 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 have 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 alow 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 proportion 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:
This will then display your widget as follows:
As with the Grid Display you could also add a border to the widget to make it even more prettier. Add the border atrribute to the starting <div> tag. In this case we have added a border with rounded corners and the colour red. Due to the padding attribute being set to 15px, the actual displayed widget will now be only 170px and if you want the widget to still be displayed at 200px you will have to increase the width and height setting of the <div> area to 230px (add 2x padding value). You can adjust these settings as you go along to suit your needs.
This will then display your widget as follows:
NB Remember to click on PUBLISH after each change you make to the inserted code.