Integração com o Livefyre

Saiba como integrar os recursos de curadoria líderes do setor do Livefyre à sua instância AEM 6.4, permitindo que você publique conteúdo valioso gerado pelo usuário (UGC) das redes sociais para o seu site em minutos.

Introdução

Instale o pacote Livefyre para AEM

AEM 6.4 vem com o Livefyre feature package 1.2.6 pré-instalado. Este pacote inclui apenas uma integração limitada do Livefyre com a AEM Sites e deve ser desinstalado antes da instalação de um pacote atualizado. Com o pacote mais recente, você pode experimentar a integração total do Livefyre com AEM, incluindo Sites, Ativos e Comércio.

OBSERVAÇÃO

Alguns recursos do pacote AEM-LF dependem da Estrutura de componentes sociais (SCF). Se estiver usando o pacote de recursos do Livefyre como parte de um site que não seja de comunidades, você deve declarar cq.social.scf como uma dependência nos clientlibs do autor do site. Se você estiver usando o pacote de recursos LF como parte de um site de comunidades, essa dependência já deve ser declarada.

  1. Na página inicial AEM, clique no ícone Ferramentas no painel esquerdo.

  2. Navegue até Implantação > Pacotes.

  3. No Gerenciador de pacotes, role até ver o pacote de recursos do Livefyre pré-instalado e clique no título do pacote cq-social-livefyre-pkg-1.2.6.zip para expandir as opções.

  4. Clique em Mais > Desinstalar.

    livefyre-aem-uninstall-64

  5. Baixe o pacote Livefyre de Software Distribution.

  6. No Gerenciador de pacotes, instale o pacote baixado. Para obter instruções sobre como usar a Distribuição de software e pacotes no AEM, consulte Como trabalhar com pacotes.

    livefyre-aem4-6-4

    Seu pacote Livefyre-AEM agora está instalado. Antes de começar a usar os recursos de integração, é necessário configurar o AEM para usar o Livefyre.

    Para obter mais informações e notas de versão sobre pacotes de recursos, consulte Pacotes de recursos.

Configure AEM para usar o Livefyre: Criar uma pasta de configuração

  1. Na página inicial AEM, clique no ícone Ferramentas no painel esquerdo e navegue até Geral > Navegador de configuração.

  2. Clique em Criar para abrir a caixa de diálogo Criar configuração.

  3. Nomeie sua configuração e marque a caixa de seleção Configurações de nuvem.

    Isso criará uma pasta em Ferramentas > Implantação > Configuração do Livefyre com o nome fornecido.

    livefyre-aem-create-config-folder

Configure AEM para usar o Livefyre: Criar uma configuração do Livefyre

Configure AEM para usar as credenciais de licença do Livefyre de sua organização, permitindo a comunicação entre o Livefyre e a AEM.

  1. Na página inicial AEM, clique no ícone Ferramentas no painel esquerdo e navegue até Implantação > Configuração do Livefyre.

  2. Selecione a pasta de configuração na qual deseja criar uma nova configuração do Livefyre e clique em Criar.

    create-livefyre-configuration1

    OBSERVAÇÃO

    As pastas devem ter as Configurações de nuvem ativadas em suas propriedades antes que as configurações do Livefyre possam ser adicionadas a elas. As pastas de configuração são criadas e gerenciadas no Navegador de configuração.

    Não é possível criar um nome para uma configuração; ele é referenciado pelo caminho da pasta em que está. Você só pode ter uma configuração por pasta.

    Consulte a documentação do Navegador de configuração para obter mais informações.

  3. Selecione o cartão de configuração do Livefyre recém-criado e clique em Propriedades.

    create-livefyre-configuration2

  4. Insira as credenciais do Livefyre da sua organização e clique em OK.

    configure-aem2

    Para acessar essas informações, abra o estúdio Livefyre e navegue até Configurações > Configurações de integração > Credenciais.

    Sua instância de AEM agora está configurada para usar o Livefyre e você pode usar os recursos de integração.

Personalizar a integração de logon único

O Livefyre para AEM pacote inclui uma integração predefinida entre os perfis AEM Communities e o serviço SSO da Livefyre.

