Livefyre との統合

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

はじめに

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

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

メモ

AEM-LF パッケージの一部の機能は、ソーシャルコンポーネントフレームワーク(SCF)に依存しています。Livefyre 機能パックをコミュニティ以外のサイトの一部として使用している場合は、Web サイトのオーサー clientlibs に依存関係として cq.social.scf を宣言する必要があります。コミュニティ Web サイトの一部として LF 機能パックを使用している場合、この依存関係はすでに宣言されているはずです。

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

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

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

  4. クリック その他 > アンインストール.

    livefyre-aem-uninstall-64

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

  6. パッケージマネージャーから、ダウンロードしたパッケージをインストールします。 詳しくは、 パッケージの使用方法 AEMでのソフトウェア配布とパッケージの使用に関する詳細

    livefyre-aem4-6-4

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

    機能パックの詳細およびリリースノートについては、 機能パック.

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

  1. AEMのホームページで、 ツール アイコンをクリックし、 一般/設定ブラウザー.

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

  3. 設定に名前を付けて、 クラウド設定 チェックボックス

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

    livefyre-aem-create-config-folder

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

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

  1. AEMのホームページで、 ツール アイコンをクリックし、 デプロイメント/Livefyre 設定.

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

    create-livefyre-configuration1

    メモ

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

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

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

    create-livefyre-configuration2

  4. 組織の Livefyre 資格情報を入力し、「 OK.

    configure-aem2

    この情報にアクセスするには、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 コンポーネントを許可するようにコンテナを設定する必要があります。詳しくは、 デザインモードでのコンポーネントの設定 様々なコンポーネントを有効にする方法の説明

メモ

POST 認証が必要なアプリは、シングルサインオン統合のカスタマイズで認証が設定されるまで機能しません。

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

    livefyre-add

  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 に読み込むことができます。読み込むコンテンツを選択したら、読み込みを完了する前に、コンテンツに対する権限をリクエストする必要があります。

メモ

Assets を使用して UGC を読み込む前に、Livefyre Studio でソーシャルアカウントと権限リクエストアカウントを設定する必要があります。詳しくは、 設定:権限リクエスト を参照してください。

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

  1. AEMホームページから、に移動します。 アセット/ファイル.

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

    livefyre-aem-import-ugc

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

    • Livefyre からコンテンツを見つけるには、「UGC ライブラリ」タブをクリックします。フィルターおよび検索を使用して UGC ライブラリからコンテンツを見つけます。
    • Twitter および Instagram からコンテンツを見つけるには、「Twitter」または「Instagram」タブをクリックします。検索またはフィルターを使用してコンテンツを見つけます。
  4. 読み込むアセットを選択します。選択したアセットは自動的にカウントされ、 選択 タブに表示されます。

  5. オプション:「 選択 」タブに移動し、読み込む選択した UGC コンテンツを確認します。

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

    livefyre-aem-import-ugc2

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

    Instagram の場合:

    • 手動での権限のリクエスト をクリックして、コピー&ペーストできるメッセージを取得し、Instagram経由でコンテンツの所有者に手動で送信します。
    • 手動によるコンテンツ権限の属性設定 個々のアセットの権限を上書きする場合。
    メモ

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

    livefyre-aem-import-ugc3-6-4

    Twitter の場合

    • 作成者へメッセージ:コンテンツ所有者に、アセットに対する権限をリクエストするメッセージを送信します。
    • 手動によるコンテンツ権限の属性設定 個々のアセットの権限を上書きする場合。
  8. 読み込み」をクリックします。

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

    livefyre-aem-rights-request-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インスタンスにAEM用の最新の Livefyre パッケージがインストールされていることを確認します。

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

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

  4. コレクションの上にマウスポインターを置いて、「 コレクションのプロパティ (鉛筆アイコン)。

  5. チェック Livefyre と同期.

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

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

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

Livefyre アプリ AEM 6.1 AEM 6.2 AEM 6.3 AEM 6.4
カルーセル X X X X
チャット X X X X
コメント X X X X
フィルムストリップ X X X
LiveBlog X X X X
Map X X X X
Media Wall X X X X
モザイク X X X X
投票 X X X
レビュー X X X
シングルカード X X X X
Storify 2 X X X
トレンド分析 X X X
アップロードボタン X X X

このページ