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

Colaste o código de incorporação do X (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 X (Twitter) (agora X (Twitter)), e a maioria das «soluções» que se encontram online são truques precários de 2012 que deixaram de funcionar há anos.

Pesquisei exaustivamente 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 X (Twitter) que está a criar problemas. Existe uma forma muito mais simples que evita toda essa complicação.

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

Neste artigo:

Resposta rápida: Como incorporar um feed responsivo do X (Twitter)

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

Existem duas formas de tornar uma incorporação do X (Twitter) responsiva. A primeira é manual. Basta envolver o iframe do X (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 implementar e a manter. Além disso, tende a deixar de funcionar quando o X (Twitter) 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 X (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	X (Twitter) Feed Pro
É necessário programar	Sim	Nenhum
Aguenta as atualizações do X (Twitter)	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 X (Twitter). Este reaplica os estilos incorporados após o carregamento da página, pelo que o seu CSS é apagado sempre que isso acontece.

Eis a parte que confunde as pessoas. A incorporação não é, na verdade, tua. É um iframe, uma pequena janela para os servidores do X (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 X (Twitter) Feed Pro e contornar todos estes problemas.

Ao utilizar o plugin n.º 1 para o WordPress dedicado ao feed do X (Twitter), poderá criar, personalizar e incorporar conteúdos 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 X (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 X (Twitter) não consegue aceder 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)? Obtenha aqui a sua cópia do X (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 plugin X (Twitter) Feed Pro

Pode começar por descarregar aqui a sua cópia do X (Twitter) Feed Pro. Assim que tiver o ficheiro do plugin, instale-o e ative-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.

Primeiro, abra o menu «Feed do X (Twitter) » Todos os feeds» no seu painel de administração e clique no botão «Adicionar novo ».

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

• Cronologia do utilizador: Selecione uma conta do X (Twitter) e incorpore as publicações do X nessa conta
• Hashtag: Mostrar X (Twitter) com as hashtags que escolheu
• Pesquisa: Escolha um termo de pesquisa e incorpore as X publicações correspondentes
• Listas: Selecione uma lista do X (Twitter) e incorpore todas as publicações do X 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 do X (Twitter), 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 X (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 para as suas incorporações. 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 todas as publicações do X 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 X (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
• Últimas publicações X
• Widget

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

Depois de importar um modelo, o X (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 layout das X publicações que aparecem no seu site. Na verdade, 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 as X publicações num único widget. É também uma excelente opção para vídeos incorporados.

Em seguida, tem o layout «masonry» , que permite apresentar as suas publicações do X incorporadas em várias colunas.

Como resultado, pode cativar os visitantes do seu site, apresentando imensas publicações diferentes do X 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 publicações do X, 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 X (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 elementos incorporados do X (Twitter) à barra lateral ou ao rodapé do seu site

Vejamos os dois métodos abaixo.

Adicione códigos incorporados 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 X (Twitter) Feed Pro irá agora redirecioná-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 «feed do Twitter» na barra de pesquisa na parte superior e, depois, clique no bloco «Feed do X (Twitter) » 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 X (Twitter).

Adicione elementos incorporados 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, comece por abrir o menu «Feed do X (Twitter) » «Todos os feeds» a partir do seu painel de controlo.

Aqui, clica no widget 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 X (Twitter) Feed Pro irá agora redirecioná-lo para a página «Widgets» do seu site, onde poderá gerir os seus widgets existentes e adicionar novos.

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, clica no ícone de mais (+) na parte inferior e, em seguida, seleciona o widget «Feed do X (Twitter) ».

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 X (Twitter) Feed Pro, pode exibir facilmente widgets bonitos que carregam na perfeição em todos os tamanhos de ecrã – sem necessidade de mexer numa única linha de código.

Quer tornar as incorporações do X (Twitter) responsivas? Obtenha aqui o X (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.