How to integrate Instagram with Sharepoint 2013

Hello, you may be here to know how to display your Instagram recent photos onto your SharePoint page.

Firstly, you have to register an application at Instagram Developer site and then you get an access_token.

Secondly, you have to use this access_token in the API to get access to the user account and get recent photos of the user.

Here is a sample code:

//Instagram Helper class
using Newtonsoft.Json;

namespace Integration.Instagram
{
    public class IgHelper
    {
        //returns Instagram object
        public static ICollection< IgFeedItem > ReadFeed(string IgUserId, string AccessToken)
        {
            //gets recent media photos; when count=3, it returns 3 recent photos 
            const string UriJson = "https://api.instagram.com/v1/users/{0}/media/recent/?access_token={1}&count=3";

            var returnIgFeedItems = new List< IgFeedItem >();

            try
            {
                var IgJsonString = Core.Utilities.Json.GetJsonString(String.Format(UriJson, IgUserId, AccessToken), null, null, true);
                //create a stream to hold the contents of the response and create Instagram Object 
                var IgObject = JsonConvert.DeserializeObject< IgFeedJson >(IgJsonString);

                if (IgObject == null || !IgObject.Data.Any()) return returnIgFeedItems;

                else
                {
                    if (IgObject.Data != null)
                    {
                        //return feed
                        returnIgFeedItems = IgObject.Data.Select(IgItem => new IgFeedItem
                        {
                            Caption = IgItem.Caption.Text,
                            Link = IgItem.Link,
                            SmallImage = IgItem.Images.LowResolution.Url,
                            ThumbnailImage = IgItem.Images.Thumbnail.Url,
                            LargeImage = IgItem.Images.StandardResolution.Url,
                            Type = IgItem.Type,
                            CreatedTime = IgItem.CreatedTime
                        }).ToList();
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error : " + ex);
            }
            return returnIgFeedItems.ToList();
        }
    }
}

Next, you have to create a controller as shown:

 //Instagram controller
public class InstagramController : ApiController
{
    public ICollection< IgFeedItem > GetInstagramFeed(string IgUserId) 
    {
        return Integration.Instagram.IgHelper.ReadFeed(IgUserId);
    }
}

Then you have to publish the API to your Azure instance, here is test site url: https://{enteryoursite}.azurewebsites.net/api/instagram/GetInstagramFeed?IgUserId={enterUserId}

Finally you can use this url in SharePoint using JQuery:
Place below code to a Sharepoint master gallery file, for example: /script/custom.js

//Instagram Feed
function _initInstagramFeed(IgUserId) {
    var igFeed = $('#instagram-feed');
    // get instagram posts from api
    function __getInstagramPosts(callback) {
        var apiUri = 'https://{enteryoursite}.azurewebsites.net/api/instagram/GetInstagramFeed?IgUserId=';

        $.ajax({
            url: apiUri + IgUserId,
            type: 'GET',
            success: function (result) {
                callback(result);
            },
            error: function () {
                //igFeed.closest('.ms-webpartzone-cell').hide();
            }
        });
    }

    // format the data returned from the instagram api
    function __processInstagramPosts(posts) {
        var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var instagramPostsHtml = '';
        var thumbnailImage;
        var link;
        //var caption;
        //var smallImage;
        //var largeImage;
        //var date;
        //var type;
        var post;
        for (var post in posts) {
            //caption = posts[post].Caption;
            thumbnailImage = posts[post].ThumbnailImage; 
            link = posts[post].Link;            
            if (thumbnailImage.length > 0) {                
                if (link != null) {
                    post = '
';
                }
                instagramPostsHtml += post;
            }
        }
        instagramPostsHtml = '
'+instagramPostsHtml+'
';
        return instagramPostsHtml;
    }

    // get instagram posts and add them to the Instagram UI
    __getInstagramPosts(function (instagramPosts) {
        igFeed.html(__processInstagramPosts(instagramPosts));
    });
}

Then create a SharePoint page and in edit mode, add a Script editor web part and add below snippet:

//Instagram Feed

Once you save the page, you will see the 3 recent photos loaded onto the web part.
Happy Coding...Hope you like this post!!! Please share or comment if you like it.