Quando os usuários fazem logon no seu site AEM, eles também são conectados aos componentes sociais do Livefyre. Quando um usuário desconectado tenta usar um recurso do componente Livefyre que requer autenticação (como fazer upload de uma foto), o componente Livefyre inicia a autenticação do usuário.

A integração de autenticação padrão pode não ser perfeita para todos os sites. Para melhor corresponder ao fluxo de autenticação nos modelos do site, você pode substituir o Representante de autenticação do Livefyre padrão para atender às suas necessidades. Use estas etapas:

  1. Usando o CRXDE Lite, copie /libs/social/integrations/livefyre/components/autorizablecomponent/authclientlib para /apps/social/integrations/livefyre/components/autorizablecomponent/authclientlib.

  2. Edite e salve /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib/auth.js para implementar um delegado Livefyre Auth que atenda às suas necessidades.

    Para obter mais informações sobre como personalizar um Representante de autenticação, consulte Integração de identidade.

    Para obter mais informações sobre AEM Clientlibs, consulte Usando bibliotecas do lado do cliente.

Use o Livefyre com o AEM Sites

Adicionar componentes do Livefyre a uma página

Antes de adicionar componentes do Livefyre a uma página no Sites, é necessário ativar o Livefyre para a página ao herdar uma configuração da nuvem do Livefyre de uma página principal ou ao adicionar a configuração diretamente à página. Consulte sua implementação para saber como incluir serviços em nuvem no site.

Assim que o Livefyre for ativado para a página, os container deverão ser configurados para permitir componentes do Livefyre. Consulte Configuração de componentes no Modo de design para obter instruções sobre como ativar diferentes componentes.

OBSERVAÇÃO

Os aplicativos que exigem autenticação para publicação não funcionam até que a autenticação seja configurada em Personalizar integração de logon único.

  1. No painel lateral Components no modo de design, selecione Livefyre no menu para limitar a lista aos componentes disponíveis do Livefyre.

    livefyre-add

  2. Selecione um componente do Livefyre e arraste-o para a posição na sua página.

  3. Selecione se deseja criar um novo aplicativo Livefyre ou incorporar um existente.

    Se estiver incorporando um aplicativo existente, AEM solicita que você selecione o aplicativo. Se estiver criando um novo aplicativo, o aplicativo precisará ser preenchido antes que qualquer conteúdo seja exibido. O aplicativo será criado no site e na rede do Livefyre selecionados quando a configuração da nuvem do Livefyre for ativada para a página.

    Para obter mais informações sobre como inserir componentes, consulte Editar conteúdo da página.

Edite um componente Livefyre para uma página AEM.

Você só pode configurar e editar um componente Livefyre no Livefyre Studio. De AEM:

  1. Clique no componente Livefyre para configurar.
  2. Clique no ícone Configurar (chave) para abrir a caixa de diálogo de configuração.
  3. Clique em Para editar este componente, vá para Livefyre Studio.
  4. Edite o aplicativo no Livefyre Studio.

Use o Livefyre com o AEM Assets

Solicitar direitos e importar UGC para o AEM Assets

Você pode importar conteúdo gerado pelo usuário (UGC) do Twitter e do Instagram do Livefyre Studio para o AEM Assets usando o Importador UGC. Depois de selecionar o conteúdo a ser importado, você deve solicitar direitos para o conteúdo antes que a importação possa ser concluída.

OBSERVAÇÃO

Antes de usar os Ativos para importar o UGC, você deve configurar contas de Contas sociais e Solicitações de direitos no Livefyre Studio. Consulte Configuração: Solicitações de direitos para obter mais informações.

