Use AEM with Livefyre

The Livefyre Adobe Experience Manager Package seamlessly integrates Livefyre’s industry-leading Social Depth Applications with your existing AEM site and creation tools.

On this page:

With AEM, you can discover and publish valuable user-generated content from social networks to your site in minutes, using Livefyre Apps. Features in using Livefyre with AEM include

  • Automatic integration of AEM Identity Management with Livefyre’s Single Sign On capabilities.
  • A suite of AEM components help your team publish Livefyre social content to your AEM sites and communities.
  • Access to Livefyre Studio, including tools to discover, curate, organize, and publish your social content assets in real-time.
  • Supports Touch or Classic UI for some versions of Livefyre with AEM.
  • Supports AEM templates and JSP components.

Set Up AEM for Livefyre

Follow this series of steps to install and configure AEM for Livefyre.

To install and use an AEM Sites and Assets package you need AEM 6.2 GA or 6.3 GA. To set up AEM for Livefyre:

  1. Remove any previous instances of Livefyre in your AEM system.
  2. Back up your data and current AEM instance.
  3. Make sure you have all the items in Before you Begin.
  4. Perform one of the following tasks:
  5. Configure AEM to Use Livefyre.
  6. (Optional)Customize Single Sign-on Integration.

Before you Begin

Ensure you have the items in this list in order to install and use AEM Communities.

To install and use an AEM Communities Package, you will need:

  • Adobe Experience Manager 6.1, 6.2 GA or 6.3 GA
    • If your organization is interested in using Livefyre with other versions of Adobe Experience Manager, contact Livefyre to let us know.
  • AEM Communities for your version of AEM
  • A Livefyre license, and an account to access Livefyre Studio
    • If you already have a Livefyre license, your Account Manager can invite you to Livefyre Studio.
    • To learn more about Livefyre, contact Livefyre and tell us about your Social Content publishing needs. We can help!

Install Livefyre for AEM 6.1 or AEM 6.2

Follow these steps to Install Livefyre for AEM 6.1 or 6.2 without AEM Assets.

For more information on downloading and installing AEM packages, see Downloading and Installing Packages from Package Share on docs.adobe.com.

To install the Livefyre for AEM package for 6.1 or 6.2:

  1. Search AEM Package Share for “Communities.”
  2. Click on one of the following Communities Packages that contain the Livefyre package and automatically install Livefyre in AEM:
  3. Download the feature pack into Package Manager. Livefyre automatically installs when you install Communities. To check that Livefyre is active, you can view the bundle in the system console. For more information on how to view the bundle in the system console, see Web Console on docs.adobe.com.
  4. Replicate the package to your Publish instance by clicking More > Replicate.

Install Livefyre to use AEM Assets

Follow the steps to install and use Livefyre with AEM Assets.

To install AEM Assets for use with Livefyre:

  1. Contact your sales consultant or account manager for the bundle and the package for your version of AEM (6.2 GA or 6.3 GA only).
  2. Install the Livefyre bundle for your version AEM.
  3. Install the AEM Assets and Sites package for your version of AEM.
    Note: You need to have an AEM Assets license to use AEM Assets with Livefyre. You must have a Livefyre license to use AEM Assets with Livefyre.
  4. Download the package into Package Manager. Livefyre automatically installs when you install the bundle and package. To check that Livefyre is active, you can view the bundle in the system console. For more information on how to view the bundle in the system console, see Web Console on docs.adobe.com.
  5. Replicate the package to your Publish instance by clicking More > Replicate.

Configure AEM to Use Livefyre

Configure AEM to use your organization’s Livefyre license credentials.

  1. Find your organization’s Livefyre credentials. Open Livefyre Studio, and go to Settings > Integration Settings > Credentials, to access the following information:
    • Network Domain
    • Network Key
    • Site ID
    • Site Key
  2. Configure AEM to use this Livefyre Network and Site by creating one or more Livefyre Cloud Service Configurations.
    1. From the AEM Dashboard, go to Tools > Deployment > Cloud Services.
    2. Scroll to the Livefyre section.
    3. Click Configure now or Show Configurations (depending on your AEM platform).
    4. Click the plus sign (+) next to Available Configurations to create a Livefyre Configuration.
    5. Complete the information. For more on how to complete the information for Livefyre in AEM Cloud Services, see the Cloud Services Documentation for AEM on docs.adobe.com.
  3. When the Livefyre Network Configuration form displays, enter the Network Domain, Network Key, Site ID, and Site Key you obtained from Studio, and click OK.
    If your AEM Publish and AEM Author do not share the same cryptographic key you may need to repeat this process on the publisher instances. This is because the Network Key and Site Key are encrypted. For more information, see Replicate the Crypto Key on docs.adobe.com.
