Destacar citações do Twitter nos posts do Blog

Muita gente publica informações relevantes diretamente no Twitter e esse tipo de conteúdo pode ser útil para ilustrar artigos em nossos blogs. As vezes é complicado citar um tweet. O mais comum é usar um print da tela ou simplesmente indicar o link da mensagem. Veja aqui como fazer citações em texto do Twitter de forma bem simples.

Para ilustrar esse modelo, nada melhor do que aplicar aqui mesmo. Veja abaixo como é o resultado final para você aplicar também em seu blog:

#AudioPost Criar conteúdo atraente para o Google ou para o público do seu blog? bit.ly/rtMkAI

— FerramentasBlog.com (@ferramentasblog) August 22, 2011

O melhor disso é que tem como fazer isso tanto no Blogger quanto no WordPress.org.

Para aplicar ao Blogger

Se você quiser destacar as citações do Twitter dessa forma em seus artigos, será preciso adicionar um trecho de CSS no código fonte do seu blog.

Se você já usa o novo painel do Blogger (http://draft.blogger.com/): Vá ao menu “Modelo” e em seguida no botão “Personalizar” logo abaixo da imagem do seu template, como ilustrado:

Vai abrir a janela de “Designer de modelo do Blogger”. Então clique na opção “Avançado” e adicione as novas linhas de CSS que indicarei, na área mostrada na imagem abaixo:

Agora basta adicionar nesse espaço o seguinte trecho, sem modificar nada:

blockquote.tweet {
background:url(https://ferramentasblog.com/wordpress/wp-content/uploads/2011/08/bird_32_gray-twitter.png) no-repeat !important;
border:none !important;
margin:20px 0 !important;
padding-left:50px !important;
font-style:italic !important;
}

Salve o modelo. Agora vem a outra etapa. Isso não fará aparecer automático os tweets no formato desejado. Quando for escrever um novo post você terá de aplicar um CLASS no “blockquote” para funcionar nos trecho desejado.

Assim você escolhe a mensagem desejada que será citada como tweet, seguindo o exemplo abaixo:

<blockquote class"tweet">Mensagem e trecho de tweet que será destacado</blockquote>

Isso você terá de fazer como faz para as citações normais de seus posts quando quer destacar algo. Agora fará assim nesse modelo para quando for destacar tweets.

Para aplicar ao WordPress.org

Já quem usa o WordPress.org conta com as facilidades de um plugin que cuida de tudo e ainda simplifica a aplicação dos tweets apenas usando os links diretos das mensagens.

Faça o download ou instale diretamente pelo painel o plugin Twitter Blockquotes oEmbed.

Feito isso, uma nova opção aparecerá dentro do menu “Configurações”, chamada justamente “Twitter Blockquotes”. Lá você encontrará um espaço para aplicar as características que achar mais convenientes para o seu modelo.

Se você quiser usar esse mesmo modelo que mostrei no topo do post, basta colocar no espaço “Custom CSS” o seguinte trecho:

blockquote.tweet {
background: url(https://si0.twimg.com/images/dev/cms/intents/bird/bird_gray/bird_32_gray.png) 0 0 no-repeat;
padding-left: 50px;
padding-right: 50px;
}

Salve as alterações para poder usar.

Agora é só, toda vez que for criar um novo post, ao querer citar um tweet, simplesmente copie e cole o link da mensagem desejada no local onde deverá aparecer a citação. Não é preciso aplicar nada mais.