投稿者: 開発した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について少しでも参考になれば幸いです。