Deseja exibir seus tweets recentes no WordPress?
A integração do X/Twitter ao seu site WordPress ajuda a aumentar o envolvimento do usuário. Os visitantes do seu blog podem descobrir facilmente seus tweets, o que também pode ajudá-lo a obter novos seguidores no Twitter.
Neste artigo, mostraremos a você como exibir tweets recentes no WordPress.
Por que exibir tweets recentes em seu site WordPress?
O X/Twitter é uma das plataformas de mídia social mais populares do mercado. A exibição de tweets recentes em seu site WordPress pode melhorar sua presença on-line e seu envolvimento de várias maneiras.
Para começar, quando os usuários visitam o seu site e veem o seu feed de mídia social, eles podem ficar intrigados o suficiente para clicar na sua conta do Twitter e segui-lo, aumentando o seu alcance.
Além disso, os tweets podem servir como uma atualização em tempo real sobre o que está acontecendo em seu website ou empresa. Isso pode incentivar o envolvimento do público, pois ele pode interagir diretamente com seus tweets.
Os tweets recentes também podem funcionar como prova social em seu site WordPress. Você pode retuitar críticas positivas ou pessoas que recomendam seus produtos, ajudando a criar confiança entre assinantes ou clientes.
Com isso em mente, vamos examinar os diferentes métodos de exibição de tweets recentes em seu site WordPress. Você pode usar os links rápidos abaixo para pular para um método específico:
Método 1: Incorporar manualmente os tweets no editor de blocos do Gutenberg (sem plug-in)
O primeiro método para exibir seus tweets recentes no WordPress é incorporar manualmente seu perfil ou linha do tempo do Twitter em sua página, publicação ou widget do WordPress (para usuários de temas clássicos).
Assim como adicionar um vídeo do YouTube, o WordPress facilita a incorporação de conteúdo do Twitter, como um único tweet ou uma linha do tempo. Seu recurso oEmbed pode transformar automaticamente um URL de conteúdo em um código incorporado quando colado no editor de blocos.
Primeiro, você precisa localizar e copiar o URL do perfil do Twitter ou do tweet que deseja incorporar.
Por exemplo, o URL do perfil do Twitter do WPBeginner é https://twitter.com/wpbeginner
Enquanto isso, o URL de um único tweet tem a seguinte aparência: https://twitter.com/wpbeginner/status/1604852592827326464
Em seguida, basta seguir um dos métodos abaixo:
Exibição de tweets recentes em um post ou página do WordPress
Primeiro, faça login no painel do WordPress e abra o editor de blocos de um post ou página do WordPress.
Se quiser criar um novo post ou página, você pode fazer isso acessando Posts/Pages ” Add New.
Em seguida, basta colar o URL do perfil do Twitter que você copiou anteriormente na área “Digite / para escolher um bloco”.
Você pode ver isso destacado abaixo.
Depois de fazer isso, o bloco se transformará imediatamente em um bloco da timeline do Twitter, mostrando os Tweets recentes dessa conta específica.
Na barra lateral de configurações do bloco, você pode optar por redimensionar o bloco para dispositivos menores, a fim de torná-lo mais responsivo para visualização em dispositivos móveis.
Além disso, fique à vontade para adicionar mais blocos à página ou à publicação para incentivar os usuários a seguir sua conta do Twitter.
Uma vez feito isso, basta clicar em “Update” (Atualizar) ou “Publish” (Publicar) para que as alterações sejam efetivadas.
Esse método adiciona seus tweets recentes em uma caixa com um controle deslizante vertical. A caixa inclui os 20 tweets mais recentes e o botão “Ver mais no Twitter” no final.
Esta é a aparência de nossa linha do tempo no Twitter:
Se você usar um tema de bloco do WordPress, também poderá usar esse mesmo método para incorporar um feed do Twitter no Full Site Editor e exibir tweets recentes em um padrão ou parte de modelo.
Você pode saber mais sobre isso em nosso guia completo sobre a edição completa do site no WordPress.
Exibição de tweets recentes em uma área de widget do WordPress
Se você usa um tema clássico do WordPress e deseja exibir seus últimos tweets em uma área de widget (como uma barra lateral), basta seguir estas etapas.
Primeiro, vá para Appearance ” Widgets. Em seguida, clique no botão “+ Adicionar novo” na área do widget selecionado e selecione o widget do Twitter.
A partir daí, basta colar a conta do Twitter ou o URL da postagem no campo apropriado.
Em seguida, clique em “Incorporar”.
Em seguida, você pode atualizar seus widgets e visualizar o widget Tweets ao vivo em seu site.
Veja como a linha do tempo aparece em nossa barra lateral do WordPress:
Método 2: Exibir tweets recentes usando um plug-in de feed do Twitter (recomendado)
O segundo método para adicionar tweets recentes ao seu site WordPress é com um plug-in do Twitter. O motivo pelo qual recomendamos esse método é que ele oferece muito mais opções de personalização do que o método anterior, permitindo que você ajuste o feed ao design da sua página.
Para isso, usaremos o Smash Balloon Custom Twitter Feeds. Esse plug-in ajuda a criar belos feeds sociais de diferentes tipos. Você pode exibir tweets com base em hashtags, termos de pesquisa, menções, linhas do tempo e muito mais.
Observação: Embora exista um plug-in gratuito do Custom Twitter Fe eds, este artigo usará a versão Custom Twitter Feeds Pro. Ela vem com recursos muito mais avançados, como filtragem de linha do tempo e combinação de vários feeds do Twitter em um só.
Primeiro, você precisará instalar e ativar o plug-in do WordPress. Quando ele estiver ativo, vá para a área de administração do WordPress, navegue até Twitter Feed ” Settings e cole sua chave de licença no campo apropriado.
Depois disso, você precisa ativar a licença e clicar em “Save Changes” (Salvar alterações).
Agora, basta acessar Twitter Feed ” All Feeds.
Em seguida, clique no botão “+ Add New”.
Se esta for a primeira vez que você adiciona um feed do Twitter usando o Smash Balloon, será solicitado que você verifique seu endereço de e-mail.
Basta clicar no botão “Connect” para fazer isso e seguir as instruções na tela.
Quando terminar, você voltará à página do plug-in Custom Twitter Feeds e será solicitado a selecionar um tipo de feed.
Com o Custom Twitter Feeds, você pode optar por incorporar um feed da linha do tempo do usuário, um feed de hashtag ou um feed de pesquisa. Para fins deste exemplo, usaremos a primeira opção. Depois de fazer sua escolha, basta clicar em “Next”.
Na próxima tela, você pode digitar o identificador do Twitter que deseja incorporar ao seu site WordPress.
Depois disso, clique em “Next” novamente.
Vamos agora escolher um modelo de feed do Twitter. Há sete opções para escolher, e você sempre pode alterá-lo mais tarde se achar que ele não combina com o design da sua página.
Depois de fazer sua escolha, clique em “Next” (Avançar).
Nesse estágio, você deve chegar à interface de edição do feed do Twitter. Você verá uma visualização ao vivo no lado direito da página e um painel à esquerda no qual poderá configurar a aparência do feed.
Há duas guias: “Personalizar” e “Configurações”.
Vamos começar com a opção Personalizar. Se você escolher a opção “Feed Layout”, poderá escolher entre os layouts de feed disponíveis (como lista, alvenaria ou carrossel), definir o número de tweets a serem exibidos, ajustar a altura do feed e assim por diante.
Observação: devido às limitações da API, o Smash Balloon só pode exibir de 1 a 30 tweets no início, mas mais tweets serão acumulados com o tempo.
Depois de concluir essas configurações, basta clicar no botão “Customize” (Personalizar) na parte superior para voltar ao menu principal.
Outra coisa que você pode fazer é ativar o botão Carregar mais, que aparecerá abaixo dos tweets exibidos. Esse é um recurso útil se você tiver muitos tweets, mas não puder exibi-los todos na mesma página.
Basta clicar na opção “Load More Button” (Botão Carregar mais), seguida do botão “Enable” (Ativar). Depois disso, você pode personalizar a aparência do botão.
Se você mudar para a guia “Settings” (Configurações), poderá ver opções para adicionar mais fontes de feed, aplicar filtros de tweet e usar recursos avançados (como adicionar CSS personalizado).
Você também pode clicar no botão “Clear Feed Cache” (Limpar cache do feed) para remover o cache do feed anterior. Na próxima vez que o plug-in precisar exibir seu feed do Twitter, ele terá de recuperar os tweets mais recentes dos servidores do X/Twitter em vez de usar os dados antigos armazenados em cache.
Vamos tentar adicionar filtros aos seus tweets clicando na opção “Filtros”.
Aqui, você pode optar por incluir respostas e retweets, mostrar tweets com base em quais palavras são permitidas ou bloqueadas ou ocultar tweets específicos.
Quando estiver satisfeito com a aparência do Feed do Twitter, você poderá clicar no botão “Save” (Salvar).
Para adicionar o Feed do Twitter à sua página ou área de widget, basta clicar no botão “Incorporar” no canto superior direito.
Depois disso, aparecerá uma janela pop-up mostrando como exibir o Twitter Feed: com um shortcode, um bloco ou um widget.
Independentemente do método escolhido, a primeira coisa que você precisa fazer é copiar o shortcode, pois você precisará dele.
Em seguida, se quiser incorporar o feed do Twitter em uma página, clique no botão “+ Adicionar a uma página”.
Depois de fazer isso, você pode selecionar uma página existente em seu site do WordPress e clicar em “Add” (Adicionar).
Em seguida, você será direcionado para o editor de blocos do WordPress da página escolhida.
Clique no botão “+” adicionar bloco em qualquer lugar da página e selecione o bloco Twitter Feed.
Agora, o feed do Twitter que você criou anteriormente pode não aparecer imediatamente.
Se isso acontecer com você, basta colar o shortcode no campo “Shortcode Settings” (Configurações de shortcode) na barra lateral de configurações do bloco.
Depois disso, clique em “Apply Changes” (Aplicar alterações).
Depois disso, você pode clicar em “Update” (Atualizar) para ativar as alterações.
Esta é a aparência do feed do Twitter em nosso site de demonstração:
Se quiser exibir seu Feed do Twitter em uma área de widget, basta clicar na opção “+ Adicionar a um widget”. Em seguida, você será redirecionado para o editor de widgets.
Em seguida, basta localizar e selecionar o widget “Twitter Feed”.
Semelhante ao método anterior, basta colar o shortcode na barra lateral de configurações do bloco e clicar em “Apply Changes” (Aplicar alterações).
Em seguida, você verá o Feed do Twitter recém-criado na visualização ao vivo.
Por fim, clique em “Update” (Atualizar) para finalizar as alterações.
Em seguida, você pode visitar seu site ativo para ver a aparência do feed:
Método 3: Exibir os últimos tweets no WordPress com o Twitter Publish (sem plug-in)
O último método permite que você adicione publicações recentes do Twitter usando o recurso Twitter Publish.
O Twitter Publish permite que você crie facilmente o código de incorporação para vários tipos de conteúdo do Twitter, incluindo um tweet, um vídeo, uma linha do tempo ou um botão (como o botão Seguir ou Compartilhar).
Esse método permite que você personalize a aparência do elemento incorporado antes de adicioná-lo ao seu blog ou site do WordPress. Ele não é tão eficiente quanto o segundo método, mas vale a pena mencioná-lo porque é gratuito.
Neste tutorial, mostraremos a você como usar o Twitter Publish para incorporar uma linha do tempo. Primeiro, você precisa visitar o site do Twitter Publish e, em seguida, colar o URL do seu perfil do Twitter na caixa “What would you like to embed?
Quando isso for feito, clique no ícone de seta.
Depois disso, você será solicitado a escolher uma opção de exibição: Timeline incorporada ou X/Twitter Buttons.
Você deve escolher a opção “Embedded Timeline” (Linha do tempo incorporada), pois deseja mostrar a linha do tempo do Twitter com os tweets recentes.
Ao selecionar a opção de exibição, ele criará instantaneamente o código de incorporação para seus tweets recentes. Você pode ir em frente e clicar em “Copiar código” para incorporar o código HTML personalizado imediatamente.
Como alternativa, clique em “Definir opções de personalização” para personalizar a aparência da linha do tempo incorporada.
Aqui, você pode personalizar a altura e a largura da linha do tempo, escolher um modo claro ou escuro e ativar uma tradução de idioma para os tweets, se necessário.
Você pode ver a aparência do elemento incorporado abaixo das configurações. Quando terminar, basta clicar em “Update” (Atualizar).
O código incorporado agora incluirá as configurações de personalização que você escolheu para a linha do tempo.
Basta clicar em “Copiar código” para continuar.
Agora, volte ao painel do WordPress e abra o editor de blocos de uma página, postagem ou área de widget.
Depois disso, basta clicar no botão “+” adicionar bloco em qualquer lugar do editor e selecionar o widget ou bloco HTML personalizado.
Agora, vá em frente e cole o código de incorporação de antes no campo.
Depois disso, você pode clicar no botão “Preview” (Visualizar) para ver a aparência do feed.
Depois disso, fique à vontade para adicionar mais elementos à página, postagem ou área de widget. Em seguida, basta atualizá-la ou publicá-la.
Veja como é o nosso site de demonstração:
Dica bônus: Adicione mais feeds de mídia social ao WordPress
Você administra outras plataformas de mídia social para sua marca ou empresa? Se sim, talvez queira exibir outros feeds sociais além do Twitter em seu website.
Ao exibir diferentes feeds sociais no seu site WordPress, você pode informar aos visitantes em quais plataformas eles podem segui-lo, aumentando o número de seguidores.
A exibição de seus feeds sociais também tem uma vantagem importante sobre a exibição dos botões de ícones sociais comuns. Ela pode mostrar aos visitantes o conteúdo que eles perderiam se não o seguissem em suas redes sociais, criando um “medo de ficar de fora”.
Com o Smash Balloon, você pode exibir e personalizar todos os tipos de feeds de mídia social no seu site WordPress. Dessa forma, todos os feeds ficam bem com o tema que você está usando.
Basta conferir os tutoriais abaixo sobre como exibir diferentes feeds sociais no WordPress:
- Como criar um feed personalizado do Facebook no WordPress
- Como criar um feed de fotos personalizado do Instagram no WordPress
- Como mostrar os vídeos mais recentes do canal do YouTube no WordPress
- Como incorporar vídeos do TikTok no WordPress (métodos fáceis)
- Como exibir avaliações do Google, Facebook e Yelp no WordPress
Esperamos que este artigo tenha ajudado você a aprender como mostrar os tweets recentes no WordPress. Talvez você também queira ver nosso guia definitivo de SEO (otimização de mecanismos de busca) para WordPress ou nossa seleção especializada dos melhores plug-ins de mídia social para WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Kate says
Hi, I was following the first set of instructions, but when I paste my Twitter URL in the text box nothing happens. I don’t know if it matters that I have Divi Builder enabled on my wordpress site?
WPBeginner Support says
If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.
Administrador
Glenn says
This seems to be an older article…I’m wondering how I can show my timeline..not my tweets but the people I follow. The Twitter Widgets page only shows Search, not my timeline or a list.
Thank you.
Glenn
Minhazul Islam says
Is there any plugin to do the same task?
Greg McGee says
I have successfully created a twitter feed on my wordpress site. Yaaay!!! Now the bad news. It disappears after 3 seconds. Booo!!! Where can I change the parameter that sets this limit? It is hiding from me very well. But I’m not all that smart, either.
Gopal sharma says
This is the best tutorial i found ever..
onya icha says
on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem
Simeon Opeyemi says
Thanks. it worked for me!
gertrude says
I added this but apart from a link to my tweeter it doesn’t do anything. I have wordpress 3.8.1 and activated the default theme, then switched back to the one I am using. Still nothing. If there is any way you guys can help it would be great. Thanks
WPBeginner Support says
Trying switching off all plugins and then test, particularly if you are using any Twitter related plugin. If this does not work, then you need to break the widget code into two pieces. Paste the javascript part starting from the <script> in your theme’s header.php, and the link part in a text widget.
Administrador
K.T. Lynch says
For some reason the closing HTML tags are stripped out once I press save. This is appearing on my WP Sidebar:
Tweets de @lynchkt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
The “Tweets de @lynchkt” is a hyperlink but otherwise it’s not working.
WPBeginner Support says
This could happen for many reasons. If you are using WordPress 3.8 then try to update to 3.8.1. Try switching to a default theme temporarily and see if you still get this error.
Administrador
Ines TR says
Hello!
I just see a buncg of words in my blog page after pasting the widget , why?
I saved it and tried several times but can´t fix the problem.
Abdul says
How do I get it on a wp page?
WPBeginner Support says
you can paste the same code in WordPress pages as well as posts.
Administrador
Douglas Vautour says
Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.
Ann says
Hi!
Thank you for sharing this. My regular Twitter widgets just weren’t working!
Nancy Closson says
I am looking for a widget that allows you to select tweets from one twitter account rather than show all or recent tweets. Is this customization possible and is that what you describe with the favorites list? thanks you
WPBeginner Support says
yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.
Administrador
gaston says
very useful!!
solved it in a buzz!
thanks!
Shana Manuel says
Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.
Founterior says
It works just fine !!!
patty says
Sweet. Thanks for this!
Bill Hutchison says
Thank you for this. I have used widgets for this in the past but have been generally unsatisfied with the results. The seems to be the best solution for including Twitter in the sidebar.
Thanks again.
Joan says
I have a question:
Is it possible to personalize the twitter widget weight? With the old twitter code was possible.
Thanks
Chris Race says
Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!
Rickard says
I don’t know, but every single solution I’ve tried to use is messing with the admin panel more often than anyone can find ok.
Is there anyway to fight the “waiting for platform.twitter.com” which breaks many functions in the WP-admin-panel?
I guess this happens because of a overload on platform.twitter.com(?) and pages in the wp-admin-panel will continue loading forever…
Might there be a way to set a time limit for the call, and if not found ignore it?
Editorial Staff says
This should have no impact on your WordPress admin panel. You are adding this in the widgets which only loads in the front-end of your website.
Administrador
Julien Maury says
I cannot agree more. There is another great thing with widget, they use streams (see streaming APIs) so you can display A LOT of tweets without worrying about rate limits.
And if you want to get a special feature you’ll add data-chrome=”noheader,nofooter,noborders,transparent” in the link. These new parameters allow you to make widgets “design friendly”.
Gordon Chambers says
Hi,
I’ve been trying the above but when I click save it changes the value added in the ID box to a shortened number. I have tried to add both my twitter accounts and it does the same?
Julien Maury says
That’s weird. Check the quotes – they have to be real quotes not like in this comment section.