Livefyre との統合

Livefyre の業界最高レベルのキュレーション機能を AEM 6.4 と統合する方法を説明します。これにより、ソーシャルネットワークからの有用なユーザー生成コンテンツ（UGC）をサイトに数分で公開できます。

はじめに

AEM 用 Livefyre パッケージのインストール

AEM 6.4 には、Livefyre 機能パッケージ 1.2.6 がプリインストールされています。このパッケージには Livefyre の AEM Sites との統合のみが含まれているので、更新パッケージをインストールする前に、まずアンインストールする必要があります。最新のパッケージでは、Sites、Assets および Commerce を含む、Livefyre と AEM の完全な統合を利用できます。

1. AEMホームページで、左側のレールの​ツール​アイコンをクリックします。

2. デプロイメント/パッケージ​に移動します。

3. パッケージマネージャーで、事前にインストールされたLivefyre機能パッケージが表示されるまでスクロールし、パッケージタイトル​cq-social-livefyre-pkg-1.2.6.zip​をクリックしてオプションを展開します。

4. その他>アンインストール​をクリックします。

   

5. ソフトウェア配布からLivefyreパッケージをダウンロードします。

6. パッケージマネージャーから、ダウンロードしたパッケージをインストールします。 AEMでのソフトウェア配布パッケージとパッケージの使用手順については、How to Work with Packagesを参照してください。

   

   Livefyre-AEM パッケージがインストールされます。統合機能を使い始める前に、Livefyre を使用するように AEM を設定する必要があります。

   機能パックの詳細とリリースノートについては、機能パックを参照してください。

Livefyreを使用するようにAEMを設定します。構成フォルダーの作成

1. AEMホームページで、左側のレールの​ツール​アイコンをクリックし、一般/設定ブラウザー​に移動します。

   • 詳しくは、🔗設定ブラウザーのドキュメントを参照してください。

2. 「作成」をクリックして、設定を作成ダイアログを開きます。

3. 設定に名前を付け、「クラウド設定」チェックボックスをオンにします。

   これにより、ツール/デプロイメント/Livefyre設定​の下に、指定された名前のフォルダーが作成されます。

   

Livefyre を使用するための AEM の設定：Livefyre 設定 の作成

組織の Livefyre ライセンス資格情報を使用するように AEM を設定して、Livefyre と AEM の間で通信できるようにします。

1. AEMホームページで、左側のレールの​ツール​アイコンをクリックし、デプロイメント/Livefyre設定​に移動します。

2. 新しい Livefyre 設定を作成する設定フォルダーを選択して、「作成」をクリックします。

   

   メモ

   Livefyre設定を追加する前に、フォルダーのプロパティでクラウド設定を有効にしておく必要があります。 設定フォルダーが作成され、設定ブラウザーで管理されます。

   設定の名前は作成できません。フォルダーのパスによって参照されます。設定はフォルダーごとに 1 つのみです。

   詳しくは、🔗設定ブラウザーのドキュメントを参照してください。

3. 新しく作成した Livefyre 設定カードを選択して、「プロパティ」をクリックします。

   

4. 組織のLivefyre資格情報を入力し、「OK」をクリックします。

   

   この情報にアクセスするには、Livefyre Studioを開き、設定/統合設定/資格情報​に移動します。

   Livefyre を使用するように AEM インスタンスが設定され、統合機能を使用できます。

シングルサインオン統合のカスタマイズ

AEM 用 Livefyre パッケージには、AEM Communities プロファイルと Livefyre の SSO サービス間の標準の統合が含まれています。

ユーザーは、AEM サイトにログインすることで、Livefyre ソーシャルコンポーネントにもログインします。ログアウトしたユーザーが、写真のアップロードなど、認証が必要な Livefyre コンポーネント機能を使用しようとすると、Livefyre コンポーネントがユーザー認証を開始します。

デフォルトの認証統合は、すべてのサイトに対して完璧なわけではありません。サイトテンプレートの認証フローに完全に合致させるために、ニーズに合わせてデフォルトの Livefyre Authentication Delegate を上書きすることができます。次の手順を実行します。

1. CRXDE Liteを使用して、 /libs/social/integrations/livefyre/components/authorizablecomponent/authclientlib​を​/apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib​にコピーします。

2. /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib/auth.js​を編集して保存し、ニーズに合ったLivefyre Auth Delegateを実装します。

   Auth Delegateのカスタマイズについて詳しくは、ID統合を参照してください。

   AEM Clientlibsの詳細については、クライアント側ライブラリの使用を参照してください。

AEM Sites での Livefyre の使用

Livefyre コンポーネントのページへの追加

Livefyre コンポーネントを Sites 内のページに追加する前に、Livefyre クラウド設定を親ページから継承するか、設定をページに直接追加することで、ページ用の Livefyre を有効にする必要があります。サイトのクラウドサービスの追加方法について、実装を参照します。

ページ用に Livefyre が有効になったら、Livefyre コンポーネントを許可するようにコンテナを設定する必要があります。様々なコンポーネントを有効にする方法については、デザインモードでのコンポーネントの設定を参照してください。

1. デザインモードの​コンポーネント​サイドパネルから、メニューから​Livefyre​を選択して、使用可能なLivefyreコンポーネントに限定します。

   

2. Livefyre コンポーネントを選択して、ページ上の位置にドラッグします。

3. 新しい Livefyre アプリを作成するか、既存のアプリを埋め込むかを選択します。

   既存のアプリを埋め込む場合、アプリを選択するように促されます。新しいアプリを作成する場合、アプリは、コンテンツが表示される前に設定しておく必要があります。アプリは、Livefyre サイト、およびページ用に Livefyre クラウド設定を有効にした際に選択したネットワークに作成されます。

   コンポーネントの挿入について詳しくは、ページコンテンツの編集を参照してください。

AEMページ用のLivefyreコンポーネントを編集します。

Livefyre コンポーネントは、Livefyre Studio でのみ設定および編集できます。AEM で次の手順を実行します。

1. 設定する Livefyre コンポーネントをクリックします。
2. 設定​アイコン（レンチ）をクリックして、設定ダイアログを開きます。
3. このコンポーネントを編集するには、Livefyre Studio​に移動します。
4. Livefyre Studio でアプリを編集します。

AEM Assets での Livefyre の使用

権限のリクエストと AEM Assets への UGC の読み込み

UGC Importer を使用して、Twitter および Instagram ユーザー生成コンテンツ（UGC）を Livefyre Studio から AEM Assets に読み込むことができます。読み込むコンテンツを選択したら、読み込みを完了する前に、コンテンツに対する権限をリクエストする必要があります。

UGC を AEM Assets に読み込むには：

1. AEMのホームページから、Assets/Files​に移動します。

2. 「作成」をクリックし、「UGCを読み込み」をクリックします。

   

3. 次の方法でコンテンツを見つけます。

   • Livefyre からコンテンツを見つけるには、「UGC ライブラリ」タブをクリックします。フィルターおよび検索を使用して UGC ライブラリからコンテンツを見つけます。
   • Twitter および Instagram からコンテンツを見つけるには、「Twitter」または「Instagram」タブをクリックします。検索またはフィルターを使用してコンテンツを見つけます。

4. 読み込むアセットを選択します。選択したアセットが自動的にカウントされ、「選択済み」タブに保存されます。

5. オプション:「選択済み」タ ​​ブをクリックし、読み込むUGCコンテンツを確認します。

6. 「次へ」をクリックします。

   

7. 権限リクエストについて、各アセットに対して次のいずれかのオプションを選択します。

   Instagram の場合：

   • 手動で の要求：コピー&ペーストできるメッセージを取得し、Instagramを介して手動でコンテンツ所有者に送信する権限。
   • 手動でのコンテンツ 権限の属性を指定して、個々のアセットの権限を上書きします。
   メモ

   ビジネス以外のユーザーアカウントからのコンテンツの集約に影響する更新により、お客様に代わってコメントを投稿したり、作成者からの返信を自動的に確認したりできなくなりました。 詳しくはここをクリックしてください。

   

   Twitter の場合

   • 作成者へメッセージ：コンテンツ所有者に、アセットに対する権限をリクエストするメッセージを送信します。
   • 手動でのコンテンツ 権限の属性を指定して、個々のアセットの権限を上書きします。

8. 「読み込み」をクリックします。

   Twitter の権限リクエストを送信する場合、コンテンツ所有者には、自身のアカウント上に権限リクエストメッセージが表示されます。

   

   メモ

   Twitter には、同じアカウントから来る同じリクエストに対して制限があります。2 つ以上のアセットを読み込む場合、メッセージを個別に変更して、フラグが設定されるのを避けます。

9. 右上隅の「完了」をクリックして、権限リクエストワークフローを終了します。

   Livefyre Studio で、アセットに対する保留中の権限リクエストのステータスを確認できます。コンテンツが権限リクエストを保留している場合、権限が付与されるまで、AEM Assets でアセットが表示されません。権限リクエストが許可されると、AEM Assets にアセットが自動的に表示されます。

   Instagram の場合は、コンテンツ所有者の応答を追跡し、コンテンツへの権限が与えられている場合は手動で権限を付与する必要があります。

AEM Commerce での Livefyre の使用

AEM Commerce を使用した製品カタログの Livefyre への読み込み

AEM Commerce ユーザーは、既存の製品カタログを Livefyre にシームレスに統合して、Livefyre のビジュアライゼーションアプリのユーザーエンゲージメントを推進できます。

製品カタログを読み込んだら、製品がリアルタイムに Livefyre インスタンスに表示されます。AEM Commerce 製品カタログの項目を編集または削除する場合、変更は Livefrye で自動的に更新されます。

1. AEMインスタンスに最新のLivefyre for AEMパッケージがインストールされていることを確認します。

2. AEMのホームページから、AEM Commerce​に移動します。

3. 新しいコレクションを作成するか、既存のコレクションを使用します。

4. コレクションの上にマウスポインターを置き、「コレクションのプロパティ」（鉛筆アイコン）をクリックします。

5. 「 Livefyre​と同期」をオンにします。

6. Livefyreページのプレフィックス​に入力して、このコレクションをAEMの特定のページにリンクします。

   ページのプレフィックスは、環境のルートパスを定義します（そこから製品ページの検索が開始されます）。Livefyre で、関連付けられた対応する製品を含む最初のページが選択されます。別の製品のための別のページを取得するには、複数のコレクションが必要です。

Livefyre アプリの AEM サポート一覧