![]() Nearly there! We now need to grab a copy of Instafeed.js which will handle all of the work grabbing photos from Instagram. Go ahead and download the latest version. We specifically want to download the Sass version so we can include it in our own stylesheet and make use of the available variables. We are going to use Bootstrap on a very basic level, to handle some of the responsive elements of the page. They all provide near enough the same functionality so the choice is yours! There are alternatives such as Scout, Prepros and Compass app. I am currently using Koala which is cross platform and free so it's a very good option to get up and running quickly. The easiest way to do that is by using one of the excellent apps available to do all of the watching and compiling. They are:įirst of all, you will need to get Sass up and running on your machine. There are a few things we need to prepare before starting our build. To make our lives easier we are going to rely on a few tools and libraries so let's begin by taking a look at them. Tomas has done a great job keeping the design simple, spacious and functional so I think it's only fair we do the same when building it. See the Pen Sample Instagram Feed with Instafeed.js with User Details by Matthew Elsom ( on CodePen.In this tutorial I am going to run through the process of creating the simple Instagram-based portfolio as designed in a previous tutorial by Tomas Laurinavicius. Create an Authorization URL as below, you need to replace the.This will allow your Instagram account to be accessed by your app while it is in Development Mode. In a new web browser window go to, select the Tester Invites tab, and accept the request.Click Add Instagram Testers and enter your Instagram account’s username and send the invitation. Scroll down to the Instagram Testers section.Save your changes, then click the Add or Remove Instagram Testers button. Skip this section, we will not be switching the app to Live mode. Data Deletion RequestsĮnter your website’s URL again. DeauthorizeĮnter your website’s URL again. ![]() Client OAuth Settingsįacebook may append a trailing forward slash when you save this form, please check this afetr saving. Click the Create New App button at the bottom of the page.Įnter the name of the Facebook app you just created.Go back to your app Dashboard, click Products +, and set up the Instagram Basic Display permissions.I used a Codepen URL () for testing, you can change the platform or URL later. Once you have created the app, navigate to Settings > Basic, scroll to the bottom of page, and click Add Platform.Ĭhoose Website from the menu, add your website’s URL. Give you app a name, and add an email address.Select Build Connected Experiences from the menu.Go to, click My Apps, and create a new app.The Postman app to perform cURL requests.A published webpage - you can use Codepen for testing.You’ll need to register your website as an application with Instagram and get an Access Token before you start - Instagram has recently changed the process, but it is quite straight-forward, just follow the steps here. Instagram no longer supports this method to display posts on your webpage… the updated article and follow the steps required to get this to work. Instafeed is a simple javascript plugin that enables you to add Instagram photos to your website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |