Contador Twitter e Feedburner em Javascript

Depois que publiquei o Widget Feedburner + Twitter, percebi que ele tinha várias limitações quanto à personalização. Então, resolvi fazer um script que possa ser usado em qualquer widget, com suporte a uma maior personalização. Assim, saiu o novo contador de Seguidores do Twitter e Leitores do Feedburner!

Com esse novo contador, você pode colocar o número de seguidores/leitores não só em widgets, mas também no meio de textos! Por exemplo: no momento em que você está lendo esse texto, o Twitter do SemNome tem seguidores e o Feed, leitores.

Então, quer usar? Veja como:

1 - Inserindo o Script-mestre:
Esse passo precisa ser feito apenas uma vez. O código é esse:

<script type="text/javascript" src="http://semnomenet.googlecode.com/files/twitter-feedburner.js"></script>

Se você for usar mais de uma vez, você pode colocar essa linha antes de </head>. Caso contrário, você só precisa colocar antes do lugar onde você usará.

2 - Inserindo os números
A implantação do script não é nada difícil, basta chamar a função, determinando o pedido:

> Número de Seguidores do Twitter

<script type="text/javascript"> xtwitter("Nome-De-Usuario-do-Twitter") </script>

Lembrando que você deve substituir Nome-De-Usuario-do-Twitter pelo seu nome de usuário do Twitter. E ele deve ficar entre as aspas.

> Número de Leitores do FeedBurner

<script type="text/javascript"> xfeedburner("Nome-do-Seu-Feed-no-FeedBurner") </script>

E lembre-se de substituir Nome-do-Seu-Feed-no-FeedBurner pelo seu URI do Feedburner. Dentro das aspas!

Resumindo...

• A função xfeedburner(uri) imprime o número de leitores do FeedBurner;
• A função xtwitter(usuario) imprime o número de seguidores do Twitter;
• Você pode inserir isso em qualquer local do HTML, não só em widgets;
• O script-mestre só precisa ser inserido uma vez na página, antes de qualquer chamada das funções xfeedburner() ou xtwitter();
• Esse script não imprime créditos em sua página.

Termos de uso

• Você pode modificar o código-fonte do widget, mas deve dar os créditos ao SemNome.
• Você não pode divulgar esse widget como seu.

E uma espécie de “promoção”: Quem fizer skins para esse widget - e disponibilizá-las em seu blog - terá seu link publicado nesse post.

1. O 1º blog que fez um skin para esse widget foi o Gothic Darkness, e ficou bem legal. Confira!

Dúvidas, críticas ou sugestões? Poste nos comentários.

[...]
Leia o Texto Completo »

Agregadores de Links: Ganhando visitas

Já pensou em algum meio de conseguir muitas visitas rapidamente com um simples meio de divulgação? Sim. Isso é possível, graças aos Agregadores de Links.
Com os agregadores de Links, você pode conseguir alguns milhares de novas visitas em um único dia. Claro que isso só dura um dia, mas, se você souber colocar links para “prender” o novo visitante, você poderá ganhar muitos leitores.

Se interessou? Leia mais sobre os agregadores de links:

Enviar um link para um agregador de links é fácil, o difícil é saber se ele será aprovado. Para ter um link aprovado, você deve seguir as regras e criar títulos interessantes para posts interessantes. Não adianta fazer um post sobre alguma coisa inútil, sem graça ou nada interessante: ganhar um link não será tão fácil assim. Então, vamos ver os principais indexadores de links:

1. Ocioso

O Ocioso é um projeto do Sedentário que deu certo. Talvez seja o maior agregador de links do Brasil. Ter um link lá não é tão fácil, mas é compensador. Alguns casos chegam a 15.000 clicks.
Para ter um link lá, você precisa enviar também uma imagem descritiva com 140x140px.
Visite o site »

2. Uêba

O Uêba também é um bom agregador de links. Para enviar um link, não é necessário cadastro ou imagem: basta enviar e torcer para que o seu título/descrição chame a atenção dos moderadores.
Visite o site »

3. Colmeia

Em matéria de agregar links, o Colmeia também faz o seu trabalho corretamente. Para ter um link lá, você deve cadastrar o seu blog.
Você também tem que enviar uma imagem 200x200, além de uma bela descrição e um título que chame a atenção.
Visite o site »

4. Link Log

Também não fica atrás de nenhum desses. Se conseguir colocar o seu link lá, também conseguirá alguns milhares de visitas.
Também precisa de uma imagem de 100x100, além do título.
Visite o site »

