AEM Livefyre Recipes

Step-by-step instructions on common use cases for Adobe Experience Manager Livefyre.

Curate UGC using the out-of-the-box Livefyre AEM components and display using Livefyre Media Wall

Media Wall streams social and native Livefyre content into a real-time social wall. There are multiple ways to implement Media Wall in AEM depending on your use case and requirements.

The AEM Livefyre Package provides an out-of-box implementation, whereas the traditional integration provides the ability to create custom Livefyre AEM components.

AEM Integration

The Livefyre Adobe Experience Manager Package is available for AEM 6.1, 6.2SP1, 6.3, ,6.4 and 6.4 SP1. AEM 5.x and 6.0 are not supported. For detailed instructions, see Integrating with Livefyre.

To see which Livefyre Apps are supported, see the AEM Support Matrix for Livefyre Apps.

Traditional Implementation (for customized AEM components)

There are three ways to implement Livefyre into a custom AEM component or other CMSs like WordPress, Sitecore, or DemandWare. A traditional Livefyre integration is CMS agnostic.

Method 1: Designer App Implementation

• What: Simplest and fastest way of integrating a Livefyre App. You can design, configure, and generate a customized JavaScript embed code to integrate a Media Wall App on a page in minutes.

• How: Create, Preview, Publish, and Embed a Media Wall App

• Example: https://codepen.io/dharafyre/pen/bvGrLo

Method 2: SDK Implementation

• What: Livefyre.js is the core library that powers Apps and Auth on a site. It defines the global window.Livefyre object and a single public method, Livefyre.require, which can be used to load other Livefyre JavaScript libraries that help with embedding Livefyre Apps and integrating with third party User Auth platforms.

• How: Use the Livefyre JavaScript SDK’s streamhub-wallpackage

• Example: https://codepen.io/dharafyre/pen/KZKBNv?editors=1010

For advanced customizations using the SDK, please refer to StreamHub SDKs.

Method 3: API Implementation

• For creating customized experiences and data visualizations, Livefyre Apps can be created from scratch by consuming Livefyre and social data using the Bootstrap and Stream API.

Make sure you follow Twitter, Facebook, and Instagram display guidelines when building the UI for UGC.

Media Wall Authentication Integration

For Media Wall Integrations requiring authentication, please refer to:

• Customize Single Sign on Integration for AEM Identity Management
• Identity Integration for third party authentication platforms

Use Case Overview

As an AEM customer, I want to curate UGC using the out-of-the-box Livefyre AEM components and display using Livefyre Media Wall:

Steps to implement:

1. Getting Started
2. Configure AEM to use Livefyre
3. Drag and drop AEM Media Wall component onto your page
4. Configure Streams and add rules to curate UGC and display on the Media Wall component

For training videos on streaming UGC, see Create Automatic Content Streams and Search Social Content in Adobe Experience Manager Livefyre.

Customer Examples

• CNN Media Wall
• PGA Tour Media Wall

For creating customized experiences and data visualizations, Livefyre Apps can be created from scratch by consuming Livefyre and social data using the Bootstrap and Stream API.

For Livefyre Apps requiring authentication, please see Identity Integration for third party authentication platforms.

• PGA Tour Media Wall
• TimeOut

Integrate Livefyre Comments using AEM Components or traditional Livefyre integration

AEM Integration

The Livefyre Adobe Experience Manager Package is available for AEM 6.1, 6.2SP1, 6.3, ,6.4 and 6.4 SP1. AEM 5.x and 6.0 are not supported. For detailed instructions, see Integrating with Livefyre.

Traditional Implementation (for customized AEM components)

There are three ways to implement Livefyre Comments App into a custom AEM component or other CMSs like WordPress, Sitecore, or DemandWare. A traditional Livefyre integration is CMS agnostic.

Method 1: Designer App Implementation

• What: Simplest and fastest way of integrating a Livefyre App. You can design, configure, and generate a customized JavaScript embed code to integrate a Media Wall App on a page in minutes.

• How: Create, Preview, Publish, and Embed a Comments App

• Example: https://codepen.io/dharafyre/pen/oYoJdP

Method 2: SDK Implementation

• What: Livefyre.js is the core library that powers Apps and Auth on a site. It defines the global window.Livefyre object and a single public method, Livefyre.require, which can be used to load other Livefyre JavaScript libraries that help with embedding Livefyre Apps and integrating with third party User Auth platforms.

• How:

  • Create a collection/App using CollectionMeta token.
  • Integrate Comments App into sites using the Livefyre.js embed code structure.

• Example: https://codepen.io/dharafyre/pen/oYoJdP

For advanced customizations using the SDK, please see StreamHub SDKs.

Method 3: API Implementation

• For creating customized experiences and data visualizations, Livefyre Apps can be created from scratch by consuming Livefyre and social data using the Bootstrap and Stream API.

Comments App Authentication Integration

• Customize Single Sign on Integration for AEM Identity Management
• Identity Integration for third party authentication platforms

Customer Examples

• Poise (Kimberly Klark)

Use Livefyre AEM Assets integration to import UGC in AEM Assets

Livefyre Setup (for UGC Curation and Rights Management):

1. Configure Streams and Add Rules to curate UGC to Livefyre Asset Library Folders.

   1. For training videos on streaming UGC, see Create Automatic Content Streams and Search Social Content in Adobe Experience Manager Livefyre.

2. Gather, organize, and manage curated UGC in Livefyre Asset Library folders.

   1. For training videos on creating and managing folders in the Livefyre Studio Asset Library, see Work with Assets in Adobe Experience Manager Livefyre.

3. Request Rights for curated UGC using Livefyre Studio.

AEM Setup (for importing UGC to AEM Assets):

1. Getting Started
2. Configure AEM to use Livefyre
3. Import UGC curated by Livefyre in to AEM Assets

• Tourism Australia

Integrate Livefyre Reviews using AEM Components or traditional Livefyre integration

AEM Integration

The Livefyre Adobe Experience Manager Package is available for AEM 6.1, 6.2SP1, 6.3, ,6.4 and 6.4 SP1. AEM 5.x and 6.0 are not supported. For detailed instructions, see Integrating with Livefyre.

Reviews Component is not a supported component for AEM 6.1. Please check the AEM support matrix for all Livefyre Apps.

Traditional Implementation (for customized AEM components)

There are two ways to implement Livefyre Reviews App into a custom AEM component or other CMSs like WordPress, Sitecore, or DemandWare. A traditional Livefyre integration is CMS agnostic.

Method 1: SDK Implementation

• What: Livefyre.js is the core library that powers Apps and Auth on a site. It defines the global window.Livefyre object and a single public method, Livefyre.require, which can be used to load other Livefyre JavaScript libraries that help with embedding Livefyre Apps and integrating with third party User Auth platforms.

• How:

  • Create the Reviews CollectionMeta token to specify metadata to store within the Reviews Collection.
  • Integrate Reviews App into Sites using the Livefyre.js embed code structure

• Example: https://codepen.io/dharafyre/pen/GXgvvd

For advanced customizations using the SDK, please see StreamHub SDKs.

Method 2: API Implementation

• For creating customized experiences and data visualizations, Livefyre Apps can be created from scratch by consuming Livefyre and social data using the Bootstrap and Stream API.

Additional Ratings and Reviews APIs can be found here.

Comments App Authentication Integration

• Customize Single Sign on Integration for AEM Identity Management
• Identity Integration for third party authentication platforms

Customer Examples

• TimeOut
• myrecipes