How to Add Instagram Feed on Ghost Theme

by ElectronThemes in Ghost on April 28, 2019

Instagram is one of the most popular social platform in the world. Most of people who use facebook use instagram also. We share our photos and short videos of good and bad time.

We who are writer, blogger, author run our site to share our thinking and knowledge.  We always try to gather knowledge, motivate people for their works. Sometimes we need to show our instagram feed to our blog or site.

I will show you how to show instagram feed to our site. Here is some process that you need to follow to show the feed.

1. Instagram API Access Token

First you need to collect Instagram API Access Token to show your feed. You can see here to create Instagram API Access Token.

How to Generate Instagram Access Token to Show Feed

After creating API Access Token, you can go to next step.

2. Instagram API Code, Markup and Scripts

Here is the HTML markup which have to use in the as your markup

<div class="insta-gallery">
   <h6>FOLLOW US ON INSTAGRAM</h6>
   <div class="social-instagram-img"></div>
</div>

Here is the scripts that you need to add in your theme file. You can add this in default.hbs file or in the main script files of your theme file. You will get instagram instaAccessToken variable to use for the access token.

/**
 * Instagram api
 */
if (window.instaAccessToken) {
    $.ajax({
        url:
            'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + window.instaAccessToken + '&callback=?',
        error: function() {
            alert('error')
        },

        success: function({ data }) {
            var galleryImages = data
                .filter(
                    image =>
                        image.images.standard_resolution.width === 640 &&
                        image.images.standard_resolution.height === 640
                )
                .slice(0, 5)
                .map(image => ({
                    src: image.images.standard_resolution.url,
                    url: image.link,
                }))

            var gallery = galleryImages
                .map(
                    ({ src, url }) =>
                        `<a href="${url}" target="_blank"><img src="${src}" alt="instragram">`
                )
                .join('')

            $('.social-instagram-img').append(gallery)
        },
        type: 'GET',
        dataType: 'jsonp',
    })
} else {
    $('.insta-gallery').hide()
}

Here is the style of instagram that is used for the example. I have used SCSS. You can use css.

.social-instagram-img {
    position: relative;
    margin: 30px 0;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    a {
        display: block;
        width: 20%;
        position: relative;
        &::before{
            content: "\f16d";
            font-family: "FontAwesome";
            position: absolute;
            background: rgba(255, 255, 255, .5);
            height: calc(100% - 20px);
            width: calc(100% - 20px);
            top: 10px;
            left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $fiji-green;
            font-size: 35px;
            @include transition(.4s);
            opacity: 0;
        }
        &:hover{
            &::before{
                opacity: 1;
            }
        }
    }
}

3. Add Access Token

Now you can add your access Token to the variable instaAccessToken. Go to the ghost dashboard and code injection. You need to use instagram access token like this

<script>
var instaAccessToken = "5785188318.9669071.24fc47828c6944ca2564145e9"
</script>

Now the instagram feed is ready to show. You will get the instagram feed like this.

That’s it. You are now ready to enjoy.

Read our latest news: