Embed Social Feed into your website using Juicer

One fine day at office I had a client requirement for displaying their aggregated social media content on the Sitecore website we developed for them.

The best API I came across to perform this operation is Juicer API. Juicer works with Sitecore for majority of the social accounts which LinkedIn, Facebook, twitter, Instagram etc. It’s also beneficial as:

• It provides a one stop dashboard to manage social media integration for the website.
• It eliminates the need of separate code.

But as always there is always a twist in every of the client’s requirement. They wanted to integrate the social media feed in a custom UI for there website. Now if you have any such requirement, you are in the right place.

Before beginning, following is the variety of the plans available for using Juicer API.

URL: https://www.juicer.io/

Pricing plan:https://www.juicer.io/about#pricing

Let’s understand the implementation in form of an example.

Following is the login screen; requirement is to add the various social media connections in the dashboard after the user logs in.

Login screen of Juicer

Account settings of Juicer

Once you successfully connect the required social media services, the dashboard of Juicer will look as shown below.

Dashboard of Juicer

In the above image we see a left-grey panel which is the settings panel. It helps managing the various aspects like update frequency of the feeds etc.

Now going by the default mechanism juicer provides the option to integrate these feeds as iframe on the website.

Going by our problem statement, we have to embed the feeds visible on the Juicer dashboard into the website with a custom UI for which the following code can be used:

Sitecore Architecture

Step 1 : Main method

        public List<Feed> feedsList = new List<Feed>();
        public List<Feed> mainFeedsList = new List<Feed>();
        
public ActionResult MixSocialFeeds()
        {
            string theUrlParams = string.Empty;
            string theFilter = string.Empty;

            Sitecore.Data.Items.Item dataSourceItem = Sitecore.Context.Database.GetItem(RenderingContext.Current.Rendering.DataSource);

            string theUrl = dataSourceItem.Fields[Templates.MixSocialFeeds.Fields.SocialFeedsUrl].ToString();
            if (dataSourceItem.FieldHasValue(Templates.MixSocialFeeds.Fields.NumberOfFeeds))
            {
                theUrlParams = "per=" + dataSourceItem.Fields[Templates.MixSocialFeeds.Fields.NumberOfFeeds].ToString() + "&photos=true";
            }
            else
            {
                //Default option
                theUrlParams = "per=5&photos=true";
            }
            if (dataSourceItem.FieldHasValue(Templates.MixSocialFeeds.Fields.SocialMediaFilter))
            {
                theFilter = dataSourceItem.Fields[Templates.MixSocialFeeds.Fields.SocialMediaFilter].ToString();
            }
            else
            {
                theFilter = "filter=facebook|filter=instagram|filter=twitter|filter=linkedin";
            }
            var result = GetAllFeeds(theUrl, theFilter, theUrlParams, dataSourceItem);
            return View(result);
        }

Step 2: Method for contemplating all the feeds from all the source in the Juicer dashboard.

        private List<Feed> GetAllFeeds(string url, string filter, string urlParams, Sitecore.Data.Items.Item dataSource)
        {
            string[] multipleFilter = filter.Split('|');
            foreach (string newFilter in multipleFilter)
            {
                urlParams = "?" + newFilter + "&" + urlParams;
                mainFeedsList = GetFeeds(url, urlParams, dataSource);
            }
            return mainFeedsList.OrderByDescending(i => i.FeedDateTime).ToList();
        }

Step 3: Method calling the Juicer API.

        private List<Feed> GetFeeds(string url, string urlParams, Sitecore.Data.Items.Item datasource)
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(url);
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                HttpResponseMessage response = new HttpResponseMessage();

                response = client.GetAsync(urlParams).Result;
                if (response.IsSuccessStatusCode)
                {
                    // Reading Response.  
                    var result = response.Content.ReadAsStringAsync().Result;
                    Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(result);
                    foreach (var feed in myDeserializedClass.posts.items)
                    {
                        feedsList.Add(new Feed
                        {
                            ID = feed.id.ToString(),
                            FeedFullUrl = feed.full_url,
                            FeedMessage = feed.unformatted_message,
                            FeedProfileUserPic = feed.poster_image,
                            FeedProfileUserName = feed.poster_name,
                            FeedImage = feed.image.ToString(),
                            DataSourceItem = datasource,
                            FeedDateTime = feed.external_created_at
                        });
                    }
                }
            }
            return feedsList;
        }

The ‘feedsList’ variable returned from above method can be leveraged to display the social media feed in our UI.

This completes our requirement of integrating the feed fromJuicer dashboard into the website, with a custom look and feel.

I hope you find this useful, and it saves you time.