現在表示中:

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

はじめに

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

AEM 6.4 には、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. AEM ホームページに戻り、ツールをクリックして、導入/パッケージ共有に移動します。

    ダウンロード可能な機能パックとホットフィックスのリストが表示されます。

  6. キーワード検索で "Livefyre" を検索して、お使いの AEM バージョンに対応する Livefyre 機能パックを選択します。

    livefyre-aem3-6-4
  7. 機能パック情報ページで、「ダウンロード」をクリックし、パッケージの使用許諾契約書を読んで、「同意」をクリックします。

  8. パッケージマネージャーに戻り、新しくダウンロードしたパッケージを探して、「インストール」をクリックします。

    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 Authentication Delegate を実装します。

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

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

AEM Sites での Livefyre の使用

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

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

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

注意:

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

  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
マップ 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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー