Adding your Instagram, Facebook or Twitter widget to your Moonfruit 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.
Please note that similar to some other stores / websites / blogs that we have tutorials on, Moonfruit does not display your widget in edit mode properly, you can view your live site after you have saved your changes and published your website.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Log in to your Moonfruit website.
On your dashboard click on edit site for the site you want to edit.
In the left sidebar, click on PAGES and select the page you want to add your widget to.
The pages that we have created for this tutorial are empty except for the Top Menu (Navigation) bar. Moonfruit allows you to add Custom HTML code by means of the HTML Snippet element. You will find this under ELEMENTS in the left sidebar. To be able to place this element you must provide a SECTION for the Element to be placed in.
If you click on SECTIONS you will find a number of Sections but for this tutorial we will scroll down to Layout and select one of the column layouts provided. For ease of explanation for this tutorial we will select the One Column Layout.
Drag the One Column section onto your page.
If you move your mouse over the newly added section you will notice that you now have a column where you can add your Elements to (in our case the HTML Snippet).
Click on ELEMENTS in the left sidebar and scroll down to the Tools group. Drag the HTML Snippet element onto the column you have just added to your page.
Moonfruit will display an info line indicating that you can now enter your snippet.
In the right sidebar you will be presented with a HTML Snippet edit option.
Click on the HTML Snippet Options dropdown and enter your snippet in the HTML input box.
Set the Width setting to Auto and the Align setting to Centre. The Align setting will ensure that the widget will be displayed center-justified in the column (we will refer to this again later).
If you click on Apply (just below the HTML input box) you will see that the editor displays your widget but unfortunately it is not the same as how you will see it on your published website.
Click on Save in the top right menu and then on Publish and view you live site.
To change the width of your widget you can change the iframe width setting to e.g. 50%
Due to the Align setting that was set to Centre, you widget will now be displayed as follows.
If you would rather have you widget displayed left justified (or right justified) just change the Align setting in the HTML Snippet option to the desired setting.
Please note that if you change the iframe width to less than 25% the Social media buttons won’t be displayed properly and you will battle to click on a thumbnail to display it in the Lightbox.
In the above tutorial we have added a Grid widget to our website. The process for adding your Slideshow widget is a bit different as we will see next.
If you added your Slideshow Display widget code to your webpage (with the iframe width set to 100%) then your widget will now be displayed as follows in the editor (only part of the widget is displayed as we also saw with the Grid widget above):
And like this on your live webpage:
Not what you actually expected. Although the editor ‘preview’ displays the widget covering the full available column area (and actually center-justified due to the Align setting), the live webpage sets it left-justified and basically 25% width. This is due to a combination of the CSS used in the SnapWidget snippet and the way Moonfruit responds to it.
With the Slideshow widget you don’t have proper control over the justification of the widget on your Moonfruit webpage but as you reduce the iframe width of the widget (leaving the HTML Snippet option’s Width set to Auto and the Align option set to Centre) the widget tends to move towards the centre of the display area of the webpage. See below how the widget appears with an iframe width set to 20%.
As with the Grid widget, if you would rather have you widget displayed left justified (or right justified) just change the Align setting in the HTML Snippet option to the desired setting.
Please note that if you change the iframe width to less than 20% the Social media buttons won’t be displayed properly.
Remember to click on Save and then on Publish after each change you make to the inserted code.