Crie um widget personalizado do Twitter sem um plug-in

Me perguntaram algumas vezes sobre qual plug-in do WordPress eu uso para gerar a lista “Twitter Feed” no rodapé do meu site. Na verdade, eu não uso um plug-in, é um trecho de Javascript do Twitter que exibe uma lista dos meus tweets recentes que estilizei com CSS. Neste tutorial, mostrarei a você:


  • O código HTML e Javascript necessário para obter os tweets mais recentes
  • Uma visão geral da marcação HTML e seletores CSS associados
  • Dois exemplos de widgets personalizados do Twitter que eu já usei

Continue lendo para ver o restante do tutorial…

O HTML e Javascript

O Twitter costumava fornecer esse código em seu site, mas por alguma razão eles o removeram em favor desses widgets muito menos flexíveis. Você precisará de dois pedaços de código.

Primeiro, coloque o seguinte código onde deseja que a lista seja exibida:

  • Carregamento de feed do Twitter

Nota: o

  • Carregamento de feed do Twitter
  • não faz parte do código original fornecido pelo Twitter, mas é necessário validar o HTML. Também pode fornecer uma mensagem útil enquanto o feed está sendo carregado, pois pode demorar alguns segundos em um dia lento.

    Segundo, você precisará colocar as seguintes linhas de Javascript o mais próximo possível da etiqueta.

    Atualmente, eu o tenho logo acima do meu código do Google Analytics. Você deve manter essas linhas de Javascript o mais baixas possível na página, porque, no caso de o Twitter não carregar, tudo abaixo desse código será interrompido (o que não é muito importante se já estiver na parte inferior).

    Visão geral da marcação HTML e seletores CSS

    Agora você não pode ver a marcação HTML gerada pelo widget do Twitter sem usar algo como a Barra de Ferramentas do Desenvolvedor da Web. Sorte sua, eu fiz isso por você. Aqui está uma lista de exemplos com apenas um tweet como exemplo.

    • #twitter_update_list – seleciona a lista inteira
    • #twitter_update_list li – Selecione itens de lista individuais
    • #twitter_update_list li span – Seleciona a parte “tweet” do item da lista, e não o tempo atrás
    • #twitter_update_list li span a – Seleciona o link na parte “tweet” do item de lista
    • #twitter_update_list a [style ="tamanho da fonte: 85%;"] – Seleciona o link “time ago”, de uma maneira um tanto hacky (veja a nota abaixo).

    Nota: Como existe um estilo embutido no link do tempo atrás, que define o tamanho da fonte em 85%, torna-se um pouco difícil substituí-lo sem um pedaço de código hacky. Eu usei isso antes para redefinir o tamanho da fonte para o mesmo que o resto da lista:

    #twitter_update_list a [style ="tamanho da fonte: 85%;"] {font-size: 1em! important; }

    Provavelmente isso não funciona nas versões anteriores do IE por causa da parte “! Importante”. Você também pode usar display: block; para mover esse link para a próxima linha.

    Exemplo ao vivo

    Para um exemplo ao vivo, confira o rodapé de Theme Lab. Ou, se você estiver lendo isso no seu leitor de feeds ou em um site não autorizado, veja a captura de tela abaixo.

    Laboratório de Temas Twitter Feed

    Aqui está o código que eu uso para a lista:

    #twitter_update_list {
    tamanho da fonte: 13px;
    altura da linha: 21 px;
    estilo de lista: nenhum;
    }
    #twitter_update_list li {
    background: url (‘images / twitter-divider.gif’) canto inferior esquerdo repeat-x;
    fundo de preenchimento: 7px;
    margem inferior: 9 px;
    }
    #twitter_update_list span, #twitter_update_list span um {
    cor: #ababab;
    decoração de texto: nenhuma;
    }
    #twitter_update_list a {
    cor: # 6f7276;
    }

    • A primeira linha seleciona a lista inteira. Ele define o tamanho da fonte, a altura da linha e garante que nenhum marcador seja exibido.
    • A segunda linha faz com que uma pequena imagem 2 × 1 se repita abaixo de cada item da lista como uma espécie de divisor. O preenchimento define o espaço entre o tweet e a borda superior do divisor. A margem define o espaço entre a borda inferior do divisor e o próximo tweet.
    • A terceira linha define a cor do tweet, incluindo links, e garante que nenhuma linha seja exibida abaixo dos links.
    • A última linha define a cor do link “time ago”.

    E é isso! Se eu tivesse que mudar uma coisa, diferenciaria os links do tweet de alguma forma e talvez adicionasse efeitos de foco nos links também.

    Isso pode ser usado em qualquer site

    Ao contrário de todos os outros como fazer XYZ sem um plugin posts por aí, não há código WordPress real usado neste tutorial.

    Como ele não usa código WordPress, ele não é arquivado sob o Tutoriais do WordPress coleção. Ele pode ser usado em praticamente qualquer tipo de site, desde que você possa editar a fonte HTML e CSS.

    Se você quiser usá-lo no WordPress, sugiro editar manualmente seus arquivos de tema para inserir as duas linhas de Javascript no rodapé do seu site ou até conectá-lo ao seu gancho wp_footer ().

    Quanto ao próprio widget, você pode colar o código dentro de um widget de texto ou codificá-lo manualmente na barra lateral (ou em qualquer outro lugar).

    Conclusão

    Espero que todos tenham gostado do tutorial, adoraria ouvir seus pensamentos nos comentários. Se você tiver algum pedido de dicas rápidas sobre WordPress ou CSS, não hesite em me avisar. Pode ser apresentado em um post futuro da Tutorial Tuesday no Theme Lab!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map