Como incorporar widgets responsivos do X (Twitter) no seu site

Colaste o código de incorporação do Twitter no teu site. No computador, fica ótimo. Depois, vais ver no telemóvel.

Agora está tudo uma confusão. O feed transborda do ecrã ou fica confinado numa caixa estreita de 500px, com espaço vazio à sua volta. Então, tentas uma correção rápida com CSS. Funciona durante um dia, mas depois volta a deixar de funcionar.

Se isto lhe parece familiar, não está sozinho. É um dos problemas mais comuns com as incorporações do Twitter (agora X), e a maioria das «soluções» que se encontram online são truques precários de 2012 que deixaram de funcionar há anos.

Pesquisei nos fóruns de programadores, testei as soluções alternativas em CSS e descobri por que razão continuam a falhar. Afinal, é o próprio JavaScript do Twitter que está a dificultar-te a vida. Há uma forma muito mais simples que evita toda essa complicação.

Aqui estão, então, duas formas de tornar um feed do Twitter responsivo. Primeiro, o método manual com CSS. Depois, o método com plugin, que já é responsivo por predefinição, não requer código e não deixará de funcionar na próxima atualização do X.

Neste artigo:

• Resposta rápida: Como incorporar um feed do Twitter adaptável
  • Porque é que as alterações à largura no CSS não ficam efetivas?
• A forma mais rápida de tornar as incorporações do X (Twitter) responsivas
• Como incorporar widgets responsivos do X (Twitter) no seu site (método fácil)
  • Passo 1: Instalar o plug-in Twitter Feed Pro
  • Passo 2: Criar um novo widget
  • Passo 3: Ligar a sua conta X (Twitter)
  • Passo 4: Personalizar as suas incorporações do X (Twitter)
  • Passo 5: Adicionar códigos de incorporação do Responsive X (Twitter) ao WordPress
  • Adicione códigos de incorporação do X/Twitter à sua página web
  • Adicione embeds do X/Twitter à barra lateral ou ao rodapé do seu site

Resposta rápida: Como incorporar um feed do Twitter adaptável

Tem pouco tempo? Aqui está a resposta antes do tutorial completo.

Existem duas formas de tornar uma incorporação do Twitter responsiva. A primeira é manual. Basta envolver o iframe do Twitter num contentor e forçá-lo a width: 100%, e contornar os seus estilos embutidos com CSS e consultas de meios.

Isto funciona, mas demora muito tempo a aplicar e a manter. Além disso, tende a deixar de funcionar quando o X atualiza o seu código de incorporação.

A segunda opção é um plugin. Este apresenta o feed na própria estrutura de marcação do seu tema, pelo que é responsivo por predefinição. Sem código, sem media queries, sem conflitos de substituição.

Para quem não sabe programar, o plugin é a melhor opção. A minha escolha é o Twitter Feed Pro, que dispensa a necessidade de programação e torna as suas incorporações responsivas logo à partida.

Ambas as abordagens acabam por proporcionar-lhe um feed responsivo, mas a diferença reside no tempo que dedica e no nível de manutenção que terá de assumir.

Eis uma comparação entre os dois.

	CSS manual	Twitter Feed Pro
É necessário programar	Sim	Nenhum
Resiste a X atualizações	Não	Sim
É hora de preparar tudo	Mais de 30 minutos	Cerca de 5 minutos

Porque é que as alterações à largura no CSS não ficam efetivas?

Define a largura para 100%, guarda e atualiza a página. Nada muda. Então, o que é que continua a anular a tua configuração?

O próprio JavaScript do Twitter. Este reaplica os estilos embutidos após o carregamento da página, pelo que o CSS é apagado de cada vez.

Eis a parte que confunde as pessoas. A incorporação não é realmente tua. É um iframe, uma pequena janela para os servidores do Twitter, e não controlas o que está lá dentro.

A forma mais rápida de tornar as incorporações do X (Twitter) responsivas

Se estiver à procura da melhor opção, pode utilizar o plugin Twitter Feed Pro e contornar todos estes problemas.

