• Artigo

Este artigo foi traduzido por máquina.

Cutting Edge

Programação essencial para o Facebook: O SDK do JavaScript

Dino Esposito  

Vou ser sincero: Não sei exatamente o que uma estratégia social pode parecer, e não tenho mais do que uma idéia fraca sobre os truques que os peritos sociais podem desempenhar para tornar seu conteúdo mais popular. Da mesma forma, nunca paguei muita atenção para search engine optimization (SEO) de sites da Web, mas acredito que a otimização social hoje é muito mais relevante e gratificante do SEO já era.

Nas duas partes anteriores desta coluna, expliquei como autenticar usuários de um aplicativo da Web ou Windows, usando o Facebook e como postar na rede social em nome de um usuário consentir. (Essas duas colunas podem ser encontradas em msdn.microsoft.com/magazine/jj863128 e msdn.microsoft.com/magazine/jj883950.)

Que diz respeito à Facebook, há muito mais que você pode fazer para adicionar uma camada de"social" para um site da Web. Uma camada social resulta da combinação de três ingredientes principais: identidade, Comunidade e interação. Nessas colunas anteriores, abordei a identidade e um pouco de interação. Aqui, eu estou indo para explorar as principais ferramentas que você pode aproveitar para adicionar uma camada social verdadeira no seu site existente. De acordo com o Facebook, essas ferramentas são conhecidas coletivamente como plug-ins sociais. Social plug-in é uma poderosa mistura de marcação HTML, CSS e JavaScript de código. É sua responsabilidade como desenvolvedor Web fundir esses elementos na UX.

O onipresente como botão

O objetivo principal de plug-ins sociais é criar uma ponte entre o conteúdo do site visitado por um usuário e página do Facebook do usuário. Hospedando um ou mais plug-ins sociais, o site permite aos usuários compartilhar conteúdo específico com os amigos. A maneira mais imediata para um site da Web permitir aos usuários compartilhar conteúdo via Facebook é o botão Like.

Simplesmente clicando no botão Like, um usuário pode informar amigos que ela gosta de algo em um determinado URL. Hospedagem no botão Like em uma página não podia ser mais simples; fundir o botão para a interface de usuário existente pode exigir algumas etapas extras.

Existem algumas maneiras diferentes para inserir um botão similar. A maneira mais simples e mais direta é usando um elemento iframe:

 

<iframe src="http://www.facebook.com/plugins/like.php?href=your-site"   scrolling="no" frameborder="0"   style="border:solid 1px #000; width:450px; height:80px"></iframe>

O parâmetro de seqüência de caracteres de consulta href refere-se a URL que você deseja, como. O URL deve ser expresso de forma totalmente qualificada, algo como https://www.contoso.com/cool.

Destina-se a maioria da marcação no estilo do iframe. Normalmente, você não quer o iframe para rolar ou ser enquadrado. Você também quer que ocupam uma área adequada. A marcação anterior produz a saída no Figura 1.


Figura 1: A Interface padrão do botão Like

Se a altura do iframe é muito pequena (menor que 25 pixels ou assim), você perde o painel que contém o botão para postar um comentário adicional. Se você estiver usando o botão Like dentro de uma barra de menus horizontal, então a altura é um problema crítico. Caso contrário, dando aos usuários a chance de também postar seu próprios comentário aumenta a penetração do recurso.

Existem vários parâmetros que você pode utilizar para personalizar o olhar, o sentir e a funcionalidade do botão. Figura 2 lista as opções disponíveis. Todos serão atribuídos através de um parâmetro de seqüência de consulta adicionais.

Figura 2 Personalizando a aparência, sensação e funcionalidade

Parâmetro Description
ação Indica o texto do botão e a subsequente ação a ser tomada. Pode ser como ou recomendar. O padrão é como.
esquemas de cores Estilos de botão diferente. Pode ser clara ou escura. O padrão é luz.
fonte Define a fonte desejada para o plug-in. Opções possíveis incluem Arial, Tahoma, Trebuchet MS e alguns outros.
layout Altera o layout do botão. Os valores possíveis são padrão (como na Figura 1), button_count e box_count (como na Figura 3).
localidade Indica o idioma da interface do usuário. Deve ser uma seqüência de caracteres no formato xx_XX. Observe o uso do sublinhado para separar as duas partes de um nome de cultura.
show_faces Sinalizador booleano para indicar se deseja que a imagem do usuário processado uma vez que um usuário tem gostado do conteúdo.
width Indica a largura do plug-in. A largura mínima depende também o layout utilizado.

Enquanto Figura 1 mostra o layout padrão, Figura 3 mostra os layouts de button_count e box_count.


Figura 3 formatos de Layout adicionais (botão contagem e contagem de caixa) para o botão Like

Outro parâmetro, que você deve olhar é o parâmetro ref. Ele ajuda a controlar o uso do botão Like no seu site. Dando a cada um como botão (mesmo em diferentes páginas do site) um valor ref diferentes — uma seqüência de caracteres alfanumérica simples — você pode controlar facilmente referrers no log do servidor que pode ser rastreada de volta tão específicos como botão. Em particular, para qualquer clique volta do Facebook ao seu site, você receberá uma URL de referência com dois parâmetros extras. O parâmetro de seqüência de caracteres de consulta de fb_ref é apenas sua corda ref original; o parâmetro de seqüência de caracteres de consulta de fb_source é uma seqüência de caracteres que lhe dá informações sobre o contexto a partir do Facebook, onde o clique se originou.

Localizando o botão Like

Mesmo que o botão Like pode ser considerado universal, ainda pode haver situações em que você deseja traduzir como plug-in para um determinado idioma. Conforme Figura 2, tudo que você precisa fazer é adicionar o parâmetro de localidade para a seqüência de caracteres de consulta e configurá-lo para uma seqüência de caracteres personalizada que indica o idioma desejado e cultura.

Para tornar as coisas um pouco mais complicado, você não pode expressar a cultura usando o formato canônico xx-XX, onde xx indica a língua e a cultura XX. No Microsoft .NET Framework, você pode obter essa seqüência de caracteres da seguinte expressão:

 

var name = Thread.CurrentThread.CurrentUICulture.Name;

Para essa seqüência ser usada com o Facebook, você precisará substituir o traço com um sublinhado. Observe também que o token único idioma não é suficiente em si e a configuração de localidade inteira será ignorada. Este ponto leva-me a outra consideração interessante: Qual é o comportamento padrão do botão Like, na medida em que a língua está em causa?

Facebook, bem como Twitter, padrão é o idioma que o usuário tenha escolhido como a principal língua no seu perfil. Se o usuário não está conectado no momento, a interface do usuário é baseada nas configurações de idioma detectadas no navegador.

Introdução a JavaScript SDK

Em geral, você pode configurar os plugins do Facebook em algumas maneiras diferentes: usando um simples URL de um hiperlink personalizado; usando um iframe (conforme mostrado neste artigo); usando marcação HTML5; e usando o estendido Facebook Markup Language (XFBML). HTML5 e XFBML equivalem-se em muitos aspectos; HTML5 é apenas um mais -­recente sintaxe suportada de completude. HTML5 e XFBML requerem o uso do Facebook JavaScript SDK.

Plugins sociais mais sofisticados só estão disponíveis através de marcação HTML5 e XFBML. Este é o caso para o botão enviar para enviar o conteúdo diretamente para os amigos e a caixa de comentários para Ver os comentários sobre um determinado post. Outros plug-ins como gosto, a caixa como o feed de atividade (a pequena lista de notificações de todos os amigos que você geralmente tem no canto superior direito da sua página) pode ser rapidamente configurado e incorporado através de um iframe.

Plug-ins não implementado através de iframes ou URLs diretos requerem o uso do Facebook JavaScript SDK. Como você pode imaginar, o SDK é um cliente de front-end para um número de pontos de extremidade do Facebook para executar tarefas como autenticação, postar e recuperar comentários, gosta e outras ações.

Para usar o SDK de JavaScript, mesmo antes de você baixá-lo, você deve ter um ID de aplicativo. Exaustivamente discutido este ponto nas colunas anteriores, mas em poucas palavras, para qualquer interação com o site do Facebook que vai além de operações básicas, tais como como, você precisa registrar um app e obter uma ID exclusiva. O app desempenha o papel do conector entre o cliente (por exemplo, um Web site) e back-end do Facebook. O Facebook App Dashboard para registrar um app está disponível em bit.ly/mly4xs.

O segundo passo consiste em adicionar algum código para suas páginas da Web que faz o download do SDK. A URL para invocar é: / con­nect.facebook. NET/xx_XX/ALL.js.

O xx_XX na URL é um espaço reservado para a localidade desejada. Uma opção é ligar este URL a partir de uma marca de script estáticos. Porque o tamanho do arquivo é muito mais do que 180 KB, não seria uma boa idéia para baixá-lo de forma síncrona através de uma marca de script estáticos. O arquivo fica armazenado em cache em breve e a maioria dos pedidos sucessivos de ele receberá um código de status HTTP 304 "não modificado"; no entanto, Facebook recomenda que você baixar o arquivo de forma assíncrona. Este é um padrão comum para todos os blocos de script necessários para interações sociais — por exemplo, ele funciona da mesma para Twitter plug-ins. Aqui está o código que você precisa:

<script type="text/javascript">      (function (d, s, id) {     var js, fjs = d.getElementsByTagName(s)[0];     if (d.getElementById(id)) return;     js = d.createElement(s);     js.id = id;     js.async = true;     js.src = "//connect.facebook.
net/en_US/all.js#xfbml=1&appId=xxx";     fjs.parentNode.insertBefore(js, fjs);   } (document, 'script', 'facebook-jssdk')); </script>

O código é definido como uma função de JavaScript imediata e é executado logo que é encontrado. Nota que você colocar esse código de preferência direito após a abertura do corpo tag e você deve preencher o parâmetro appId com seu ID de aplicativo. (Nota que muitos desenvolvedores defendem a colocação de scripts na parte inferior da seção do corpo a fim de evitar qualquer bloqueio de renderização da página.)

Neste ponto, você está pronto para usar tags HTML5 e XFBML integrar Facebook plug-ins em suas páginas. Vamos começar com um olhar para o botão de Login.

O botão de Login

O SDK contém um método no objeto raiz FB através do qual você programaticamente pode desencadear o processo de login. A opção mais simples consiste em Adicionar o seu próprio link ou botão e vinculando seu manipulador click para o código a seguir:

FB.login(function(response) {   if (response.authResponse) {     // Display some wait message      // ...
FB.api('/me', function(response) {       $("#username").html('Welcome, ' + response.
name + '.');     });   } });

Esse código é muito mais simples do que qualquer outro código semelhante nas duas últimas colunas. Desta forma, autenticação de usuários contra Facebook é uma brisa (ver Figura 4).


Figura 4 autenticação de usuários via JavaScript

O plug-in de logon pode facilitar o processo de login mesmo. Além de vincular o SDK, tudo que você precisa é a seguinte marcação HTML5 (ou marcação XFBML análoga, como demonstrado no site Facebook):

 

<div class="fb-login-button"   data-show-faces="true"   data-width="200"    data-max-rows="1"></div>

Dados-* atributos permitem que você configure a aparência e o comportamento do botão. O botão azul na página da Figura4 dá uma idéia da aparência padrão. Em particular, o atributo de dados-Mostrar-faces permite que você exiba as fotos dos usuários (e alguns de seus amigos que usou seu aplicativo para se conectar ao Facebook). O atributo max-linhas de dados determina o número de linhas (dada a largura do plug-in) para ser preenchido com rostos.

Deve também notar-se que se dados-Mostrar-faces estiver ativado e o usuário já está logado, então nenhum botão de logon é exibido. O usuário não pode sair do Facebook através do seu aplicativo. Se dados-Mostrar-faces, em seguida, o botão de login fica visível o tempo todo e ele não reagir se clicado.

Como um desenvolvedor Web, você deve ver a profunda diferença entre usar o JavaScript SDK ou o plug-in de Login e servidor -­código de lado e o Facebook C# SDK. Se você trabalha do lado do cliente, então essencialmente atacaste Facebook e login é provavelmente o primeiro passo necessário para fazer um trabalho mais específico. Facebook é o objetivo aqui.

O código c# é preferível se você estiver usando o Facebook como apenas uma forma de autenticação de usuários e ainda precisa lidar com o cookie de autenticação de ASP.NET e o sistema de associação padrão. Facebook é o meio aqui.

Em breve

Desde que ele não já estiver assim, autenticação através das redes sociais se tornará um recurso imprescindível para todos os sites que precisam de autenticação. Isso significa que o c# SDK provavelmente continua a ser a abordagem mais flexível. Neste sentido, as novas classes sociais em ASP.NET MVC 4 são apenas confeiteiro sobre o bolo. Em termos de desenvolvimento de Web site, da mesma forma não vejo razão para não preencher layouts de página com botões de social e plug-ins para twittar ou postar conteúdo imediato. Da próxima vez, eu vou ser volta com a programação do Facebook cobrindo mais avançado social plug-ins como comentários e caixa similar. Entretanto, para obter mais informações sobre Facebook social plug-ins, você pode dar uma olhada no bit.ly/fAU7Xe.

Dino Esposito é o autor de “Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) e “Programming ASP.NET MVC 3” (Microsoft Press, 2011) e coautor de “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2008). Residente na Itália, Esposito é um palestrante sempre presente em eventos do setor no mundo inteiro. Siga-o no Twitter em twitter.com/despos.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Christopher Bennage e Scott Densmore