Adding your Instagram, Facebook or Twitter widget to your Weebly 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 Weebly website.
We will start by showing you the area available to display your widget as well as how to add the section to it. The rest will show you how to add a Grid Display and then adding a SlideShow Display.
1. Start
Log into your Weebly website. On your dashboard select Edit Website.
Go to Pages
Select the page you want to add your widget to.
Click on Build
Under Structure, select Section and drag it onto the page where you want to place your widget.
NB! Ignore Choose Section Layout by clicking outside the area on the web page
Under BASIC, select </> Embed Code and drag the item onto the newly placed section.
Move your mouse over the newly placed item and click on Click to set custom HTML
Set Position to Center & click on Edit Custom HTML
The above procedure applies to all SnapWidget widgets. The following steps explain how to insert your Grid and your SlideShow widgets.
2. Grid Display
Add your snippet (overwrite any characters already in the HTML box)
As you move your mouse away and click outside the HTML text box, the editor will display your widget in a preview. This is an exact preview of what your widget will look like on your live website.
If you are happy with the result, click on Publish.
When viewing your Weebly website, your widget will be displayed as follows
The width of your widget can also be changed in the snippet you pasted under Custom HTML but note that if it is done here it will only be applicable to this instance. Also note that if you make the width too small then the Social Media buttons won’t be displayed properly.
Example with iframe width set to 75%.
Clicking on one of the images displayed in the Grid will display that specific image in a Lightbox display.
3. SlideShow Display
Adding a SlideShow Display to your Weebly website needs a bit of modifications to the snippet code.
If you add your standard responsive SlideShow widget to your page, it will be displayed as follows.
The widget will be displayed at 100% and left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. 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 e.g. to 200px each.
We are 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 can actually leave them out).
<div id=”Wrapper” style=”width: 40%; margin: 0 auto;”>
This sets the Wrapper to 40% of available width and center-justified). With this width setting we can change the width of the snippet to any width we want but please note that if you make the width < 40% the social media buttons won’t be displayed properly on the images.
<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 at 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 with the ‘Wrapper’ width set to 40%. The widget will also be responsive.
If you set this width to less than 35% then the Social media buttons (Facebook, Twitter and Pinterest) won’t be displayed properly.
Clicking on one of the images displayed in the SlideShow will display that specific image in a Lightbox display.