Ao utilizar o plugin n.º 1 para o WordPress dedicado a feeds do Twitter, poderá criar, personalizar e incorporar conteúdo do X/Twitter com apenas alguns cliques.

Todas as suas incorporações serão automaticamente adaptáveis, pelo que ficarão bem, quer a pessoa esteja a navegar num telemóvel, num tablet ou num computador.

Ao contrário do método manual, o Twitter Feed Pro também não insere um iFrame. Ele recupera as tuas publicações e incorpora-as corretamente no teu site.

Eis como isso altera a situação:

• É adaptável por predefinição. O feed é criado a partir do código do teu tema, pelo que se adapta ao teu layout, em vez de ficar confinado a uma caixa fixa de 500px.
• Não há conflito de sobreposição. A ausência de um iframe significa que o JavaScript do Twitter não consegue aceder ao teu código para redefinir os teus estilos.
• Não existe qualquer problema relacionado com a altura. Como não há nenhum iframe cujo tamanho seja necessário estimar, o feed tem sempre apenas a altura do seu conteúdo.

Além disso, tem controlo total sobre o design das suas incorporações do X/Twitter. Pode até optar por importar um modelo pré-concebido para uma personalização rápida e fácil.

Com o editor de transmissões em direto, poderá personalizar as suas incorporações ao pormenor – sem necessidade de HTML, CSS personalizado ou qualquer tipo de código.

Além disso, está em boa companhia. Os plugins da Smash Balloon equipam mais de 1,75 milhões de sites ativos e têm uma classificação de 4,9 em 5 estrelas.

Pronto para incorporar conteúdo responsivo do X (Twitter)? Adquira aqui a sua cópia do Twitter Feed Pro.

Dito isto, vamos ver qual é a forma mais fácil de tornar os widgets do X (Twitter) responsivos com este plugin.

Como incorporar widgets responsivos do X (Twitter) no seu site (método fácil)

Se seguir as instruções passo a passo abaixo, poderá ter um feed de conteúdos incorporados otimizados para dispositivos móveis no seu site.

Vamos lá começar!

Passo 1: Instalar o plug-in Twitter Feed Pro

Pode começar por obter a sua cópia do Twitter Feed Pro aqui. Assim que tiver o ficheiro do plugin, instale-o e active-o no seu computador.

Se quiser saber mais sobre como o fazer, temos um tutorial para principiantes sobre como instalar um plug-in do WordPress.

Passo 2: Criar um novo widget

Uma vez que o plugin dispõe de um fluxo guiado em três passos, será muito fácil criar um novo widget para apresentar conteúdos incorporados responsivos.

Em primeiro lugar, abra o menu Twitter Feed " All Feeds (Todos os feeds ) no seu painel de administração e clique no botão Add New (Adicionar novo ).

Em seguida, pode escolher o tipo de widget do Twitter que gostaria de incorporar. Existem 4 opções diferentes à escolha:

• Linha de tempo do utilizador: Selecionar uma conta do Twitter e incorporar os tweets nessa conta
• Hashtag: Mostrar incorporações do Twitter com as hashtags escolhidas
• Pesquisar: Escolher um termo de pesquisa e incorporar os tweets correspondentes
• Listas: Selecionar uma lista do Twitter e incorporar todos os tweets dessa lista

Depois de selecionar o tipo de widget pretendido, clique no botão Seguinte.

Para o nosso exemplo, vamos selecionar um tipo de widget de hashtag .

Passo 3: Ligar a sua conta X (Twitter)

Assim que ligares a tua conta X, o teu widget poderá começar a apresentar conteúdos incorporados adaptáveis no teu site.

Pronto para começar? Primeiro, clique no botão Ligar na janela pop-up.

Ao fazer isso, será redirecionado do seu site para www.x.com no seu navegador. Aqui, pode conceder ao plugin acesso apenas de leitura à sua conta.

Uma vez que o Smash Balloon é totalmente seguro, o Twitter Feed Pro pode visualizar as suas informações, mas não terá permissão para efetuar quaisquer alterações com este acesso.

Para continuar, clique no botão Autorizar aplicação aqui.

