Whether you’re a brand or an individual, if you use Instagram you’ll want to be showing off your latest photos. What better way than to have an up-to-date stream of on the pages of your site!
Choose from 4 initial image sizes, displaying up to 20 of your latest posts. These can optionally be sorted into most popular, newest, oldest or in a random order. The widget is compatible with Muse’s responsive layout, so the images resize and flow with the browser width.
Please note: due to restrictions set by Instagram, it is no longer possible to display another person's feed without a unique access token created using their Instagram login details.
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
The first step is to place the widget on the page canvas. Click and drag it from the Library Panel. By default the container width is set to 960px, the default page width for a fixed site in Adobe Muse, so we've dropped it on the outer grid guide.
Important: Due to the Instagram API changes in June 2016, it is no longer possible to stream Instagram feeds based on usernames or hashtags. All third-party plugins require a unique access token based on your Instagram login. To do this, click the link at the top of the widget's option panel, or you can use this link. Click the Generate Access Token button.
If you're not already logged in to Instagram, you'll be prompted to do so. If you have consent from your client, you can generate a token for their account instead.
Once you've authenticated, you will receive your token code. Copy this to the clipboard. It's also a good idea to store it somewhere for future use. You can close the website when you've done this.
Open the widget options panel. Delete the sample text from the Instagram Token field. Now paste in the token you just created. There will be no change just yet.
To display the feed we need to add the Instagram user ID. This is the set of digits before the period in the access token. Select the ID, now copy and paste it into the Instagram ID field. You should now see 9 images from your feed.
The first of the configuration options is the Initial Image Size. This determines the size the images will be at the current page width. If the page is not set to Fluid Width or you choose not to make the widget responsive, this will define the static size of the images. We've left it at the default setting of Medium (320px).
The next setting is the Minimum Image Size. This is only applicable to sites using fluid design and determines the smallest size to display when the browser width is decreased. We've chosen the Small (150px) option here.
Note: if the width of the widget container becomes smaller than the combined width of the minimum size of the images, they will reduce the number of columns and flow down the page instead.
The next setting is the Maximum Image Size. This is similar to the Minimum Image Size option and determines the largest size to display when the browser width is increased. We've chosen the Large (640px) option here.
Note: if the width of the widget container becomes larger than the combined width of the maximum size of the images, the number of columns will increase and flow across the page instead.
Next, we'll set the maximum number of images to load into the feed. This ranges between 1 and 20 (imposed by the Instagram API). We've reduced it to 6 in the example.
The next three settings enable us to change the spacing between the images (we've kept the default of 5px). The Alignment within the widget container, which we've left at the default of Centred. We also have the option to change the sort order. Here, we've set it to Most Popular.
Note: the sort order only affects the visible images.
The final settings allow us to add hyperlinks to the images. When enabled, clicking on the images will open their original version on Instagram..com. We can choose whether to open the page in a new window or tab, or replace the current page (default).
Once we've configure the widget, we can preview the page, either within Muse, or in the default browser.
You can see a demo of the widget here.