Pesquisa personalizada

sábado, 17 de abril de 2010

Como colocar o Twitter Anywhere no Blogger





ATUALIZAÇÃO (23/03/2013): O Twitter fechou a plataforma Anywhere em 05/03/2013, pois lançou novos recursos de integração com os sites. Além disso, com a mudança das URLs no Blogger, essa funcionalidade teria que ser refeita e há muito tempo eu tinha deixado de usá-la. Infelizmente, esse recurso foi bom enquanto durou!

O Twitter lançou nesta semana uma ferramenta que já tinha sido anunciada mês passado no SXSW (feira de tecnologia), trata-se da plataforma @anywhere, um conjunto de códigos em javascript para colocar em qualquer site/blog, no sentido de integrá-lo com o Twitter.

Assim,ao navegar em outros sites/blogs, os visitantes poderão interagir normalmente como se estivesse no próprio Twitter. A plataforma @anywhere vai suportar o autolink de usuários, hovercards, botões de seguidores, caixas de tweets e opções de login/signup, conhecido como Twitter Connect (algo semelhante ao Facebook Connect).

No momento, eu coloquei a ferramenta no sentido de não precisar mais de colocar o link do usuário no Twitter num determinado post, colocando @ mais o nome de usuário, aparecerá um hovercard com as informações necessárias e um link para seguí-lo. Prático não? Mais informações e outras funcionalidades, vocês poderão verificar no Twitter Developer Documentation. Com o tempo, adicionarei mais coisas, assim que estudar mais a ferramenta.

Para registrar as suas APPs, vá no Site do Twitter Anywhere:


Clique em "Start using Now" , e em seguida preencha o formulário abaixo:


Em Application name, coloque o nome da sua aplicação, eu coloquei Crazyseawolf
Em Application Website, coloque o site/blog onde será colocado.
Em Organization, eu coloquei  Crazyseawolf
Em Callback URL, coloque o site/blog onde vai ser feita a autenticação, ou seja no próprio.
Em Application Icon, você coloca um ícone. Isso eu não fiz,deixei para depois.
Coloque as palavras de verificação, e clique em register Application.
Aparecerá outra tela onde um código javascript será fornecido para ser colocado no header de seu site/blog.
Copie e cole esse código. Pronto, o @anywhere está instalado em seu site/blog.

Mas nem tudo são flores... O Blogger não aceita scripts em seu Header, você terá que colocá-lo entre as tags <head> e </head>. O código fornecido é semelhate ao que está abaixo:

<script src="http://platform.twitter.com/anywhere.js?id=SEU-API-KEY&amp;v=1"> 

</script> 
<script type="text/javascript"> 
twttr.anywhere(function(twitter) {
twitter.hovercards();
});

</script> 

Outro problema: o template do Blogger não aceitará o código acima do jeito que está escrito, você terá que transformá-lo numa linguagem que ele entende. No link a seguir, há uma ferramenta para fazer a decodificação do seu código.
Eu poderia colocar o código parseado aqui, mas não consegui fazer isso, o editor de posts não está permitindo. Se algém souber, por favor dá um help.
Ele ficará assim para colocá-lo no código do seu template:


<head>
&lt;script src="http://platform.twitter.com/anywhere.js?id=SEU-API-KEY&amp;v=1"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
twttr.anywhere(function(twitter) {
 twitter.hovercards();
});
&lt;/script&gt;
</head>


Para ver a ferramenta em ação, é só passar o mouse em cima do link de usuário do Twitter. Por exemplo, teste em @luanfr e em @portalmeira. Divertido, não?

Como o serviço é novo, alguns bugs podem ocorrer. Caso não veja o hovercard, dê F5 para atualizar o navegador.

Fonte do artigo


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



14 comentários :

  1. Cidão, sempre que houver um & seguido de algum caracter ou palavra e depois o sinal de = , você precisa colocar um amp; depois do &

    Vou colocar um exemplo do script json:

    ?alt=json-in-script & amp; callback=

    (desconsidere os espaços)

    Se você não colocar, o seguinte erro aparece:

    The reference to entity "callback" (ou o caracter/palavra do código) must end with the ';' delimiter

    Beijokas!!

    ResponderExcluir
  2. Cidão, do jeito que foi parseado em seu post ainda não vai funcionar, porque continua faltando o amp;

    Veja neste link o código parseado corretamente:

    codigocidao.txt

    ResponderExcluir
  3. Rô Zanchetta: Obrigado pela ajuda. Colocar esses códigos sempre está sendo uma dor de cabeça, especialmente pelo fato do template não aceitar determinada formatação. Acabei de corrigir o código!
    I love you!! :)

    Jô Angel: Obrigado! Você é um amor!

    ResponderExcluir
  4. Tem uns macetezinhos mesmo na hora de parsear. Quando você manda o código para qualquer ferramenta de parse, a ferramenta coloca o amp; depois do &. O problema é que esse código, quando postado, some com o amp; de novo (troca todos os caracteres de parseamento pelo código que deve aparecer no post).

    Maaaaas... o html do Blogger vai gritar como erro, porque o que estiver entre os sinais < e > precisa estar com os caracteres do parse.

    Compliquei mais? hehe

    Beijokas... depois mando a conta.. ;)

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Ro Zanchetta: E como! Scripts me darão dor de cabeça! :)

    ResponderExcluir
  7. Cidão,

    correu tudo certo!, agora parece que o bug do código está "naturalmente corrigido" para Blogger na inscrição @anywhere.

    Abração no6!

    ResponderExcluir
  8. Venha participar do maior sorteio da Virada!

    ♥ Clique abaixo e particpe não perca a chance de começar o ano bonita!

    http://coisasbyvivi.blogspot.com/p/sorteio.html

    ResponderExcluir
  9. Oi,eu fiz tudo mas no final não apareceu o código javascript. o que eu fiz de errado?

    ResponderExcluir
  10. @Elias


    O código javascript é para ser colocado no template.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.