Se clicar nessa opção, voltará ao seu sítio Web WordPress.

Aqui, pode selecionar a fonte das suas publicações incorporadas. Dependendo do tipo de widget, esta pode ser um nome de utilizador no X (Twitter), uma hashtag, um termo de pesquisa e muito mais.

Por enquanto, vamos introduzir a hashtag "KEEB_PD" na janela pop-up e apresentar todos os tweets com essa hashtag.

Para continuar, pode introduzir a sua fonte e, em seguida, clicar em Seguinte.

Com isto, já adicionaste uma nova fonte ao teu widget. No futuro, poderás reutilizar esta fonte com um único clique sempre que criares novos widgets do X (Twitter).

Passo 4: Personalizar as suas incorporações do X (Twitter)

O que é fantástico no Twitter Feed Pro é que o plugin torna automaticamente as incorporações responsivas e reproduz o design do seu site.

Para além disso, tem também uma coleção de modelos pré-construídos que pode importar para o seu widget:

• Predefinição
• Cartões de alvenaria
• Carrossel simples
• Cartões simples
• Carrossel de exposição
• Últimos Tweets
• Widget

Tudo o que tem de fazer é selecionar um modelo que pretenda utilizar e clicar em Seguinte.

Depois de importar um modelo, o Twitter Feed Pro abrirá o editor de feed em tempo real, onde poderá personalizar detalhadamente as suas incorporações otimizadas para dispositivos móveis.

À esquerda, tem a opção de alterar a disposição do feed, o esquema de cores, o cabeçalho, o botão "carregar mais" e muito mais.

Além disso, pode acompanhar todas as suas alterações em tempo real utilizando a pré-visualização do feed em direto à direita. Assim, a personalização é fácil de utilizar, rápida e precisa.

Para começar a criar os seus conteúdos incorporados, clique primeiro na opção «Layout do Feed », à esquerda.

Depois disso, pode escolher o esquema dos tweets que aparecem no seu sítio Web. De facto, pode escolher entre 3 layouts diferentes:

• Lista
• Alvenaria
• Carrossel

Vejamos estes esquemas em pormenor a seguir.

Se quiser que as incorporações do X (Twitter) fiquem facilmente visíveis no seu site, pode utilizar o layout de lista .

Este layout irá apresentar os tweets num único widget. É também uma excelente opção para a incorporação de vídeos.

A seguir, temos o layout de alvenaria que pode apresentar os tweets incorporados em várias colunas.

Como resultado, pode envolver os visitantes do seu sítio Web mostrando toneladas de tweets diferentes ao mesmo tempo.

Quer tornar o seu sítio Web mais interativo?

Basta selecionar o layout de carrossel e apresentar um carrossel de slides com as suas incorporações do X (Twitter).

Depois de selecionar o esquema, pode guardar as alterações clicando em Guardar.

Se quiseres conhecer mais formas de personalizar as tuas incorporações do X (Twitter), clica no botão «Personalizar ».

Em seguida, pode utilizar o editor de feed em tempo real do plugin para alterar as cores das suas incorporações.

Para o fazer, basta clicar na opção Esquema de cores , à esquerda.

Agora, pode simplesmente selecionar o esquema de cores que prefere para alterar todas as cores do seu feed de uma só vez.

Eis os esquemas de cores que pode escolher:

• Herdar do tema: Copia automaticamente as cores do seu tema WordPress
• Claro: Selecionar um fundo claro e uma cor de letra escura
• Escuro: apresenta um fundo escuro e uma luz adequada
• Personalizado: Escolha todas as cores do seu widget manualmente

Depois de selecionar o esquema de cores, clique em Guardar mais uma vez.

Agora, pode utilizar as restantes opções de personalização do plugin para personalizar o estilo da sua caixa de tweets, o cabeçalho, os botões «Carregar mais», o tamanho do feed e muito mais.

Como podem ver, este plugin facilita a personalização e a incorporação de feeds do X (Twitter) — não é necessário utilizar CSS nem HTML!

Por fim, clique em Guardar para guardar as suas alterações antes de avançar para o passo final.