Para importar o UGC para o AEM Assets:

  1. Na página inicial AEM, navegue até Ativos > Arquivos.

  2. Clique em Criar e, em seguida, clique em Importar UGC.

    livefyre-aem-import-ugc

  3. Localizar conteúdo:

    • No Livefyre, clique na guia Biblioteca UGC. Use os filtros e pesquise para encontrar conteúdo da Biblioteca UGC.
    • No Twitter e no Instagram, clicando na guia Twitter ou Instagram. Use a pesquisa ou os filtros para localizar conteúdo.
  4. Selecione os ativos que deseja importar. Os ativos selecionados são contados e salvos automaticamente na guia Selecionados.

  5. Opcional: Clique na guia ​Selecionado e reveja o conteúdo UGC selecionado para importação.

  6. Clique em Avançar.

    livefyre-aem-import-ugc2

  7. Para solicitações de direitos, escolha uma das seguintes opções para cada ativo:

    Para o Instagram:

    • Solicite manualmente direitos para obter uma mensagem que possa ser copiada, colada e enviada manualmente para os proprietários de conteúdo por meio do Instagram.
    • Atribua manualmente direitos de conteúdo para substituir os direitos de ativos individuais.
    OBSERVAÇÃO

    Devido a atualizações que afetam a agregação de conteúdo de contas de usuários não comerciais, não podemos mais postar comentários em seu nome ou verificar automaticamente as respostas do autor. Clique aqui para saber mais.

    livefyre-aem-import-ugc3-6-4

    Para o Twitter:

    • Mensagem Autora para enviar uma mensagem ao proprietário do conteúdo solicitando direitos ao ativo.
    • Atribua manualmente direitos de conteúdo para substituir os direitos de ativos individuais.
  8. Clique em Importar.

    Se você enviar uma solicitação de direitos do Twitter, o proprietário do conteúdo visualizará a mensagem de solicitação de direitos em sua conta:

    livefyre-aem-rights-request-twitter

    OBSERVAÇÃO

    O Twitter tem limites para solicitações idênticas provenientes da mesma conta. Ao importar mais de dois ativos, modifique as mensagens individualmente para evitar que elas sejam sinalizadas.

  9. Clique em Concluído no canto superior direito para concluir o fluxo de trabalho da Solicitação de direitos.

    Você pode ver o status de uma Solicitação de direitos pendente para um ativo no Livefyre Studio. Se o conteúdo estiver pendente de uma solicitação de direitos, o ativo não será exibido na AEM Assets até que os direitos sejam concedidos. O ativo aparece automaticamente no AEM Assets quando uma Solicitação de direitos é concedida.

    Para o Instagram, você deve rastrear a resposta do proprietário do conteúdo e conceder direitos manualmente se receber direitos sobre o conteúdo.

Use o Livefyre com AEM Commerce

Importar catálogos de produtos para o Livefyre com AEM Commerce

Os usuários do AEM Commerce podem integrar perfeitamente seu catálogo de produtos existente ao Livefyre para incentivar a participação dos usuários nos aplicativos de visualização do Livefyre.

Depois de importar o catálogo de produtos, os produtos são exibidos em tempo real na sua instância do Livefyre. Se você editar ou excluir itens em seu Catálogo de produtos de comércio AEM, as alterações serão automaticamente atualizadas no Livefrye.

  1. Verifique se você tem o Livefyre mais recente para AEM pacote instalado em sua instância AEM.

  2. Na página inicial AEM, navegue até AEM Commerce.

  3. Crie uma nova coleção ou use uma coleção existente.

  4. Passe o mouse sobre a coleção e clique em Propriedades da coleção (ícone de lápis).

  5. Marque Sincronizar com Livefyre.

  6. Preencha Prefixo de página do Livefyre para vincular esta coleção a uma página específica no AEM.

    O prefixo da página define o caminho raiz no seu ambiente onde a pesquisa por páginas de produtos começa. O Livefyre escolhe a primeira página que tem um produto correspondente associado ao mesmo. Para obter páginas diferentes para produtos diferentes, são necessárias várias coleções.

Matriz de suporte AEM para aplicativos Livefyre

Aplicativos Livefyre AEM 6.1 AEM 6.2 AEM 6.3 AEM 6.4
Carrossel X X X X
Bate-papo X X X X
Comentários X X X X
Película fotográfica X X X
LiveBlog X X X X
Mapa X X X X
Mídia X X X X
Mosaico X X X X
Pesquisa X X X
Revisões X X X
Cartão único X X X X
Storify 2 X X X
Em tendência X X X
Botão Upload X X X

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now