Postando nas Redes Sociais com um Blog

󰃭 |  #automacao #blog #hugo |  #artigos

Lá no começo de Abril, comentei como eu havia automatizado as postagens nas Redes Sociais do madebyromeo a partir do meu Blog de Desenhos que fiz no Hugo.

E sendo assim, acabei adicionando esse recurso nesse blog, e decidi documentar como eu fiz isso. E para esse Blog, eu fiz algo bem mais simples, embora que a maior parte das coisas sejam iguais a automatização do madebyromeo.

Configurando as Postagens

Aqui vem a primeira mudança. Para a Toca, há quatro tipos de postagens e cada uma com as suas configurações.

  • Apenas Texto;
  • Uma única imagem;
  • Vídeo;
  • Galeria.

E esse aqui, são todas as opções para as postagens no RSS das Redes Sociais.

social:
  post: true

  longCaption: " "
  shortCaption: " "
  
  postImage: false
  image: 
  
  postVideo: true
  video: 
  
  postAlbum: true
  albumImages:
    - 
    - 
    -

E indo para cada uma dessas opções:

  • post: Essa é a opção que define se o conteúdo deve ser postado ou não. O valor padrão é false.
  • longCaption: Aqui é o campo onde se coloca legendas mais longas para as Redes Sociais que permitem isso, como o Telegram e o Facebook.
  • shortCaption: Esse é o campo onde se coloca as legendas mais curtas para as Redes Sociais que tem uma restrição de Caracteres, como o Twitter/X e o Bluesky.
  • postImage: Essa é a opção que define se será postada alguma imagem junto com o post. O valor padrão é false.
  • image: Aqui é onde se define a imagem que será postada. Apenas isso.
  • postVideo: Essa é a opção que define se será postado algum vídeo junto com o post. O valor padrão é false.
  • video: Aqui é onde se define o vídeo que será postado.
  • postAlbum: Essa é a opção que define se será postada múltiplas imagens em um post.
  • albumImages: Aqui é onde se define a lista das imagens a serem postadas.

Criando o Feed Personalizado

Assim como o Feed Social do madebyromeo, esse aqui começa da mesma forma: Com o cabeçalho que define que tipo de arquivo XML é esse e a seleção das páginas…