Passo 5: Adicionar códigos de incorporação do Responsive X (Twitter) ao WordPress

Uma vez que este plugin torna automaticamente as suas incorporações responsivas, pode avançar e incorporar o seu widget do X (Twitter).

Com o Twitter Feed Pro, pode escolher entre duas formas diferentes de incorporar os seus widgets responsivos:

• Adicione códigos de incorporação do X/Twitter à sua página web
• Adicione embeds do X/Twitter à barra lateral ou ao rodapé do seu site

Vejamos os dois métodos abaixo.

Adicione códigos de incorporação do X/Twitter à sua página web

Está pronto para adicionar os widgets responsivos ao seu site?

Primeiro, clique no botão Incorporar no canto superior direito.

Ao clicar aí, serão apresentadas as opções de incorporação deste widget. Pode incorporá-lo numa página do WordPress, na barra lateral ou no rodapé.

Desta vez, pode clicar na opção Adicionar a uma página .

Pode agora ver uma lista de todas as páginas do WordPress no seu sítio Web.

Para continuar, basta clicar na página onde pretende adicionar o widget responsivo do X/Twitter e clicar em «Adicionar».

O Twitter Feed Pro irá agora redireccioná-lo para esta página no editor do WordPress.

Aqui, pode adicionar um novo bloco de conteúdo clicando no ícone mais (+).

Em seguida, introduza «twitter feed» na barra de pesquisa na parte superior e, depois, clique no bloco «Twitter Feed» abaixo.

Com isso, o plugin irá adicionar automaticamente o widget do X/Twitter à sua página.

Para confirmar o seu novo widget, clique no botão Atualizar na parte superior.

Como podes ver, é super fácil tornar as tuas incorporações do X/Twitter responsivas e adicioná-las ao teu site. Agora, podes abrir a página web e ver como ficam as tuas incorporações do Twitter.

Adicione embeds do X/Twitter à barra lateral ou ao rodapé do seu site

A partir do editor de transmissões em direto, também pode adicionar conteúdo do X/Twitter às áreas do seu site preparadas para widgets.

Caso o seu editor ainda não esteja aberto, abra primeiro o menu Feed do Twitter " Todos os feeds no seu painel de controlo.

Aqui, clica no widget do X/Twitter que pretendes incorporar.

E pronto, o teu widget será aberto no editor do feed em tempo real.

Tal como anteriormente, pode clicar em Incorporar para continuar.

Em seguida, voltará a ver a janela de contexto com as opções de incorporação.

Pode clicar em Adicionar a um Widget para continuar.

O Twitter Feed Pro irá agora redireccioná-lo para a página Widgets do seu site, onde pode gerir os widgets existentes e adicionar novos widgets.

Aqui, pode escolher entre a barra lateral ou o rodapé para apresentar o seu widget.

Vamos utilizar o rodapé para o nosso exemplo.

Por fim, clique no ícone de mais (+) na parte inferior e, em seguida, selecione o widget Twitter Feed .

Se clicar no botão «Atualizar» , o seu novo widget do X/Twitter ficará ativo no seu site.

Dessa forma, qualquer pessoa que visite o seu site poderá ver as suas incorporações responsivas no rodapé do site:

E aí está!

Em apenas alguns passos simples, pode criar um feed de incorporações responsivas do X (Twitter) para cativar os visitantes, aumentar as conversões e expandir o seu número de seguidores nas redes sociais.

Com a ajuda do Twitter Feed Pro, pode exibir facilmente widgets elegantes que se adaptam na perfeição a todos os tamanhos de ecrã – sem precisar de mexer numa única linha de código.

Quer tornar as incorporações do X (Twitter) responsivas? Obtenha aqui o Twitter Feed Pro para o seu site.

Para uma forma fácil de aumentar as suas vendas, pode seguir o nosso guia sobre como incorporar widgets de avaliações do Google no WordPress.

E se gostou deste artigo, não hesite em seguir-nos no X (Twitter) e no Facebook para ver mais tutoriais sobre marketing nas redes sociais.