You're viewing help content for version:

This page covers the following topics:

  • Overview
  • Using Livefyre in AEM Screens Channel
  • Integrating AEM Screens with Livefyre

Overview

Adobe Experience Manager (AEM) Screens allows you to integrate Livefyre content in your channels.

Livefyre provides powerful features that allow you to engage your audience and control the conversation, including the ability to search for, identify, and save social content relevant to your messaging. Livefyre also allows you to request the right to reuse this content, and add metadata including tags which make it easier to manage and retrieve at will.   

Example Use Case

Consider a trade fair/conference such as Adobe Summit where people from diverse backgrounds collaborate on the latest innovations, products, and services of a company.

The company that hosts the conference wants to have large displays all around to show information related to sessions, events, promotions, prizes, schedules, maps and also wants to create greater engagement by publishing how the attendees and media are reacting to various sessions on social media. For example, they could have a flowing gallery of user generated photos, tweets and more that are curated to showcase the positive reactions of real people.

Using Livefyre in AEM Screens Channel

Pre-requisites

Before you learn how to leverage Livefyre content to AEM Screens channel, please make sure you have an account to LiveFyre on the cloud.

To get additional information on how to get Studio Accounts and Livefyre access, see Creating User Accounts.

Note:

To get more information on installing Livefyre Package for AEM and configuring AEM to use Livefyre, see Integrating with Livefyre.

Integrating AEM with Livefyre

Follow the steps below to integrate Livefyre to an AEM Screens channel:

  1. Log in to Livefyre.

    screen_shot_2018-06-11at95145am
  2. Click Settings → Integration Settings and copy the Network Domain, Network Key, Site ID, and Site Key. You will need to use these values in your AEM instance.

    Note:

    If you do not see the Site ID and Site Key in your Settings tab, as shown in the figure below, you will need to create a Site ID.

    Please refer to the steps below to create Site ID.

    screen_shot_2018-06-11at104942am

    Follow the steps below to create a Site ID:

    1. Click Network from the action bar, as shown in the figure below.
    2. Click + to open the Add New Site dialog box.
    3. Enter the Name and Url and click Add to create a new Site ID.
    screen_shot_2018-06-14at103756am
  3. Log into your AEM instance and click tools (hammer icon) -> Deployment -> Packages to ensure that Livefyre is installed for your version of AEM.

    screen_shot_2018-06-14at111019am
  4. Navigate to tools (Hammer icon) → Deployment → Cloud services and click + to create a new configuration.

    Enter the Title and Name for your configuration.

    screen_shot_2018-06-14at111633am

    Additionally, you can view the available configurations.

    screen_shot_2018-06-14at111246am
  5. Enter the values from Integration Settings from Step 2 in Livefyre Network Configuration dialog box.

    screen_shot_2018-06-26at60242pm

Integrating AEM Screens with Livefyre

Follow the steps below to integrate AEM Screens with Livefyre:

Note:

Before you use Livefyre content in your channel, please create a channel named TestChannel in your AEM Screens project.

To learn how to create a project and a channel, refer to Kickstart Guide in AEM Screens.

  1. Navigate to the AEM instance and click Screens -> Channels -> TestChannel.

  2. Select the TestChannel and click Properties from the action bar.

    screen_shot_2018-06-22at123945pm
  3. Select the Cloud services  and uncheck inherited from /content/screens/testproject and choose Livefyre from the dropdown.

    Click Save & Close.

    screen_shot_2018-06-22at124147pm
  4. Select the TestChannel and click Edit from the action bar.  

    screen_shot_2018-06-22at124433pm
  5. Change Edit to Design mode.

    screen_shot_2018-06-22at124531pm
  6. Select the page and click the wrench icon and choose Livefyre in the ParSys Design (Also scroll down and ensure Screens is selected to still view screens components). This will allow Livefyre components to show up in the drag and drop list of components.

    Note:

    If the Livefyre component does not display in the component list, you need to add it to your channel. Please refer to Adding Components to a Channel for more details.

    screen_shot_2018-05-23at92330am

    Note:

    You may need to refresh the page once it is configured.

  7. Switch from Design to Edit mode and the Livefyre components are now available to drag and drop into our channel.

    screen_shot_2018-06-22at10449pm
  8. Drag and drop a LiveFyre Single Card component. You will be asked if you want to create a new app or use existing app. You may wish to choose create new app. Select the component and click the wrench icon and click edit in LiveFyre.

    screen_shot_2018-05-23at93104am
  9. Click on view content.

    screen_shot_2018-05-23at93424am
  10. Click on social search and search Twitter, Instagram, URL or YouTube for the content you want to place within your channel. In this instance, you can search for cupcakes in Instagram.

    screen_shot_2018-05-23at93650am
  11. Select the three dots and click Publish.

    screen_shot_2018-05-23at93709am
  12. Select the component you dragged into your channel.

    screen_shot_2018-05-23at93906am
  13. The cupcake image displays in your channel and click Preview to view it on your player.

    screen_shot_2018-05-23at95729am

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