Guia Completo para Instalar Notícias (Extensão) - Nova versão: Sites > #155
Instalação, passo a passo e guia prático atualizado para instalar e utilizar notícias no site dos clientes
Considerações e atualizações
👉🏻 Painel de instalação com id's preenchidos automaticamente e escolha de duas cores para utilização no CSS;
👉🏻 Edição de Layouts padrões disponíveis no menu "Layout•Notícia";
👉🏻 Todas URL's e links de notícias são relativas, com praticidade em alterar domínio do site sem precisar de ajustes;
👉🏻 É possível compilar sem necessariamente ter notícias;
A. Pré-requisitos
- O site precisa está em um domínio e com hospedagem instalada para publicação online;
- O cliente ou alguém da equipe precisa ter um usuário no Interago;
- É preciso ter o path na aba de configuração da Extensão de notícias, por exemplo: artigos, blog ou notícias. (Sem necessidade de uso de barras);
Instalação:
A Extensão pode ser instalada via Extensões > Adicionar > Notícias;
A tela de configurações é aberta para entrada dos valores básicos utilizados no Layout, os quais são (nomes preferenciais em negrito):
- 1. Cor primária: utilizada como variável no Layout var(--primary) e no css escrito no layout para uso em geral em títulos e elementos;
- 2. Cor secundária: utilizada como variável no Layout var(--secondary) e no css escrito no layout para uso em geral em links;
- 3. Bloco defaultDeclaration encontrado em Páginas > Blocos, nomes aceitos 'defaultDeclaration', 'defaultDeclarations, default Declarations';
- 4. Bloco do bootstrap em Páginas > Blocos, nomes aceitos 'Bootstrap', 'bootstrapGrid', 'bootstrapgrid', 'BOOTSTRAP GRID';
- 5. Bloco de GTMHEAD em Páginas > Blocos, nomes aceitos 'GTM-HEAD', 'gtmHead', 'GTM Head';
- 6. Bloco do CSS da navbar em Páginas > Blocos, nomes aceitos 'navbarcss', 'navbarCSS', 'NAVBAR CSS';
- 7. Bloco de CSS global do site, preferencialmente customCSS em Páginas > Blocos, nomes aceitos 'customcss', 'customCSS', 'custom CSS', 'Custom CSS';
- 8. Bloco com o html do header em Páginas > Blocos, nomes aceitos 'header', 'Header', 'HEADER';
- 9. Bloco com html do footer em Páginas > Blocos, nomes aceitos 'footer', 'Footer', 'FOOTER';
- 10. bloco destinado à JS e scripts, globalScript em Páginas > Blocos, nomes aceitos 'globalscripts', 'globalScripts', 'global scripts', 'GLOBAL SCRIPTS';
- 11. bloco destinado ao gtmBody em Páginas > Blocos, nomes aceitos 'GTM-BODY', 'gtmBody', 'GTM Body'.
É necessário colocar o caminho para as noticias, acesse Notícias > ⚙️ Config e coloque o caminho sem barra no início e sem barra no fim, por exemplo: blog;
Todos os links de notícias são relativos, utilizando o domínio do site ($articleData['siteDomain'], e a extensão de SEO com $articleData['seoOrganizationUrl'] e $articleData['seoBaseHref']) e o caminho de notícias com $articleData['configPath'].
Teste em ambiente local
🏠 O ambiente de teste está na opção Atualizar de notícia. (disponível compilar página inicial e busca sem ter notícias).
🖌 Conhecendo o Layout
Os layouts são as páginas de notícias e hoje são dividas da seguinte forma:
Home
🏠 Página Inicial: É a index de notícias e pode ser acessada como /index após o caminho de configuração, por exemplo: componentes.interago.com.br/noticias/index
Author
💡 Todo autor precisa ser um usuário cadastrado no sistema. É necessário criar uma conta para o cliente para adicioná-lo como redator. Coloque um nome legal para o redator padrão, por exemplo: "Equipe de redação do Site"
👨🏻💻 Você que é administrador pode dar acesso a seu próprio usuário ao site e se cadastrar como redator para realizar testes e escrever notícias. Lembre-se de apagar as notícias de teste;
Acesse Autores > Novo Autor > escolha o usuário do cliente ou o seu (para você aparecer precisa dar Acesso a seu usuário neste site) > Preencha os dados de forma profissional, conforme a imagem de exemplo:
Composição da URL do autor: https://www.meusite.com.br/noticias/ID_DO_AUTOR#NOME
Obs.: Usuário autor, tem total poder de adicionar algum usuário ao seu site e depois adicioná-lo como autor, basta acessar no menu "Acesso" e digitar o e-mail completo do Usuário.
Tags
💡 As tags são as categorias ou divisão das matérias. Cada matéria pode ter só 1 tag. É importante cadastrar a tag com uma imagem e nome legal, pois ela tem impacto direto no SEO. Todo site com notícias precisa ter ao menos uma tag.
Composição da URL da tag: https://www.meusite.com.br/noticias/tag/TAG
Acesse Tags > Nova Tag > Preencha os dados e escolha uma imagem, veja um exemplo de uso dos campos:
Também é possível mudar a composição da url a partir das tags. (✍🏼 Blog enterprise)
Crie uma tag como tag aninhada, selecionando uma tag pai no campo "Local da Tag". Essa organização de tags pode ser utilizada para formar caminhos personalizados para as tags e artigos.
Para habilitar as tags aninhadas na url, é preciso configurar o htaccess do site, como por exemplo:
# TAG - Rewrite rule for any URL pattern with multiple directories before "/ultimasnoticias"
RewriteCond %{REQUEST_URI} ^(.*/)?([^/]+)/ultimasnoticias$
RewriteRule ^(.*/)?([^/]+)/ultimasnoticias$ /blog/tag/$2 [L]
# NEWS - Rewrite rule for any URL pattern with multiple directories before "/noticia/{article-slug}"
RewriteCond %{REQUEST_URI} ^(.*/)?noticia/([^/]+)$
RewriteRule ^(.*/)?noticia/([^/]+)$ /blog/$2 [L]
# AMP - Rewrite rule for any URL pattern with multiple directories before "/noticia/{article-slug}"
RewriteCond %{REQUEST_URI} ^(.*/)?ampv/([^/]+)$
RewriteRule ^(.*/)?ampv/([^/]+)$ /blog/amp/$2 [L]
# AUTHOR - Rewrite rule for author pages
RewriteCond %{REQUEST_URI} ^/autor/([^/]+)/([^/]+)$
RewriteRule ^autor/([^/]+)/([^/]+)$ /blog/author/$1#$2 [L]
# BUSCA - Rewrite rule for search
RewriteCond %{REQUEST_URI} ^/busca/?$ [NC]
RewriteCond %{QUERY_STRING} ^m=([^&]*)&q=([^&]*)$ [NC]
RewriteRule ^(.*)$ /blog/assunto/q.php?m=%1&q=%2 [L]
# ANY PAGE FROM INTERAGO
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/pg/(.*)$
RewriteRule ^pg/(.*)$ /$1 [L]Visualize o layout da inicial antes de começar!
- O Layout padrão conta com cards das últimas 3 notícias na inicial e é difícil o cliente que comece com 3 notícias ou fotos boas para esse card. Caso não houver, esses cards serão automaticamente ocultados da sua página inicial.
Escrevendo uma matéria de modelo:
- 👨🏻💻 Ao escrever uma matéria de modelo, tente encontrar um termo de pesquisa assunto pertinente ao site do cliente. Evite lorem ipsun ou matéria testa... pois podem passar pela revisão e o site ser publicado com assuntos temporários. As barras abaixo do título e subtítulo sugerem um tamanho ideal para o Google
- Escreva o título até a barra abaixo ficar verde;
- ⚠️ Caso você utilize os títulos avançados, é necessário preencher ambos. O título tag irá na <title> e o social para a og:title e twitter:title;
- Escreve o subtítulo até a barra abaixo ficar verde;
- Escolha 1 tag principal;
- Escreva subtags. Aperte ENTER para ir adicionando;
- Preferencialmente, escreva subtags sem espaço e tudo minúcuslo, pode exemplo "Webdesign em Rio Preto" como webdesignemriopreto. Recomendamos usar de 2 a 5 subtags pois elas geram mais links.
- Na imagem de compartilhamento, escolha preferencialmente uma imagem quadrada. O Google recomenda 1000x1000, entretanto, imagens superiores a 300px estão ok. Veja abaixo exemplos de aplicações:
- Escreve ao menos um parágrafo;
- Para salvar a matéria é necessário ter título e subtítulos válidos, tag escolhida, imagem de compartilhamento e ao menos um elemento no corpo (texto, imagem ou vídeo do Youtube). Recomendamos sempre salvar ao escrever a matéria para garantir a integradidade do conteúdo em meio a imprevistos ou bugs.
- Publicar a matéria e testar no website. Após publicar, recarregue o editor e terá o link Veja a Matéria;
- Composição da URL inicial: https://www.meusite.com.br/noticias/INDEX
- Composição da URL da matéria: https://www.meusite.com.br/noticias/ID-URLAUTOMATICA
- Composição da URL da matéria AMP: https://www.meusite.com.br/noticias/AMP/ID-URLAUTOMATICA
- Composição da URL das buscas: https://www.meusite.com.br/noticias/Assunto/q.php
- 🌎 Aqui a matéria está online com o layout padrão;
Alterando o layout
Listas nos layouts, para sites com id maior que 155 é necessário usar objetos e métodos para formar as listas, seja de tag, artigos, autores e subtags.
Hoje temos alguns métodos prontos para pegar primeiramente os id's conforme algumas condições e ordena-los, após conseguir o retorno desses dados em array é feito uma outra busca no banco para pegar as informações de cada Id.
Segue abaixo exemplos de como é feito a chamada desses métodos:
Listar artigos:
$articleListData = $listArticles->getListArticlesIds($articleData['siteId'], 0, 0, 'publishNewsModification desc','0, 30', 0, false);
$articleListData = $listArticles->getDataArticle($articleListData);
Método getListArticlesIds($websiteId, $tagId=0, $authorId=0, $order='', $limit='', $exclude=0, $showDrafts=false); Obs.: os parâmetros que contem valor tipo 0 ou vazio entre aspas, não são obrigatórios.
Para listar os artigos em ordem de mais vistos usa-se a ordenação por publishanalyticsViews, conforme abaixo:
$articleListData = $listArticles->getListArticlesIds($articleData['siteId'], 0, 0, 'publishanalyticsViews desc','0, 30', 0, false);
Listar autores:
$authorListData = $dataAuthor->getListAuthorsIds($articleData['siteId'], 'publishAuthorName desc', 50, 0);
$authorListData = $dataAuthor->getDataAuthor($authorListData );
Método getListAuthorsIds($websiteId, $order='', $limit='', $exclude=0); Obs.: os parâmetros que contem valor tipo 0 ou vazio entre aspas, não são obrigatórios.
Listar tags:
$tagListData = $dataTag->getListTagsIds($articleData['siteId'], 'publishTagId desc', 50, 0);
$tagListData = $dataTag->getDataTag($tagListData);
Listar pai da tag (parent ✍🏼 Blog enterprise)
$parent = $dataTag->getTagParent($articleData['tagId']);
O retorno é um array:
[ 'id' => $row['publishTagId'], 'name' => $row['publishTagName'], 'img' => $row['publishTagImg'], 'url' => $row['publishTagUrl'], 'class' => $row['publishTagClass'] ]
Listar siblings (mesmo parent) e children (parentId igual à tag)
$siblings = json_encode($dataTag->getSiblings($articleData['tagId']));
$children = $dataTag->getTagChildren($articleData['tagId']);
O retorno também é um array. Exemplo abaixo de código para coletar os dados:
if(!empty($children)) { foreach($children as $k => $v) { /* "id" : "'.$row['publishTagId'].'", "name" : "'.$row['publishTagName'].'", "img" : "'.$row['publishTagImg'].'", "url" : "'.$row['publishTagUrl'].'", "class": "'.$row['publishTagClass'].'"*/ $tag .= '<br />ID:'.$v['id'].' - NAME:'.$v['name'].' - IMG:'.$v['img'].' - URL:'.$v['url'].' - CLASS:'.$v['class']; } }
Método getListTagsIds($websiteId, $order='', $limit='', $exclude=0); Obs.: os parâmetros que contem valor tipo 0 ou vazio entre aspas, não são obrigatórios.
Listar subtags:
$tagListData = $listSubTags->getListSubtags($articleData['siteId'], 0, 'qtdSubtag desc', '50', 0);
Método getListSubtags($websiteId, $article=0, $order='', $limit='', $exclude=0); Obs.: os parâmetros que contem valor tipo 0 ou vazio entre aspas, não são obrigatórios.
Contabilizar visualizações (visits2.js e visits3.js):
É necessário que contenha o elemento #newsItemContent com o data-id, assim:
<div class="container containerArticle" id="newsItemContent" data-id="'.$articleData['articleId'].'">
Objetos para usar no layout
Artigo:
$articleData = array( "articleId" => $articleId, "articleTitle" => htmlspecialchars_decode(html_entity_decode($articleTitle, ENT_QUOTES)), "articleTitleTag" => htmlspecialchars_decode(html_entity_decode($articleTitleTag, ENT_QUOTES)), "articleTitleSocial" => htmlspecialchars_decode(html_entity_decode($articleTitleSocial, ENT_QUOTES)), "articleSubtitle" => $articleSubtitle, "articleImg" => $articleImg, "articleUrl" => $articleUrl, "articleUri" => $articleUri, "articleTag" => $articleTag, "articleSubtags" => $articleSubtags, "articleAuthor" => $articleAuthor, "articleComponents" => $articleComponents, "articleVirtual" => $articleVirtual, "articleContent" => $articleContent, "articleDateDayMonthYear" => $articleDateDayMonthYear, "articleDateHourMinute" => $articleDateHourMinute, "articleDate" => $articleDate, "articleModificationDate" => $articleModificationDate, "articleModDayMonthYear" => $articleModDayMonthYear, "articleModHourMinute" => $articleModHourMinute, "articleDateISO" => $articleDateISO, "articleModificationDateISO" => $articleModificationDateISO, "views" => $views, "likes" => $likes, "dislikes" => $dislikes );
Website:
$siteData = array( "siteId" => $websiteId, "siteName" => $siteName, "siteDomain" => $siteDomain, "configPath" => $configPath, "configHead" => $configHead, "configBody" => $configBody, "seoAuthor" => $seoAuthor, "seoCoordinates" => $seoCoordinates, "seoState" => $seoState, "seoRegion" => $seoRegion, "seoBaseHref" => $seoBaseHref, "seoCountry" => $seoCountry, "seoOrganizationName" => $seoOrganizationName, "seoOrganizationUrl" => $seoOrganizationUrl, "seoOrganizationLogo" => $seoOrganizationLogo, "seoOrganizationLogoWidth" => $seoOrganizationLogoWidth, "seoOrganizationLogoHeight" => $seoOrganizationLogoHeight, "seoOrganizationPostalCode" => $seoOrganizationPostalCode, "seoOrganizationAddress" => $seoOrganizationAddress, "seoOrganizationHoursWeek" => $seoOrganizationHoursWeek, "seoOrganizationHoursWeekend" => $seoOrganizationHoursWeekend, "seoOrganizationPhone" => $seoOrganizationPhone );
Autor:
$articleData = array( "authorId" => $authorId, "authorName" => $authorName, "authorImg" => $authorImg, "authorUrl" => $authorUrl, "authorUri" => $authorUri, "authorDesc" => $authorDesc, "userId" => $userId );
Menu (assíncrono) para Blogs enterprise ✍🏼
$parentsAndChildren = $dataTag->getParentsAndChildren($articleData['siteId']);
O retorno é um JSON com os atributos da tag (id, name, img, url e parentId) e abre-se o objeto children : {} para organizar os filhos
Exemplo de código para ordernar listas de artigos por mais visualizações
//create a foreach before render html on tags to reorder the articles by views $articleContent = []; foreach($articleListData as $k => $v) { $article = json_decode($v, true); $articleContent[$article['views']] = $v; }krsort($articleContent);
Página de buscas
Para o funcionamento da página de buscas do blog é preciso ter o seguinte script no layout:
<script src="https://www.interago.com.br/App/Extensions/4/tag/articles.js" wId="'.$articleData['siteId'].'" wD="'.$articleData['siteDomain'].'" wP="'.$articleData['configPath'].'" customUrlPath="https://www.bematualizado.net/entretenimento/famosos/noticia/14264-ravi-filho-de-viih-tube-e-eliezer-recebe-alta-hospitalar-apos-mais-de-20-dias-internado" st="<?php echo $query; ?>" limit="0" m="<?php echo $method; ?>" interval="10"></script>
Todos os atributos exceto customUrlPath são obrigatórios para funcionar. Os valores obrigatórios são trazidos por padrão no layout.
- wId - Website id
- wD - Domínio do site no padrão: www.seusite.com.br
- wP - configPath
- st - Termo pesquisado
- limit - Limite de artigos trazidos, 0 para sem limites
- m - tipo de busca, m deve ser subtag para subtags ou search para termos pesquisados
- interval - quantos artigos devem ser trazidos por vez
- customUrlPath - caminho completo com tags aninhadas https://www.seusite.com.br/tagpai/tagfilho/artigo/1111-artigo-de-exemplo