You're viewing help content for version:

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

Method 2: SDK Implementation

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 TwitterFacebook, and Instagram display guidelines when building the UI for UGC.

Media Wall Authentication Integration

For Media Wall Integrations requiring authentication, please refer to:

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

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.

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

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:
  • 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

Customer Examples

Use Livefyre AEM Assets integration to import UGC in AEM Assets

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

Customer Examples

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy