How To Add Instagram Feed To Your Jekyll Site

instagram jekyll

Small tutorial for you who want to show your nice pics from instagram on your small Jekyll site :)

1. Register your app in Instagram Dev.

You will get Client ID and Client Secret there. Don`t forget to add Redirect URI (you can use just http://example.com as a redirect URI, because we need it only to get the special code).

1. Get the app CODE , directing your browser to https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code. Paste your CLIENT_ID and REDIRECT-URI from previous step.

2. Get code for your app with (paste CLIENT_ID, CLIENT_SECRET, AUTHORIZATION_REDIRECT_URI and CODE)

curl -F 'client_id=CLIENT_ID' \
     -F 'client_secret=CLIENT_SECRET' \
     -F 'grant_type=authorization_code' \
     -F 'redirect_uri=AUTHORIZATION_REDIRECT_URI' \
     -F 'code=CODE' \
     https://api.instagram.com/oauth/access_token

Yep, you will get access_token in acurl answer.

1. Download instafeed.js and move it to the place in your jekyll repo with other javascript-files (example: assets/js).

2. Get your instagram user id.

3. Add all the options to your _config.yaml:

instagram_user_id: USER_ID
instagram_client_id: CLIENT_ID
instagram_access_token: ACCESS_TOKEN

1. Add instagram.html to your _include directory:

<script type="text/javascript" src="/assets/js/instafeed.js"></script>
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '',
        clientId: '',
        accessToken: ''
    });
    feed.run();
</script>
<div id="instafeed">

1. And finally add this include file on the page you want to show an instagram feed (example: _pages/about.html):

\{\% include instagram.html \%\}

That`s all.

You can find more information about instafeed-js plugin here.