{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="https://www.rssboard.org/media-rss">
  <channel>
{{ range (where (where .Site.RegularPages "Section" "ne" "slides") ".Params.skip" "ne" "true") }}

Começando pelos itens de <title> e <link>. Esses são os itens que guardam, respectivamente, o Título e o Link da postagem.

<item>
	{{ $post := .Permalink }}
	<title>{{ .Title }}</title>
	<link>{{ .Permalink }}</link>
	<post>{{ if .Params.Social.Post }}{{.Params.Social.Post}}{{else}}false{{end}}</post>

Colocando as Mídias nos Posts

Com isso, vem o <media>. Essa é uma opção que seria a principal para definir qual tipo de mídia o post teria.

	<media>{{ if .Params.Social.Media }}{{.Params.Social.Media}}{{else}}false{{end}}</media>

E depois dela, vem as opções para mídia.

Colocando Vídeos na Postagem

A opção para postar vídeo é novidade, não tendo na automatização do madebyromeo. Aqui, pega o valor da variável .Params.Social.postVideo…

<postVideo>{{ if .Params.Social.postVideo }}{{.Params.Social.postVideo}}{{else}}false{{end}}</postVideo>

… e, se for verdadeira, obtém o link para o vídeo que está no Blog, aceitando tanto arquivos que está na pasta da própria postagens, como os que estão na pasta de arquivos estáticos (/static).

{{ if .Params.Social.postVideo | default false }}	
	<video>
		{{ if (not (strings.HasPrefix .Params.social.Video "/")) }}
			{{.Permalink}}{{.Params.social.Video}}
		{{ else }}
			{{.Params.social.Video | absURL }}
		{{ end }}
	</video>/
{{ end }}

Imagens nos Posts

Depois vem a parte que obtém a imagem para o post. A primeira parte é igual a do vídeo…

<postImage>{{ if .Params.Social.postImage }}{{.Params.Social.postImage}}{{else}}false{{end}}</postImage>

… e se for verdadeira, obtém o link para a imagem que será usada no post das Redes Sociais. Mas a diferença é que, para a imagem tem duas alternativas: A que está no .Params.Social.Image e no .Params.Image.

{{ if .Params.Social.postImage | default false }}	
	{{ if .Params.Social.Image }}
		<image>
			{{ if (not (strings.HasPrefix .Params.social.image "/")) }}
				{{.Permalink}}{{.Params.social.image}}
			{{ else }}
				{{.Params.social.image | absURL }}
			{{ end }}
		</image>
	{{ else if .Params.image }}
		<image>
			{{ if (not (strings.HasPrefix .Params.image "/"))}}
				{{.Permalink}}{{.Params.image}}
			{{ else }}
				{{ .Params.image | absURL }}
			{{ end }}
		</image>
	{{ end }}
{{ end }}

Posts com Várias Imagens? Sim!

Por fim, uma coisa que tinha no madebyromeo e que coloquei aqui: A possibilidade de colocar várias imagens em um post. Começando, pelo campo que define se esse recurso será ativado ou não…

<postAlbum>{{ if .Params.Social.postAlbum }}{{.Params.Social.postImage}}{{else}}false{{end}}</postAlbum>

… e assim como nos anteriores, se for verdadeiro, será obtido os links de cada uma das imagens que estão listadas no .Params.Social.albumImages.

{{ if .Params.Social.postAlbum | default false }}	
	{{ if .Params.Social.albumImages }}
		<album>
			{{ range .Params.Social.albumImages }}
			{{ if (not (strings.HasPrefix . "/")) }}
				{{$post}}{{ . }} ,
			{{ else }}
				{{ . | absURL }} , 
			{{ end }}
		{{end}} 
		</album>
	{{ end }}
{{ end }}

E com isso, se encerram todas as mídias.

Colocando as Legendas nos Posts e Finalizando

Por fim, a Legenda dos posts. A Automatização da Toca do Rapoelho usa aqueles dois modelos de legenda: Um mais longo e um mais curto.

Tudo começa com o mais longo. O mais longo é entregue por dois campos: Tanto pelo .Params.Social.longCaption quanto pelo .Params.Summary. Ou seja, se o campo da Legenda Longa não estiver preenchida, será usado o resumo do post.

E esse é um campo que é obrigatoriamente preenchido.

{{ if ( .Params.social.post | default false) }}
	<longCaption>{{ if .Params.Social.longCaption }}
		{{ printf "<![CDATA[" | safeHTML }}{{ .Params.Social.longCaption | safeHTML }}{{ printf "]]>" | safeHTML }}
	{{ else if .Params.Summary }}
		{{ printf "<![CDATA[" | safeHTML }}{{ .Params.Summary | safeHTML }}{{ printf "]]>" | safeHTML }}
	{{ end }}</longCaption>
	{{ if .Params.Social.shortCaption }}
		<shortCaption>{{ printf "<![CDATA[" | safeHTML }}{{ .Params.Social.shortCaption | safeHTML }}{{ printf "]]>" | safeHTML }}</shortCaption>
	{{ end }}			
{{ end }}

Já o campo da Legenda Curta, não é obrigatório, então ele pega apenas de um único lugar: .Params.Social.shortCaption. Esse campo só fica disponível se ele estiver preenchido nas propriedades do post. E assim, finaliza o RSS das Redes Sociais.

		</item>
	{{ end }}
  </channel>
</rss>

Concluindo…

Depois, é a hora de automatizar tudo em algum site de automação como o Make.com. E ao contrário do made by romeo, esse ficou bem simples, e acho que pode se encaixar em diversos fluxos.

E quanto às Redes Sociais, acho que poderei fazer posts separados sobre algumas delas. Talvez, isso possa até ser uma série aqui na Toca.

Eu simplesmente adoro essas automatizações. Principalmente, quando eu mesmo faço elas. É tão gratificante. E provavelmente irei colocar esse recurso no meu tema, o cookieHugo, como um diferencial dele.