5. Linkk

Para conseguir boas visitas desse site, você deve receber alguns votos para chegar à primeira página. Além disso, você deve ser cadastrado para enviar os links.
Não é necessário colocar imagens e a aprovação de links é automática.
Visite o site »

Esses são os agregadores de links que eu indico. Não significa que os outros não sejam bons, mas esses foram os que eu vi algum resultado.
E lembre-se: não adianta chamar tantos visitantes e não ter conteúdo suficiente: tenha conteúdo antes de divulgar o seu blog!

[...]
Leia o Texto Completo »

Personalizando o Widget Twitter+FeedBurner

Como eu havia prometido, hoje ensinarei a personalizar o Widget Contador de Seguidores do Twitter/Leitores de Feed. Afinal, widgets foram feitos para serem personalizados, não?!
Como nem todos sabem mexer com CSS/HTML, além de ensinar a personalizar, também darei alguns exemplos prontos. Vamos lá!

Como Personalizar o Widget Contador do Twitter/Feedburner com CSS

Se você conhece CSS, você entenderá tudo que será apresentado aqui. Se não entende (e nem quer entender), pule para os exemplos prontos.
Aí estão as explicações:

• .feedburnerc = Classe do parágrafo com o contador FeedBurner
• .twitterc = Classe do parágrafo com o contador do Twitter
• .snnum = o número de seguidores/leitores, para serem diferenciados dos sufixos
• O contador contém links. Então, para personalizar as cores e retirar o sublinhado, basta usar .feedburnerc a e .twitterc a

Personalizando adicionando tags no sufixo
Se você utilizar tags de imagens ou outros parágrafos/spans nos sufixos, o seu widget ficará mais original. Imagens também funcionam bem.

Exemplos

- Texto azul, alinhado à direita

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:16px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:right; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#0000FF;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:20px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Vermelho, alinhado à esquerda

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:14px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:left; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#FF0000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:16px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Preto, centralizado e com um texto menor embaixo (legenda)

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:18px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:center; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#000000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:22px;/* O tamanho do número, para diferenciar das palavras */
}
.min{
font-size:65%;
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores<br /><s"+"pan class='min'>Assine Também!</s"+"pan>"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores<br /><s"+"pan class='min'>Siga Também!</s"+"pan>"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

E ficamos por aqui. Se você tiver uma noção mínima de CSS, você poderá fazer um widget muito bom. E lembre-se de trocar semnome_net e semnome-net pelos seus dados.

[...]
Leia o Texto Completo »

Widget FeedBurner + Twitter

Que tal mostrar o número de seguidores do Twitter e o número de Leitores de Feed do seu blog sem ter que usar aqueles botões clássicos?
Quando se usa Wordpress (CMS), basta usar algumas funções PHP e pronto. Mas se você usa o Blogger ou o Wordpress.com, não é tão simples assim. Ou pelo menos não era: apresento a vocês mais um Widget Contador do SemNome:

Widget Contador de Seguidores do Twitter e Leitores do Feedburner

Por ser um widget de fácil instalação, não preciso falar muito dele. Bastam umas configurações e pronto! Veja:

- Widget Twitter + Feedburner
Basta usar o código:

<script type="text/javascript">
var twitter = "semnome_net"; //Substitua por seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //Substitua pelo URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Widget Twitter
Não é necessário usar os dois, se você não quiser. Então, se você quiser apenas o Twitter, basta apagar a linha do FeedBurner:

<script type="text/javascript">
var twitter = "semnome_net"; //Substitua por seu Username (nome de login) do Twitter
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Widget FeedBurner
Como no exemplo anterior, você só precisa usar o que você quiser. Então, se você quiser apenas o contador do FeedBurner, apague a linha do Twitter:

<script type="text/javascript">
var feedburner = "semnome-net"; //Substitua pelo URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

E pronto! Mais fácil que isso, impossível (ou não)
No próximo post, ensinarei a customizar esse Widget ao seu gosto. Até lá!

Termos de Uso: Não retire os créditos nem redistribua esse widget como seu.
Modificações são permitidas, desde que sejam dados os créditos ao SemNome.

Confira outros Widgets:

• Widget Top Comentaristas
• Widget Ranking BlogBlogs
• Botão Contador de Seguidores do Twitter
• Botão contador de Posts e Comentários

E você, o que achou? Deixe a sua opinião ou sugestões nos comentários.

[UPDATE] No dia 14/02/2010 foi postado um tutorial de personalização desse Widget. Confira!

[...]
Leia o Texto Completo »