How do I add an Instagram widget to my Framer website?
Adding your Instagram widget to your Framer 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.
Framer can be run in two ways, i.e. web option (https://www.framer.com/) or as a standalone application after downloading the framer installation package.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences.
Framer uses an Embed element inside a Section to allow adding your code snippet. This tutorial doesn’t strive to provide a tutorial on Framer but it is necessary to display certain stages we went through to create this tutorial.
For this tutorial we are using a three-page website to display a Home page, the Grid Display page and the Slideshow Display page.
A. Start
Log in to Framer, go to your dashboard and select the project you are working on.
Select the page you want to add your widget to under Pages … Web.
For this tutorial we have added 1 section to the page. This section contains a header indicating which widget is being displayed and we are going to add the Embed element below this. If you don’t have a Section added for this purpose, click on the “+ Add Section” button to add a Section.
Let’s see how we can insert our snippet.
Select the Section. You will see the Section borders are displayed (the light blue lines).
Click on the + Insert item on the top toolbar.
From the list displayed on the left sidebar, select Utility under Elements.
Select the Embed element and drag this onto the Section on your page.
By default it will be added centered to the Section area. You will notice this is added for all three screen sizes (Desktop, Tablet and Phone).
As soon as you place the Embed element on the Section, the property side-bar will be displayed on the right-hand side of the screen.
This side-bar will allow you to set the properties of the Embed element, i.e. Position, Size, Effects and Styles. These can be set separate for all three screen sizes. It also allows you to enter your snippet using the Embed component HTML option. For this tutorial we will only use the Position, Size and the Embed component HTML options.
Click on the HTML tab of the Embed component and enter your snippet in the provided editor textbox. You can enlarge the editor area (vertically only) to allow better visible editing.
B. Adding your Grid widget.
By using the above info, let's add a widget.
The SnapWidget Responsive Grid widget snippet contains the following code.
Add this to the Element component.
To preview the page, click on the Preview button at the top of the page.
This will then display the widget as follows.
Due to the width setting of the iframe, the widget will be displayed at 100% of the Embed element width. By using the Size property setting you can change the width of the Embed element. This will then also change the displayed width of the widget.
If you change the Size width property to 50% of the default width (1185 / 2 = 592.5 or 593) and leave the iframe width at 100% then the result will be as follows.
On the other hand, if you leave the Size property as default (1185 in this case), you could change the iframe width setting to 50%. This will have the same effect. The only difference is the actual element width as indicated by the border lines (the purple lines).
The above settings were done with the Position type set to Relative.
If you change the Position type to Absolute then you can place the widget by changing the margins. By looking at the default Absolute setting you will see that it is set to vertical and horizontal centered.
C. Adding your Slideshow widget.
As mentioned above, the process for adding the snippets is the same for both widget types.
If you add your responsive Slideshow snippet to your page it will be displayed as follows in the preview screen.
The widget will be displayed left-justified. The width of the responsive Slideshow widget cannot be changed.
If you change the width of the iframe to 50% then the widget will still be displayed at the original size but positioned at 50% (the horizontal width) of the Embed element width.
If you look at the social media icons on the widget you will see that at these settings only the Facebook and the Twitter icons are displayed, meaning that the widget size is too small.
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: 60%; margin: 0 auto;”> (this sets the Wrapper to 60% 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 <60% 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.