You’ve now created a Livefyre Cloud Service configuration using your Livefyre license. You can create more than one configuration if needed. For example, if you wish to use a different Livefyre Site for each of the websites hosted by your AEM installation.

Customize Single Sign-on Integration

The Livefyre for AEM package includes an out-of-the-box integration between AEM Identity Management’s User Profiles and Livefyre’s SSO service.

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

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

  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 on answers.livefyre.com.

    For more on AEM Clientlibs, see Using Client-Side Libraries on docs.adobe.com.

Integrate AEM Sites and Communities

Follow these steps to use Livefyre components with AEM Sites and Communities.

  1. Add Livefyre Components to Individual Pages or Add a Livefyre App to a Template
  2. Edit a Livefyre App from an AEM Page
  3. Publish a Livefyre App to a Page

Add Livefyre Components to Individual Pages

After you install and configure the Livefyre for AEM package, you can add Livefyre social components to any AEM page.

To add Livefyre components to your page, the page must inherit a Livefyre Cloud Service configuration from its parent page or have the configuration added directly to the page.

Enable the Livefyre Cloud Service for a Page

  1. Create a new page or edit an existing page. For more information on how to create and edit a page, see Authoring Pages on docs.adobe.com
  2. Choose Open Properties to open the Page Properties dialog.
  3. Click Cloud Services.
  4. If you do not see a Livefyre Cloud Service Configuration, click Add Configuration, then click Livefyre.
  5. If you have more than one Livefyre Configuration, choose the one you’d like to use for this page and its children.
  6. Click the checkmark in the top-right corner of the dialog to save.
  7. Enter Design Mode for the page to allow placement of Livefyre Components on the page. For more on how to use Design Mode for a page in AEM, see Configuring Components in Design Mode on docs.adobe.com.
  8. In the Editdialog window, scroll down in the Allowed Components section to find Livefyre. You can enable all components in the category, or any combination of individual components. for more information on how to enable or disable components in AEM, see Configuring Components in Design Mode on docs.adobe.com.

Add Livefyre Components to a Page

Add Livefyre components to a page in AEM.

  1. From the Components side panel, select Livefyre from the pulldown menu to limit the list to available Livefyre components.
  2. Select a Livefyre component, and drag it into position on your page.
  3. Once added, Livefyre Components automatically create a fresh Livefyre App to store and stream the social content rendered by the component. This App will be created in the Livefyre site and network used in the Livefyre Cloud Service Configuration for the AEM Page.
    Note: Because a new, empty Livefyre App is created for each added Livefyre component, the component may render with very little content before you add content using Livefyre Studio. For more information on how to add content to a Livefyre App from a page, see Edit a Livefyre Component from an AEM Page.

    For more information on how to insert a component, see Editing Page Content on docs.adobe.com.

Add Livefyre Components to a Template

  1. Access CRXDE Lite.
  2. Navigate to your template node.
  3. Create a node in the location in which you want your Livefyre component.
    For more information see Page Templates - Editable in the AEM 6.3 documentation.
  4. In the Create Node window, enter the following information:
    • Name: sling:resourceType
    • Type: nt:unstructured
  5. In the Properties table, add one of the following values to the Value field, depending on which App you would like to add to the template:
    • To use the Card App: social/integrations/livefyre/components/card
    • To use the Carousel App: social/integrations/livefyre/components/carousel
    • To use the Chat App: social/integrations/livefyre/components/chat
    • To use the Comments App: social/integrations/livefyre/components/comments
    • To use the Feature Card App: social/integrations/livefyre/components/card
    • To use the Live Blog App: social/integrations/livefyre/components/liveblog
    • To use the Map App: social/integrations/livefyre/components/map
    • To use the Mosaic App: social/integrations/livefyre/components/mosaic
    • To use the Media Wall App: social/integrations/livefyre/components/mediawall

Edit a Livefyre Component from an AEM Page

Note: You can only configure or edit a Livefyre component in Livefyre Studio.
  1. Click the Livefyre Component to configure.
  2. Click the Configure item (wrench) to open the Configuration Dialog.
  3. Click Livefyre Studio in the toolbar to open the App in Studio.
  4. Modify the App in Studio.

