Parede social 
Análise de feeds 
Ontem, o teu feed mostrava as tuas publicações normalmente. Hoje parece que algo está errado.
Talvez as colunas se tenham fundido numa só. Talvez as tuas imagens pareçam achatadas ou esticadas. Talvez o espaçamento tenha desaparecido, ou talvez tudo apareça sem estilo durante um segundo antes de se ajustar corretamente. O conteúdo continua a ser exibido. Só que não fica bem, especialmente nos dispositivos móveis.
Se te deparaste com isto, não te preocupes. Quase nunca se trata de um verdadeiro erro. É uma questão de configurações e podes resolver o problema sem mexer numa única linha de código, mesmo que não sejas programador.
Assim que souber qual é a causa que corresponde ao seu sintoma, a solução é, muitas vezes, um simples clique.
Vamos, então, associar o que estás a ver à configuração que resolve o problema. Vamos tratar das colunas, do espaçamento e da visualização em dispositivos móveis, por esta ordem, para que possas ajustar primeiro a configuração e ignorar o CSS de que provavelmente não precisas.
- Por que é que o meu feed parece estar avariado ou sem formatação? (Resposta rápida)
- Identifique a causa do seu sintoma (Comece aqui)
- Defina o número de colunas e o espaçamento
- Corrigir problemas de layout específicos dos dispositivos móveis
- Quando o seu tema está a substituir o estilo do feed
- Resolva o problema com a correção para o carregamento do tema AJAX
- Substituições seguras de CSS personalizadas que não vão danificar o seu tema
- Um feed que se adapta mesmo ao seu site
Por que é que o meu feed parece estar avariado ou sem formatação? (Resposta rápida)
O teu feed não está avariado. Quase sempre trata-se de um destes três problemas de configuração.
- O teu layout nunca foi adaptado ao espaço. O número de colunas e o espaçamento continuam nos valores predefinidos, pelo que as publicações ficam amontoadas ou encolhem.
- O seu tema está a substituir os estilos do feed. O CSS do seu tema prevalece e o feed perde o aspeto pretendido.
- Um conflito na carga do tema bloqueia os estilos durante o carregamento. É esse o sintoma de «aparecer sem estilo por um instante e, em seguida, ajustar-se corretamente».
Eis a parte tranquilizadora. Estas configurações são definidas nas próprias definições do feed, e a maioria das pessoas nunca precisa de mexer numa folha de estilo. Não é necessário saber programar.
Identifique a causa do seu sintoma (Comece aqui)
Antes de alterares alguma coisa, identifica o que vês.
Cada problema de layout tem uma causa mais provável. Identifique o sintoma correspondente e passe diretamente para a solução que realmente importa.
Eis as causas mais comuns, por ordem de prioridade para verificar.
| O que se vê | Causa mais provável | Onde ir |
|---|---|---|
| Colunas a mais ou a menos, espaçamento demasiado apertado | As definições de layout não foram ajustadas | Defina o número de colunas e o espaçamento |
| Fica bem no computador, mas não fica bem no telemóvel | A configuração da coluna «Móvel» separada não foi alterada | Corrigir problemas de layout específicos dos dispositivos móveis |
| Os estilos do feed parecem ter sido substituídos ou não estar de acordo com a identidade da marca | Conflito de especificidade do CSS do tema | Quando o seu tema está a substituir o estilo do feed |
| Apresenta-se sem estilo, mas depois encaixa no lugar certo | Carregamento do tema ou conflito de JavaScript | Resolva o problema com a correção para o carregamento do tema AJAX |
Agora, a encomenda.
Verifica primeiro as definições. São as duas primeiras linhas. As colunas do ambiente de trabalho e a apresentação no telemóvel encontram-se ambas nas definições. Depois, um conflito de temas. Em seguida, um conflito de carregamento. O CSS personalizado vem em último lugar, se for o caso.
Essa ordem não é aleatória. Vai da correção que resolve o maior número de casos até à que resolve o menor número.
Eis onde a maioria das pessoas se engana. Ao depararem-se com um feed com erros, recorrem logo ao código personalizado. Começam a escrever CSS para forçar o layout a ficar no lugar certo.
Não faças isso ainda. Na maioria dos casos, uma configuração integrada ou uma única caixa de seleção resolve exatamente o mesmo problema. Verificar nesta ordem evita que tenhas de escrever CSS desnecessário.
Então, procura o teu sintoma na tabela. Vai à secção correspondente. Resolve o problema nessa secção.
Defina o número de colunas e o espaçamento
Demasiadas colunas? Demasiado poucas? Publicações amontoadas, sem espaço para respirar?
Na maioria das vezes, o problema reside no número de colunas e no espaçamento, que se mantêm nos valores predefinidos, e é bastante fácil corrigir isso utilizando o personalizador em tempo real que vem com todos os plugins da Smash Balloon.
Defina as linhas e as colunas, veja o feed a atualizar-se numa pré-visualização em tempo real e guarde as suas alterações.
Eis como definir as colunas e o espaçamento.
- No painel de controlo do WordPress, abra o seu feed e clique em «Personalizar».
- Clique no separador «Layout ».
- Procure o controlo do número de colunas. Defina o número de colunas para computador, tablet e telemóvel. Cada tamanho de ecrã tem a sua própria configuração.
- No feed do Instagram, define o valor do «Padding» para alterar o espaço entre as publicações.
- Clique em «Guardar».
Queres uma grelha organizada com 3 colunas no ambiente de trabalho? Define o número de colunas do ambiente de trabalho para 3. É só isso.
O separador «Layout» também controla a forma das imagens. Pode definir as suas publicações com uma proporção quadrada de 1:1, vertical de 4:5 ou horizontal de 3:4. Isto é útil quando as suas imagens parecem achatadas ou esticadas, uma vez que uma proporção adequada as recorta de forma limpa.
Corrigir problemas de layout específicos dos dispositivos móveis
O teu feed pode ficar perfeito no computador. No telemóvel, pode ficar uma confusão.
Eis o motivo. A configuração das colunas na versão móvel é independente da configuração na versão para computador. Alterar as colunas na versão para computador não tem qualquer efeito na versão móvel.
Assim, um feed configurado para 4 colunas no computador tenta encaixar todas as 4 num ecrã estreito de telemóvel. Agora, cada imagem é uma faixa minúscula. Tudo parece apertado e amontoado.
A solução consiste em definir as colunas para dispositivos móveis separadamente. Aceda ao mesmo separador «Layout» que utilizou anteriormente.
- Abra o seu feed, clique em «Personalizar» e, em seguida, clique no separador «Layout ».
- Procure os controlos das colunas para tablet e telemóvel. Estão mesmo ao lado do controlo para computador.
- Defina-os para um valor inferior ao do computador de secretária e, em seguida, clique em «Guardar».
O ecrã de um telemóvel é estreito, pelo que um número menor de colunas fica quase sempre melhor. Se a versão para computador tiver 4 colunas, reduza a versão para telemóvel para 1 ou 2, e não para 4.
Essa alteração resolve na hora a maioria dos problemas de layout para dispositivos móveis.
Quando o seu tema está a substituir o estilo do feed
Às vezes, definimos as colunas. Ajustamos o espaçamento. E, mesmo assim, o resultado não corresponde ao que vemos na pré-visualização do Personalizador.
Eis o que se passa. O teu tema tem o seu próprio CSS, o código que controla a aparência dos elementos. O mesmo acontece com o teu feed. Quando ambos tentam aplicar estilos ao mesmo elemento, um tem de prevalecer.
E se o CSS do teu tema sair vencedor dessa disputa, o teu feed perde o seu aspeto.
Eis os sinais de que o teu tema é o culpado.
- A pré-visualização no Customizer parece estar correta, mas a visualização em tempo real parece estar errada.
- Os tipos de letra, as cores ou as molduras não correspondem ao que definiu.
- O problema persiste mesmo depois de ajustar as definições e guardar.
Se te identificas com isto, não te precipites a escrever código. O CSS personalizado é o último passo, não o primeiro.
Experimenta primeiro as tuas definições e, em seguida, a correção para o carregamento do tema AJAX apresentada na secção seguinte. A maioria dos conflitos de temas resolve-se logo aí. Só se ambas as opções falharem é que precisarás de CSS personalizado.
E quando precisares dele, coloca-o no sítio certo. Adiciona-o em «Aparência» » «Personalizar» » «CSS adicional», e não nos ficheiros do teu tema.
Se estiver a utilizar um tema de blocos, aceda a Aparência » Editor » Estilos, clique no menu de três pontos (⋮) e selecione CSS adicional para colar o seu código.
Isto mantém a tua correção segura, para que uma atualização do tema não a apague.
Mais adiante, vou partilhar algumas alterações seguras. Por enquanto, guarda o CSS para mais tarde. Serve para ajustes finos, depois de concluídas as correções mais simples.
Resolva o problema com a correção para o carregamento do tema AJAX
O feed aparece sem formatação durante uma fração de segundo e, em seguida, volta ao normal?
Trata-se de um conflito de carregamento de temas. E há uma opção que permite resolver o problema com um único clique. Sem código.
Eis o que se passa. Tanto o tema como o feed carregam os respetivos estilos assim que a página é aberta. Por vezes, o processo de carregamento do tema interfere. Por isso, o feed é apresentado sem formatação durante um instante, antes de os estilos serem aplicados.
Tem duas formas de lidar com isto.
A forma manual consiste em vasculhar os ficheiros de código do seu tema. Teria de localizar o código que está a causar o conflito e alterar a forma como este é carregado. Isso requer tempo, paciência e familiaridade com código, algo que a maioria das pessoas não possui.
A forma mais fácil é uma configuração integrada chamada «correção de carregamento do tema AJAX». Esta carrega o feed de forma a contornar os conflitos de transição do tema, para que os estilos sejam aplicados corretamente logo na primeira exibição. Basta marcar uma caixa de seleção.
Aqui está onde o pode encontrar.
- Abre o Feed do Instagram » Definições » Avançadas (ou Feed do Facebook » Definições » Avançadas).
- Ative a correção do carregamento do tema AJAX.
- Clique em «Guardar alterações».
Isso já esclarece a questão para a maioria das pessoas.
Também tem tamanhos de imagem estranhos ou errados? Existe uma versão mais completa desta solução.
No mesmo ecrã «Definições» » «Avançado», ative as três definições em simultâneo.
- Correção do carregamento do tema AJAX
- Incluir o JavaScript na secção «head»
- Carregamento de imagens em JavaScript
Clique em «Guardar alterações». Em seguida, limpe a cache do plugin no separador «Feeds» com a opção «Limpar todas as caches».
Isto faz com que o feed atualize as suas imagens corretamente com as novas definições.
Uma dica sobre o carregamento diferido. Se um conflito de carregamento diferido estiver a ocultar as suas imagens, a solução é fazer o contrário. Vá a Definições » Avançado e desative a opção «Carregamento de imagens via JavaScript».
Portanto, estas duas opções funcionam de forma oposta. Ativar a opção «Carregamento de imagens com JavaScript» resolve alguns problemas. Desativá-la resolve outros. Teste uma de cada vez e verifique o seu feed após cada alteração para ver qual delas o seu site necessita.
Substituições seguras de CSS personalizadas que não vão danificar o seu tema
Ainda não está certo depois de tudo isto? Agora é hora de um pouco de CSS.
Vamos começar pelas boas notícias. É raro chegar-se a este ponto. Na maioria dos casos, basta alterar uma configuração ou aplicar a correção AJAX para resolver o problema. Se está a ler isto, é a exceção, não a regra.
E estes fragmentos de código não vão entrar em conflito com o teu tema. São pequenos, específicos e seguros.
Esta é a forma manual, por isso requer um pouco mais de esforço. É preciso colar o código em vez de alterar um valor. Mas cada trecho de código abaixo realiza uma tarefa simples, e pode copiá-los diretamente.
Aqui estão quatro alternativas de baixo risco que pode experimentar.
- Reduzir o espaço entre os postes. Utilização
#sb_instagram .sbi_photo { padding: 4px; }para reduzir a distância. Diminua o número para um ajuste mais apertado e aumente-o para ter mais espaço. - Impor uma altura consistente à imagem. Utilização
#sb_instagram .sbi_photo { height: 200px; }para que todos os postes fiquem alinhados. Isto corrige as filas que parecem desordenadas ou desiguais. - Mantenha a forma da imagem consistente. Adicionar
#sb_instagram .sbi_photo { background-size: cover; }para que as fotos sejam recortadas de forma nítida, em vez de ficarem distorcidas. - Ajustar o espaçamento entre colunas nos dispositivos móveis. Coloca a tua regra de espaçamento entre
@media (max-width: 480px) { ... }para alterar apenas a visualização no telemóvel, e não no computador.
Basta abrir «Aparência» » «Personalizar» » «CSS adicional», introduzir o código CSS que pretende utilizar e testar como o seu feed funciona agora.
Se estiver a utilizar um tema de blocos, pode, em vez disso, abrir «Aparência» » «Editor» » «Estilos», clicar no menu de três pontos (⋮) e selecionar «CSS adicional».
Um último passo. Depois de guardar, limpe a cache do plugin no separador «Feeds» com a opção «Limpar todas as caches». Isto faz com que os teus novos estilos apareçam imediatamente.
É isso mesmo. Ajusta um trecho, guarda, verifica o teu feed e repete apenas se for necessário.
Perguntas mais frequentes
Por que é que o meu feed mostra um número errado de colunas no telemóvel?
A configuração das colunas para dispositivos móveis é independente da configuração para computador. Aceda a «Personalizar» » «Layout» e defina as colunas para o ponto de quebra móvel separadamente. Defina-as para 1 ou 2 no caso de um ecrã de telemóvel mais estreito.
Posso personalizar totalmente o design do meu feed com CSS?
Sim, pode fazê-lo, mas normalmente não será necessário. O editor em tempo real integrado no Smash Balloon cobre a maioria dos casos. Guarde o CSS para os ajustes finais, caso o editor em tempo real não lhe ofereça a opção de que necessita.
Por que é que o meu feed fica sem formatação durante um segundo quando a página carrega?
Esse piscar é um conflito no carregamento do tema, não um erro. Ative a correção para o carregamento do tema via AJAX em Definições » Avançado e, em seguida, clique em «Guardar alterações». Isso resolve o problema do piscar para a maioria das pessoas.
A alteração do meu tema reinicia as minhas definições de layout do feed?
Não, as definições do feed permanecem guardadas quando se muda de tema. No entanto, o CSS do novo tema pode substituir a apresentação do feed. Verifique novamente se existem conflitos de especificidade e reaplique a correção para o carregamento do tema via AJAX, se for necessário.
Preciso de ter conhecimentos de programação para resolver um problema de layout?
Não, não é preciso. Quase todas as opções de layout são botões de ativação/desativação ou controles deslizantes no personalizador do feed. Não é preciso escrever nenhum código, mesmo que não sejas um especialista em tecnologia.
Um feed que se adapta mesmo ao seu site
Um feed que parece não estar a funcionar raramente está mesmo avariado. Quase sempre trata-se apenas de uma configuração.
Primeiro, identifica a causa do teu problema. Corrige a configuração antes de alterares a folha de estilo. E, para a maioria das pessoas, a solução é um clique, não uma linha de código.
Tem à sua disposição os controlos de layout integrados para colunas e espaçamento. Tem definições específicas para dispositivos móveis, adaptadas aos ecrãs dos telemóveis. E tem a correção de carregamento do tema via AJAX para aquele flash de uma fração de segundo. O CSS personalizado também está disponível, mas apenas para aqueles raros ajustes de última hora.
Quer que as suas incorporações tenham um aspeto igualmente nítido em todas as outras partes do seu site? Estes guias explicam-lhe como fazê-lo, passo a passo:
- Adicionar uma incorporação responsiva do Instagram ao WordPress
- Inserir um vídeo do Facebook com design responsivo
- Adicionar uma incorporação responsiva do Twitter
Começa já a ajustar o layout do teu feed
Adquira o Instagram Feed Pro ou o Facebook Feed Pro e obtenha feeds que se adaptem ao seu site em qualquer ecrã.
