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.
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.
{:}{:ja}開発したSitecoreWebサイトに、集約されたソーシャルメディアコンテンツを表示するというクライアントの要件がありました。 要望達成するのに検討したところですが見つけたのはJuicerAPIです。Juicerは、LinkedIn、Facebook、Twitter、Instagramなどのソーシャルアカウントの大部分でSitecoreと連携しています。
Juicer APIが以下のようにメリットもまります：
- Webサイトのソーシャルメディア統合を管理するためのワンストップダッシュボードを提供します。
- 個別のコードが不要になります。
しかしいつもとようにお客さんの要望で追加要望がありました。お客さんがやりたかったのは作っていたウェブサイトのカスタムUIにソーシャルメディアフィードを統合したいということでした。同じようの要望があって解決方法を調べていることであれば方法がこちらです。
始める前に、Juicer APIのプランをご覧ください。以下のようになります
Pricing plan:https://www.juicer.io/about#pricing
例を見ながら実施方法を理解していきましょう。
ログイン画面が以下の通りにあって、要件は、ユーザーがログインした後、ダッシュボードにさまざまなソーシャルメディア接続を追加することです。
Juicerのログイン画面
Juicerアカウント設定
O必要なソーシャルメディアサービスに正常に接続すると、Juicerのダッシュボードは以下のようになります。
Juicerダッシュボード
上記のイメージで左側に見えているグレーパネルを設定パネルです。設定パネルでいろいろの設定ができます例えばフィードの更新頻度など
なおJuicerがデフォルトで提供しているのはiFrameを利用してフィードをウェbサイトに統合する。でも要望としてJuicerダッシュボードで表示されているフィードをウェブサイトのカスタムUIに追加する必要があります。達成が以下のコードを利用して対応できます：
Sitecore Architecture
Step 1 : Mainメソッド
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: Juicerダッシュボードのすべてのソースからのすべてのフィードを取得するメソッド.
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;
}上記のメソッドから返された「feedsList」変数を利用して、UIにソーシャルメディアフィードを表示できます。
これで要望に対してJuicerダッシュボードからのフィードをカスタムUIに統合することが達成できました。
まとめ
今回はJuicerダッシュボードからのフィードをカスタムUIに統合することについて説明しましたがいかがでしたでしょうか。
Juicer API Integrationについて少しでも参考になれば幸いです。
{:}
Leave a Reply