Publish a Livefyre Component to a Page

Follow these steps to publish a Livefyre Component to a page in AEM.

  1. Configure AEM to use Livefyre.
  2. Enable the Livefyre Cloud Service for a Page
  3. Add a Livefyre Component to a page.
  4. Edit the App in Livefyre Studio to stream social content into the App.
  5. Publish the AEM page to make the App available to your AEM site or community. For more information on how to publish pages using AEM, see Publishing Pages on docs.adobe.com.

Import UGC Content into AEM Assets

You can import Twitter and Instagram user-generated content (UGC) from Livefyre Studio to AEM Assets using the UGC Importer.

Import UGC content to AEM Assets by:

  • Accessing your Livefyre Library.
  • Searching real-time on Twitter and Instagram using Livefyre Social Search.
Note: To select real-time content from Instagram in AEM Assets, you must set up social accounts in Livefyre. See Social Accounts for more information on how to set up social accounts in Livefyre.

To import assets into AEM, perform the following steps:

  1. Select UGC from your Livefyre Library or real-time from Twitter or Instagram. See Select UGC to Import into AEM Assets for information on how to select UGC.
  2. Manage the rights on the UGC. See Request Rights Using AEM Assets for information on how to manage rights. You must have rights to the UGC content you import into AEM Assets. Grant rights by:
    • Sending a request to the social content owner.
    • Manually overriding rights status.
    Note: To perform a rights request in AEM Assets, you must set up Rights Management in Livefyre. See Set up Rights Management for more information on how to set up Rights Management in Livefyre.
  3. Click Import to complete the import process.
  4. Publish UGC using Livefyre components or AEM default components.

Select UGC to Import into Assets

Select content from your Livefyre Library or run real-time searches across Twitter and Instagram.

Selecting UGC content is the first step in importing UGC content to AEM Assets.

  1. Log in to AEM Assets library.
  2. Click Create, then Import UGC.
  3. Find content:
    • From Livefyre by clicking on the UGC Library tab. Use the filters and search to find content from the UGC Library.
    • From Twitter and Instagram by clicking on the Twitter or Instagram tab and use the search or filters to find content.
  4. Click on the assets you want to import to AEM Assets. The assets you select are automatically counted and saved under the Selected tab.
  5. Optional: Review and confirm the UGC content to import. click on the Selected tab.
  6. Click Next.
Request Rights Using AEM Assets

Request Rights Using AEM Assets

Request rights for assets you want to import from the UGC Library, Twitter, or Instagram.

You must select UGC to import into AEM Assets before you can request rights for those assets. You can:

  • Send a message to the owners of multiple assets at a time by using Bulk Message
  • Override the rights for multiple assets at once using Bulk Attribute Content Rights
  • Choose whether you want to message the content owner or manually attribute content rights for each asset you selected using Custom Actions.
Note: If any content item previously had rights requested or granted in the Livefyre platform, the status of the rights request will reflect appropriately for the content item.
Note: Overriding a rights request is stating that you own the content. Do not override a rights request without verifying that you own the content.

  1. 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.
  2. Click Import.

    You can see the status of a pending Rights Request for an asset in Livefyre Studio.

    Note: 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.

Publish UGC in AEM Sites or Communities

Display UGC on your AEM site.

You can use UGC in AEM Sites or Communities in one of two ways:

  • To use the content with the Social Media information it came from (for example, to make a piece of Twitter content come with the data from Twitter as well as the Twitter logo), the content must be inside a Livefyre component on an AEM Site.
    • Note: Any UGC content published to a Livefyre component happens in real time and does not go through the AEM publish workflow.
  • To use the content as media only (for example, to use a photo by itself on your site with no information about where it came from, like Twitter or Instagram), use the asset in an image component on an AEM Site. Video or text-only content is not supported outside of the UGC context.

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 AEM with Livefyre package installed on your AEM instance. For more on how to set up AEM with Livefyre, see Use AEM with Livefyre.
  2. Log in to AEM.
  3. Navigate to AEM Commerce.
  4. Create a new collection or use an existing collection.
  5. Click on Collection Properties.
  6. Click Sync to Livefyre.

Use HootSuite with AEM Livefyre

You can use an AEM Livefyre App with Hootsuite to stream assets from your AEM Livefyre libraries into Hootsuite. For more information about using the AEM Livefyre App with Hootsuite, see https://apps.hootsuite.com/0/adobe-livefyre