Search code examples
javascripthtmlinstagraminstagram-apisquarespace

How to customize / automate embedded Instagram on website?

I am editing a Squarespace website for a friend and he wants his Instagram profile to show up one of the pages, but he wants more than just the photos, which is what Instagram currently offers.

He needs to be able to display the text that is associated with each photo, preferrably to the right of, or possibly below the photo with clickable links to #hashtags and @friends. If it's easiest to have a setup similar to the actual Instagram website, with likes and comments in there as well, that would be great too.

I know I need to get rid of the SquareSpace "Instagram Block" that is incorporated with the CMS, and add my own code. I know you can just embed the code right from the photo page on Instagram, but but we need it to be automated.

I'll be honest, I'm very new to this, and just learning beyond HTML and CSS, into a bit of JS, so I would like a push in the right direction to help figure this out, and will certainly provide more information if I am being too vague.

I'm not sure if this can be achieved with Instagram's API, or some Javascript, or what?

Below is a link to help illustrate what I am trying to achieve. Again, if it's easier to just embed each photo, using Instagram's "embed" code, that is just as great, but I need to make sure it's automated so we don't have to go in to our site each time we upload a photo to Instagram.

what is needed

Solution

  • You can use an instagram javascript client in a SquareSpace Javascript code block -- see Adding custom HTML, CSS, and JavaScript

    Then try some javascript client -- i.e. code already written by folks, that you can mostly "plug-n-play" use and customize only the things you need to change into the SquareSpace code block.

    The most popular instagram javascript client that I know of is instafeed.js

    instafeed.js

    Here's how you get your friend's user id's feed using instafeed.js

    <script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

    To get the caption, use the {{caption}} templating variable as told on the documentation of instafeed.js.

    {{caption}} - Image's caption text. Defaults to empty string if there isn't one.