- Remover o mal necessário que foi aplicado no álbum-content, após liberar o extend no servidor - referencia omniture js
Share
Dividido em seis partes(Variação de layout/Variação de layout por breakpoint/Variação de dados compartilhados/Metatags/Como atualizar objeto de compartilhamento via config/Definir total de caracteres por paramêtro) Obs: 1º Componente comment-counter e readspeaker foi usado apenas em alguns exemplo pois a TCL tem um limite de uso simultâneo das tools $.extends() e $.clone() 2º Todo componente que for rederizado dentro do share deve ter sua configuração definida na raiz do objeto default, tendo como referência o seu slug e o mesmo slug deve ser adiciona no objeto order na posição em que deve ser exibido
Variações de layout
Large Vertical
Medium Vertical
Small Vertical
Large Vertical em coluna com itens do mais inferior
Large Vertical em coluna com itens do mais superior
Large Vertical alinhado à direita
Large Vertical alinhado à direita em coluna com itens do mais inferior
Large Vertical alinhado à direita em coluna com itens do mais superior
Link: ícones na versão large horizontal com opção de fechar
Link: ícones na versão large horizontal sem opção de fechar
Large Vertical com modal
Large Horizontal com modal
Variações de layout por breakpoint
Podemos ter qualquer variação em qualquer breakpoint Apenas precisamos criar um objeto com o nome do breakpoint na raiz do config, em caso de criar qualquer variação entre breakpoints seja de dados/ordem ou modo de visualização é obrigatório no mesmo objeto definir o "order" e o "mode", opcional é apenas o dado de compartilhamento por breakpoint
Todo o dado usado em compartilhamento segue um objeto pré-definido no script.js
Compartilhamento default
Todo o dado de compartilhamento é armazenado na variável general na raiz do config seguindo os padrões do objeto Por padrão o componente monta o dado baseado no objeto interaction, porém pode ser sobreescrito
Todo o dado de compartilhamento específico deve ser definido em um objeto na raiz do default O objeto deve conter a key com o respectivo nome da rede social e dentro os dados que devem ser reconfigurados Obs: Neste caso o rede específica sobreescreve apenas o default("general")
É possível configurar um comparilhamento para cada rede social em cada breakpoint Para isso basta criar um objeto na raiz do config infomando o breakpoint(xs, sm, md ou lg) e dentro dele um objeto com a key com o respectivo nome da rede social e dentro os dados que devem ser reconfigurados Obs: Neste caso a(s) rede(s) social(is) sobreescrevem o dado default e o dado específico
Configura as metatags das redes sociais: "facebook", "twitter", "pinterest". - Depende do componente "metatags" (printa as metatags com os dados definidos pelo Share) - Disponibiliza os dados em javascript: var Share
As regras de prioridade são:
1) Dados definidos na matéria/álbum/enquete... - configuração no módulo "Redes Sociais" na editoria (Mônaco)
2) Dados especificos da Rede Social - Caso exista dados específicos definimos a configuração baseada nos dados do data.content, e atualizamos a rede específica com o dado específico passados a ela
3) Dados definidos no var interaction do share - Definimos a configuração baseada nos dados do data.content, do componente que fez o require do share
Liberado o uso de qualquer variável do objeto "content" do componente pai Exemplo: Ao ser chamado por um "article", o componente "Redes Sociais" pode utilizar as variáveis da matéria... {{{title}}}, {{text}}, {{{description}}}...
Qualquer alteração nesta lógica deve ser validada com a equipe de Interação
Objeto Completo
Espera um objeto com os dados
$Share = {
## Dados que serão compartilhados, tuitados, ...
"defaults" : {
"title" : "Meu título que será compartilhado, tuitado...",
"description" : "Minha descrição que será compartilhada, tuitada...",
"image" : {
"src" : "http://conteudo.imguol.com.br/c/interacao/facebook/uol-mulher-600px.jpg"
}
},
## Dados específicos:
"facebook" : {},
"twitter" : {},
"pinterest" : {},
"gplus" : {},
"viber" : {},
"mail" : {}
})
Simulando uma matéria que não populou as configurações de "Redes Sociais" dentro do Mônaco. Os dados de "Redes Sociais" serão definidos pelo "config" do canal ou pelo "default" do componente.
Dados vindos do Mônaco (vazios)
$content = {
"title" : "Participante Ronaldo vence o BBB novamente",
"description" : "Com 700 milhões de votos, o participante Ronaldo venceu mais uma edição do BBB...",
"third-part" : {
"interaction" : {
"defaults" : {
"title" : "",
"description" : ""
}
}
}
})
Dados definidos no "config"
$config = {
"share" : {
"interaction" : {
"defaults" : {
"title": "BBB16 - {{{title}}} - UOL Entretenimento",
"description": "{{{description}}}..."
}
}
}
})
Resultado:
<meta property="og:title" content="BBB16 - Participante Ronaldo vence o BBB novamente - UOL Entretenimento">
<meta property="og:description" content="Com 700 milhões de votos, o participante Ronaldo venceu mais uma edição do BBB...">
<meta name="twitter:title" content="BBB16 - Participante Ronaldo vence o BBB novamente - UOL Entretenimento">
<meta name="twitter:description" content="Com 700 milhões de votos, o participante Ronaldo venceu mais uma edição do BBB...">
Como atualizar objeto de compartilhamento via config
Podemos atualizar o objeto de compartilhamento de todas as redes sociais via config, um caso de uso que temos seria o BOL. Deve seguir a estrutura que o objeto espera, é possível configurar diferentes ferramentas de compartilhamento por breakpoints. Um exemplo atualmente é o e-mail. Qualquer dado pode ser alterado ou pode se criar novos dados, basta adiciona-lo no local desejado, todo conteúdo novo configurado via config precisa ter seus deparas atualizados caso necessário na função replace dentro de apiupdate, usada para aplicar os dados gerais em todas as redes sociais. IMPORTANTE: O componente album-content precisar ter os mesmo dados definidos para o share via config, seguindo a estrutura do share esperada por ele, pelo menos até ser encontrada uma solução para o limite simultaneo das tools $.extend() e $.clone()
Config
$Config = {
"components": {
"share" : {
"config" : {
"defaultapis" : {
"facebook" : {
"sharing" : {
## Ferramenta usada no compartilhamento default
"defaults" : {
"host" : "URL DO SERVIÇO UTILIZADO",
## Parametros que serão usados no compartilhamento, por
## default a key é o nome do parametro e o valor é um boleano false
"params" : {
"parametro 1" : false,
"parametro 2" : false,
"parametro 3" : false
}
},
## Ferramenta usada no compartilhamento para breakpoint especifico(md)
"md" : {
"host" : "URL DO SERVIÇO UTILIZADO",
## Parametros que serão usados no compartilhamento, por
## default a key é o nome do parametro e o valor é um boleano false
"params" : {
"parametro 1" : false,
"parametro 2" : false,
"parametro 3" : false
}
}
},
## Altera as dimensões da janela
"newwindow" : "width=300,height=200"
}
}
}
}
}
})
Definir total de caracteres por paramêtro
Podemos definir o número total de caracteres dos paramêtros de cada rede social, sempre que estourar o limite concatena "..." no final da string Definido na controller do componente Funciona de forma dinâmica no js porém para montar as meta tags precisa aplicar o tratamento em cada caso
$data = {
"config": {
"characters-limit" : {
"twitter" : {
## Define que no paramêtro do "text" do twitter o total é de 100 caracteres
"text" : 100
},
"facebook" : {
## Define que no paramêtro do "name" do facebook o total é de 50 caracteres
"name" : 50
}
}
}
})