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.
AEM 6.4 comes with Livefyre feature package 1.2.6 pre-installed. This package only includes limited 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.
Some features of the AEM-LF package depend on Social Component Framework (SCF). If you are using the Livefyre feature pack as part of a non-communities site, you must declare cq.social.scf as a dependency in the author clientlibs of the website. If you are using the LF feature pack as part of a communities website, this dependency should already be declared.
From the AEM homepage, click the Tools icon on the left rail.
Navigate to Deployment > Packages.
In the Package Manager, scroll until you see the pre-installed Livefyre feature package, then click the package title cq-social-livefyre-pkg-1.2.6.zip to expand the options.
Click More > Uninstall.
Download Livefyre package from Software Distribution.
From the Package Manager, install the downloaded package. For instructions to use Software Distribution and packages in AEM, see How to Work with Packages.
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 and release notes on feature packs, see Feature Packs.
From the AEM homepage, click the Tools icon in the left rail, then navigate to General > Configuration Browser.
Click Create to open the Create Configuration dialog.
Name your configuration and check the Cloud Configurations checkbox.
This will create a folder under Tools > Deployment > Livefyre Configuration with the name provided.
Configure AEM to use your organization’s Livefyre license credentials, allowing communication between Livefyre and AEM.
From the AEM homepage, click the Tools icon in the left rail, then navigate to Deployment > Livefyre Configuration.
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 properties 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.
See the Configuration Browser documentation for more information.
Select the newly created Livefyre configuration card, then click Properties.
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.
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:
Using CRXDE Lite, copy /libs/social/integrations/livefyre/components/authorizablecomponent/authclientlib to /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib.
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.
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.
From the Components side panel in design mode, select Livefyre from the menu to limit the list to available Livefyre components.
Select a Livefyre component, and drag it into position on your page.
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.
You can only configure and edit a Livefyre component in Livefyre Studio. From AEM:
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:
From the AEM homepage, navigate to Assets > Files.
Click Create, then click Import UGC.
Select the assets you want to import. The assets you select are automatically counted and saved under the Selected tab.
Optional: Click the Selected tab and review your selected UGC content to import.
For rights requests, choose one of the following options for each asset:
Due to updates affecting the aggregation of content from non-business user accounts, we can no longer post comments on your behalf or automatically check for replies from the author. Click here to find out more.
If you sent a Twitter rights request, the content owner will see the rights request message on their account:
Twitter has limits on identical requests coming from the same account. When importing more than a couple assets, modify the messages individually to avoid being flagged.
Click Done in the top-right corner to finish the Rights Request workflow.
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.
For Instagram, you must track the content owner’s response and manually grant rights if given rights to the content.
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.
Ensure you have the latest Livefyre for AEM package installed on your AEM instance.
From the AEM homepage, navigate to AEM Commerce.
Create a new collection or use an existing collection.
Hover over the collection and click Collection Properties (pencil icon).
Check Sync to Livefyre.
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.
|Livefyre Apps||AEM 6.1||AEM 6.2||AEM 6.3||AEM 6.4|