You're viewing help content for version:

Learn how to integrate Livefyre's industry leading curation capabilities with your AEM 6.4 instance, allowing you to publish valuable user-generated content (UGC) from social networks to your site in minutes.

Getting Started

Install Livefyre Package for AEM

AEM 6.4 comes with Livefyre feature package 1.2.6 pre-installed. This package only includes Livefyre integration with AEM Sites and must be uninstalled before installing an updated package. With the latest package, you can experience the full integration of Livefyre with AEM, including Sites, Assets, and Commerce. 

  1. From the AEM homepage, click the Tools icon on the left rail.

  2. Navigate to Deployment > Packages.

  3. In the Package Manager, scroll until you see the pre-installed Livefyre feature package, then click the package title to expand the options.

  4. Click More > Uninstall.

  5. Return to the AEM homepage, click Tools, then navigate to Deployment > Package Share.

    A list of feature packs and hotfixes available for download displays.

  6. In the keyword search, search for "Livefyre", then select the Livefyre feature pack corresponding to your AEM version.

  7. On the feature pack information page, click Download, then read the Package License Agreement and click Accept.

  8. Return to the Package Manager, locate the newly downloaded package, and click Install.

    Your Livefyre-AEM package is now installed. Before you can begin using the integration features, you must Configure AEM to use Livefyre.

    For more information on packages, see How to Work With Packages.

    For more information and release notes on feature packs, see Feature Packs.

Configure AEM to use Livefyre

Configure AEM to use your organization's Livefyre license credentials, allowing communication between Livefyre and AEM.

  1. From the AEM homepage, click the Tools icon in the left rail, then navigate to Deployment > Livefyre Configuration.

  2. Select the configuration folder in which you want to create a new Livefyre configuration, then click Create.



    Folders must have Cloud Configurations enabled in their properites before Livefyre configurations can be added to them. Configuration folders are created and managed in the Configuration Browser. 

    You cannot create a name for a configuration—it is referenced by the path of the folder it is in. You can only have one configuration per folder.

  3. Select the newly created Livefyre configuration card, then click Properties.

  4. Enter your organization's Livefyre credentials, then click OK.


    To access this information, open Livefyre studio and navigate to Settings > Integration Settings > Credentials.

    Your AEM instance is now configured to use Livefyre and you can use the integration features.

Customize Single Sign-on Integration

The Livefyre for AEM package includes an out-of-the-box integration between AEM Communities profiles and Livefyre's SSO service.

When users log into your AEM site, they are also logged into Livefyre social components. When a logged-out user attempts to use a Livefyre component feature that requires authentication (like uploading a photo), the Livefyre component initiates user authentication.

The default authentication integration may not be perfect for every site. To best match the authentication flow in your site templates, you can override the default Livefyre Authentication Delegate to meet your needs. Use these steps:

  1. Using CRXDE Lite, copy /libs/social/integrations/livefyre/components/authorizablecomponent/authclientlib to /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib.

  2. Edit and save /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib/auth.js to implement a Livefyre Auth Delegate that meets your needs.

    For more information on customizing an Auth Delegate, see Identity Integration.

    For more information on AEM Clientlibs, see Using Client-Side Libraries.

Use Livefyre with AEM Sites

Add Livefyre Components to a Page

Before adding Livefyre components to a page within Sites, you must enable Livefyre for the page by either inheriting a Livefyre cloud configuration from a parent page or by adding the configuration directly to the page. Refer to your implementation for how to include cloud services on your site.

Once Livefyre is enabled for the page, containers must be configured to allow Livefyre components. See Configuring Components in Design Mode for instructions on how to enable different components.


Apps requiring authentication to post do not function until authentication is configured in Customize Single Sign-on Integration.

  1. From the Components side panel in design mode, select Livefyre from the menu to limit the list to available Livefyre components.

  2. Select a Livefyre component, and drag it into position on your page.

  3. Select whether to create a new Livefyre app or to embed an existing one. 

    If embedding an existing app, AEM asks you to select the App. If creating a new App, the App will need to be populated before any content appears. The App will be created in the Livefyre site and network selected when Livefyre cloud configuration was enabled for the page.

    For more information on inserting components, see Editing Page Content.

Edit a Livefyre Component for an AEM Page.

You can only configure and edit a Livefyre component in Livefyre Studio. From AEM:

  1. Click the Livefyre component to configure.

  2. Click the Configure icon (wrench) to open the configuration dialog.

  3. Click To edit this component, go to Livefyre Studio.

  4. Edit the App in Livefyre Studio.

Use Livefyre with AEM Assets

Request Rights and Import UGC into AEM Assets

You can import Twitter and Instagram user-generated content (UGC) from Livefyre Studio to AEM Assets using the UGC Importer. After selecting the content to import, you must then request rights to the content before the import can be completed.


Before using Assets to import UGC, you must set up Social Accounts and Rights Requests accounts in Livefyre Studio. See Setting: Rights Requests for more information.

To import UGC into AEM Assets:

  1. From the AEM homepage, navigate to Assets > Files.

  2. Click Create, then click Import UGC.

  3. Find content:

    • From Livefyre by clicking the UGC Library tab. Use the filters and search to find content from the UGC Library.
    • From Twitter and Instagram by clicking the Twitter or Instagram tab. Use the search or filters to find content.
  4. Select the assets you want to import. The assets you select are automatically counted and saved under the Selected tab.

  5. Optional: Click the Selected tab and review your selected UGC content to import.

  6. Click Next.

  7. For rights requests, choose one of the following options under Actions in Bulk:

    • Bulk Message to send a message to the owners of several assets at once.
    • Bulk Attribute Content Rights to override the rights for multiple assets at once.
    • Custom Actions to choose whether to message the asset owner or override the rights request for each individual piece of content. If you choose Custom Actions, send a rights request message or modify the message for a rights request under individual assets. If you choose to override the rights request, verify that you own the content.
  8. Click Import.

    If you sent a rights request, the content owner will see the rights request message on the respective network. For example, on Instagram, they will see a comment on their post:


    And on Twitter, they will see a reply to their tweet:


    You can see the status of a pending rights request for an asset in Livefyre Studio. If content is pending a rights request, the asset will not display in AEM Assets until rights are granted. The asset automatically appears in AEM Assets when a rights request is granted.


    Twitter and Instagram have limits on identical requests coming from the same account. When importing more than a couple assets, modify the messages individually to avoid being flagged.

Use Livefyre with AEM Commerce

Import Product Catalogs into Livefyre with AEM Commerce

AEM Commerce users can seamlessly integrate their existing product catalog into Livefyre to drive user engagement in Livefyre's visualization Apps.

After you import the product catalog, the products show up in real time in your Livefyre instance. If you edit or delete items in your AEM Commerce Product Catalog, the changes automatically update in Livefrye.

  1. Ensure you have the latest Livefyre for AEM package installed on your AEM instance.

  2. From the AEM homepage, navigate to AEM Commerce.

  3. Create a new collection or use an existing collection.

  4. Hover over the collection and click Collection Properties (pencil icon).

  5. Check Sync to Livefyre.

  6. Fill in Livefyre Page Prefix to link this collection to a specific page in AEM.

    The page prefix defines the root path in your environment where searching for product pages begins. Livefyre chooses the first page that has a corresponding product associated to it. To get different pages for different products, multiple collections are needed.

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