Botões do Facebook e Twitter

27 de setembro de 2011 william JavaScript

Com o advento das redes sociais “todos” sites tentam usa-las para promover seu conteúdo. Essa tarefa se torna ainda mais fácil através dos botões disponibilizados por essa redes. Por isso resolvi criar esse post para mostrar como e simples trabalhar com eles.

Para Facebook basta adicionar o seguinte código.



<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="www.meusite.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>

O link que será registrado pelo Facebook será o valor informa no atributo “data-href” da ultima div.

Na verdade o Facebook disponibiliza um editor para definir esse botão da forma que melhor atende-lo. A unica coisa que merece um pouco de atenção é que o código gerado referencia um arquivo em “//connect.facebook.net/en_US/all.js”. Esse código precisa ser alterado para o nosso idioma modificando “en_US” para “pt_BR”.

Alem disso caso esteja testando em um arquivo local fora de qualquer servidor http, acrescente “http:” antes do nome do arquivo pois caso contrario o mesmo será procurado na maquina local (“file://”) e não será encontrado.

Para o Twitter teremos:


<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" rel="nofollow">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Nesse exemplo a url utilizada é a da própria pagina, sendo que outra url pode ser informada no atributo “data-url” do link (tag “a”). Para mais parametros verifique a documentação oficial no site.

facebook, javascript, twitter,


Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress. Designed by elogi.