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: Esse é o modo padrão desse recurso. Os únicos campos a serem preenchidos são o longCaption e shortCaption. As opções do Frontmatter ficariam assim:

social:
  post: true
  
  longCaption: "Eu tinha automatizado as postagens do made by romeo, então decidi fazer o mesmo com a toca do rapoelho.\n\nCom isso, tive a oportunidade de simplificar e gostei bastante desse resultado. Acho que agora ficou bem mais simples de entender como isso funciona."
  shortCaption:

E já no RSS, esse é o resultado:

<item>
	<title>Postando nas Redes Sociais com um Blog</title>
	<link>http://localhost:1313/posts/hugo-social/</link>
	<post>true</post>
	<longCaption>
	Eu tinha automatizado as postagens do made by romeo, então decidi fazer o mesmo com a toca do rapoelho. Com isso, tive a oportunidade de simplificar e gostei bastante desse resultado. Acho que agora ficou bem mais simples de entender como isso funciona.
	</longCaption>
	<media>false</media>
	<postImage>false</postImage>
	<postAlbum>false</postAlbum>
	<postVideo>false</postVideo>
</item>

Uma única imagem: Nesse modo, é configurada uma única imagem. Os campos a serem configurados são o longCaption e shortCaption para o texto, o postImage para ativar a postagem da imagem e o image para definir a imagem a ser postada. As opções do Frontmatter ficariam assim:

social:
  post: true
  media: true
   
  postImage: true
  image: images/01-nippy-power-daemon.webp
  
  longCaption: "Mais um tijolinho que estou construindo no Nippybox: Um Gerenciador de Energia. Ainda está bem básico, mas está funcional."
  shortCaption:

E já no RSS, esse é o resultado:

<item>
	<title>Um Daemon de Energia para o Nippybox</title>
	<link>http://localhost:1313/notas/n24-bateria/</link>
	<post>true</post>
	<longCaption>
	Mais um tijolinho que estou construindo no Nippybox: Um Gerenciador de Energia. Ainda está bem básico, mas está funcional.
	</longCaption>
	<media>true</media>
	<postImage>true</postImage>
	<image>
	http://localhost:1313/notas/n24-bateria/images/01-nippy-power-daemon.webp
	</image>
	<postAlbum>false</postAlbum>
	<postVideo>false</postVideo>
</item>

Vídeo: Esse é um modo bem parecido com anterior, mas é específico para vídeos. Os campos a serem configurados são o longCaption e shortCaption para o texto, o postVideo para ativar a postagem do Vídeo e o video para definir o vídeo a ser postado. As opções do Frontmatter ficariam assim:

social:
  post: true
  media: true
    
  postVideo: true
  video: media/01-colorizer.mp4
  
  longCaption: "Havia mencionando anteriormente que eu havia refeito o nippy-colorizer. \n\nEsse foi o resultado: Ele foi refeito em Python e está muito mais rápido, e ainda aplica o tema GTK numa paleta próxima ao tema. \n\nAté tive uma ajuda do Gemini para isso, mas pretendo estudar o código e refazer o nippy-colorizer com as minhas próprias mãos."
  shortCaption:

E já no RSS, esse é o resultado:

<item>
	<title>Novo nippy-colorizer para o Openbox</title>
	<link>http://localhost:1313/notas/n21-colorizer/</link>
	<post>true</post>
	<longCaption>
	Havia mencionando anteriormente que eu havia refeito o nippy-colorizer. Esse foi o resultado: Ele foi refeito em Python e está muito mais rápido, e ainda aplica o tema GTK numa paleta próxima ao tema. Até tive uma ajuda do Gemini para isso, mas pretendo estudar o código e refazer o nippy-colorizer com as minhas próprias mãos.
	</longCaption>
	<media>true</media>
	<postImage>false</postImage>
	<postAlbum>false</postAlbum>
	<postVideo>true</postVideo>
	<video>
	http://localhost:1313/notas/n21-colorizer/media/01-colorizer.mp4
	</video>
</item>

Galeria: E por fim, o modo mais diferente dos três de mídia. Aqui, é configurada a Galeria para a postagem de mais de uma imagem, e os campos a serem configurados são o longCaption e shortCaption para o texto, o postAlbum para ativar a postagem do álbum de imagens e o albumImages para definir as imagens a serem postadas. As opções do Frontmatter ficariam assim:

social:
  post: true
  media: true
  
  postAlbum: true
  
  albumImages:
    - images/01-fastfetch-win.webp
    - images/02-fastfetch-lnx.webp
    - images/03-fastfetch-lnx.webp   
  
  longCaption: "E esses são os Sistemas Operacionais em meus Notebooks: Windows 10 e Void Linux no meu velho Inspiron 5558 e o Void Linux no meu Thinkpad L390. \n\nE realmente, configurar a Linha de Comando do Windows é um porre."
  shortCaption:

E já no RSS, esse é o resultado:

<item>
	<title>Dois Notebooks, Três Sistemas Operacionais</title>
	<link>http://localhost:1313/notas/n23-linux-win/</link>
	<post>true</post>
	<longCaption>
	E esses são os Sistemas Operacionais em meus Notebooks: Windows 10 e Void Linux no meu velho Inspiron 5558 e o Void Linux no meu Thinkpad L390. E realmente, configurar a Linha de Comando do Windows é um porre.
	</longCaption>
	<media>true</media>
	<postImage>false</postImage>
	<postAlbum/>
	<album>
	http://localhost:1313/notas/n23-linux-win/images/01-fastfetch-win.webp , http://localhost:1313/notas/n23-linux-win/images/02-fastfetch-lnx.webp , http://localhost:1313/notas/n23-linux-win/images/03-fastfetch-lnx.webp ,
	</album>
	<postVideo>false</postVideo>
</item>

Todas as Opções no Front matter

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.