Como criar uma página de status no blogger com base em outro feed

Muitas das minhas páginas internas seguem essa mesma lógica: utilizar o feed/RSS como uma espécie de base de dados para construir páginas criativas.

Anteriormente, eu publicava os status aqui mesmo, neste blog, usando uma tag chamada status. Depois, centralizava tudo em uma página através do código maroto que vou deixar abaixo.

Depois de um tempo, resolvi separar os status e colocá-los em outro lugar. Assim, o feed deste blog não ficava uma bagunça e eu também podia utilizar o e-mail para fazer publicações diretamente. No celular, é muito mais fácil enviar um e-mail do que entrar no painel do Blogger toda vez que quero publicar alguma coisa.

O script, em si, é muito simples:

• Lê um feed do Blogger (é preciso ter outro blog já criado) (o meu é esse aqui);
• Converte os dados do feed em elementos HTML utilizando JavaScript;
• Utiliza CSS para definir a aparência da página;
• Exibe os posts automaticamente, sem precisar cadastrá-los manualmente na página.

Em geral, se você copiar e colar o código na sua página, widget ou post, ele já deve funcionar. Basta substituir LINK_SEU_BLOG_AQUI pelo endereço do blog que contém os posts e QUANTIDADE_POSTS pela quantidade de publicações que você deseja carregar.

Novamente, no meu caso, eu utilizo um segundo blog para alimentar essa página. Mas você também pode fazer tudo dentro do mesmo blog e separar as publicações utilizando as tags.

Não vou entrar muito a fundo nessa parte porque ela depende bastante do layout e da estrutura de cada blog. A lógica, porém, é a mesma: no final do script, você pode indicar uma tag específica para filtrar os posts.

Por exemplo:

<script src="https://LINK_SEU_BLOG_AQUI/feeds/posts/default/-/status?alt=json-in-script&amp;callback=loadStatus&amp;max-results=QUANTIDADE_POSTS"></script>

Nesse caso, o feed retorna apenas as publicações que possuem a tag status.

Se você quiser utilizar outra tag, basta substituir status pelo nome dela.

O código

Basta copiar e colocar o código abaixo onde quiser, substituindo o que precisa ser substituído.

<div id="status-feeds">
  <div class="status-loading">carregando...</div>
</div>

<style>

#status-feeds {
  max-width: 700px;
  margin: 60px auto;
  padding: 20px;
}

.status-post {
  padding: 25px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.status-post .content {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cor-texto);
}

.status-post .date {
  margin-top: 12px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: var(--cor-texto-suave);
  opacity: .7;
}

.status-post a {
  color: var(--cor-link);
  text-decoration: none;
  border-bottom: 1px dotted var(--cor-texto-suave);
}

.status-post a:hover {
  color: var(--cor-link-hover);
  border-color: var(--cor-link-hover);
}

.status-post img {
  display: none;
}

.status-loading {
  padding: 30px 0;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

</style>

<script>

function loadStatus(json) {

  const container = document.getElementById("status-feeds");
  const entries = json.feed.entry;

  if (!entries) {
    container.innerHTML =
      '<div class="status-loading">Nenhum status encontrado.</div>';
    return;
  }

  container.innerHTML = "";

  entries.forEach(function(entry) {

    let content = entry.content
      ? entry.content.$t
      : entry.summary.$t;

    /* Remove quebras de linha */
    content = content.replace(/(\r\n|\n|\r)/gm, " ");

    /* Remove imagens */
    content = content.replace(/<img[^>]*>/gi, "");

    /* Data */
    const d = new Date(entry.published.$t);

    const day = String(d.getDate()).padStart(2, "0");
    const month = String(d.getMonth() + 1).padStart(2, "0");
    const year = String(d.getFullYear()).slice(-2);
    const hours = String(d.getHours()).padStart(2, "0");
    const minutes = String(d.getMinutes()).padStart(2, "0");

    const date =
      `${day}.${month}.${year} ${hours}:${minutes}`;

    /* Cria o post */
    const post = document.createElement("article");

    post.className = "status-post";

    post.innerHTML = `
      <div class="content">
        ${content}
      </div>

      <div class="date">
        ${date}
      </div>
    `;

    container.appendChild(post);

  });

}

</script>

<script src="https://LINK_SEU_BLOG_AQUI/feeds/posts/default/?alt=json-in-script&amp;callback=loadStatus&amp;max-results=QUANTIDADE_POSTS"></script>

Mudando as cores

Você deve ter reparado que, no CSS — tudo que está entre <style> e </style> — existem algumas linhas utilizando nomes como var(--cor-link).

Isso acontece porque, no meu layout, eu utilizo variáveis CSS para definir as cores. Se o seu tema não utiliza essas mesmas variáveis, basta substituí-las pelas cores que você quiser.

Por exemplo:

color: var(--cor-link-hover);  →  color: #ffd045;

Você pode fazer isso com todas as variáveis utilizadas no código.

Personalizando

Essa é apenas a estrutura básica. A parte interessante é justamente poder modificar o CSS e transformar essa lista em praticamente qualquer coisa.

Você pode alterar fontes, tamanhos, espaçamentos, bordas, cores, posicionamento e até mesmo a forma como os posts são apresentados.

A página que eu fiz, por exemplo, é um pouco diferente , mas ela utiliza a mesma ideia básica do script acima.

Então, sejam criativos. O feed funciona como uma fonte de dados e o JavaScript fica responsável por transformar esses dados em HTML.

Resultado

O resultado esperado é uma lista com os últimos posts encontrados no feed. A quantidade de posts exibidos vai depender do valor definido em QUANTIDADE_POSTS, então você pode colocar apenas 1 e isso vai retornar exatamente o último status (como eu tenho na sidebar).

carregando...

Se ficou alguma dúvida, me deixe saber nos comentários. E, se você criar alguma página utilizando essa ideia, envie o link também, quero saber o que você criou por aí.