Este artigo foi traduzido por máquina.

Cutting Edge

Programação essencial para o Facebook: widgets e linha do tempo

Dino Esposito

Depois de cobrir alguns aspectos básicos de programação do Facebook nas colunas anteriores, agora falarei sobre ferramentas e técnicas para exibir e recuperar o conteúdo de uma parede do Facebook a fim de compartilhá-lo através de outros meios e catálogo-lo para outra coisa, como análise de business intelligence (BI).

Nem todas as empresas tem o mesmo nível de interesse no mundo das comunidades sociais como Facebook. Uma lição que aprendi, no entanto, é que todas as empresas, periodicamente, um departamento interno — geralmente de marketing — acaba com um forte interesse em aproximar-se de clientes e, talvez mais importante, em ter clientes chegar mais perto para a empresa. Uma página de fãs do Facebook é uma das ferramentas para atrair contatos e o número de gostos e o nível de atividade na página podem medir o sucesso da iniciativa.

Onde enquadra programação? Para manter uma página no Facebook, vivo e chutando e estimular a atividade do usuário que aumenta o número de "pessoas falando sobre isso", você precisa postar conteúdo interessante — e com freqüência. Às vezes a empresa pode pagar uma equipe de pessoas apenas pesquisando e criação de conteúdo para a página de Facebook. Às vezes, em vez disso, bom conteúdo para a página de Facebook vem direto do fluxo regular dos negócios da empresa. Nesse caso, seria um pouco problemático para os funcionários fazendo seus trabalhos regulares de reservar um tempo extra para relatar uma página no Facebook que eles estão fazendo. Imagine, por exemplo, que notícia é postada para o site. O fluxo de trabalho interno pode acarretar a preparação do texto, ficando aprovado, publicando-o no sistema interno e esperando para o sistema de gerenciamento de conteúdo para torná-lo ao vivo no site. Se a mesma notícia deve ser publicada para o Facebook, também, na maioria das vezes a mesma pessoa abre a página do Facebook como um administrador e só envia conteúdo manualmente. Muitas vezes funciona assim hoje, mas não é uma abordagem que as escalas. Isso é apenas onde se programação Facebook encaixa.

Além da postagem

Em recentes parcelas desta coluna, abordei o tema principal da postagem uma parede Facebook e noções básicas de construção de um site da Web e uma aplicação desktop que podem interagir com a conta do Facebook do usuário (você pode ver todas as minhas colunas no bit.ly/hBNZA0). Para um cenário empresarial onde a parede do destino é a página de fãs da empresa, a abordagem não é realmente diferente. Tudo o que muda é a conta que recebe mensagens.

Assim, o primeiro passo para a programação do Facebook definitivamente é encontrar uma maneira de postar conteúdo específico nas paredes de uma forma automatizada sob o controle de seu software.

Ao longo do tempo, o conteúdo compartilhado para a página de fãs da empresa, que normalmente inclui comunicações de marketing, torna-se um recurso útil para a empresa. Torna-se informações valiosas que a empresa pode recuperar e ainda compartilhar ou analisar. E este é outro grande ajuste para a programação do Facebook.

O Like Box Widget

Uma maneira rápida e simples para adicionar algum conteúdo do Facebook para o seu site é através do widget como caixa. O widget lista posts recentes feitas em uma página no Facebook, bem como uma lista opcional de usuários que gostam da página. Para interessados em usar o conteúdo publicado no Facebook de sites da Web, este é o primeiro passo para realizar. É importante notar que o Facebook como caixa social plug-in é destinado apenas para ser usado com páginas de fãs no Facebook e não vai funcionar se você conectá-lo a uma conta pessoal do Facebook.

Observe também que o Facebook diferencia entre páginas de fãs e páginas de perfil. A linha inferior é que as páginas de fãs são para as empresas, Considerando que as páginas de perfil são para as pessoas. Existem algumas diferenças entre os dois, que diz respeito as ações permitidas são. Acima de tudo, uma equipe de pessoas pode ter direitos de administrador em uma página de fã. Além disso, posts de uma página de fã podem ser direcionados especificamente a por idioma e local para que eles atinjam seguidores (bem, fãs, na verdade) que melhor podem recebê-los. Páginas de fãs no suportam a recursos adicionais e podem ser promovidas através de anúncios e patrocinado artigos.

Por outro lado, páginas de perfil destinam-se a deixar os proprietários manter contato com amigos e família. Sendo um amigo se torna uma condição obrigatória para obter atualizações, mesmo que através do mecanismo de assinatura você pode permitir que não-amigos obter suas atualizações também.

Configurando a caixa como uma página da Web não poderia ser mais fácil. Você pode visualizar o conteúdo que está sendo exibido e pegue o HTML relacionado diretamente a partir do site de desenvolvedores do Facebook. Vá para bit.ly/hFvo7y para uma demonstração ao vivo. No final, é tudo sobre como organizar uma URL longa para definida em um elemento iframe. Figura 1 lista os parâmetros que você pode usar a URL.

Figura 1 parâmetros para configurar o Facebook Like Box

Tudo que você faz é organizar uma URL e vinculá-lo a um iframe, como mostrado no Figura 2.

Figura 2 ligação uma URL para um Iframe

<iframe src="//www.facebook.com/plug-ins/likebox.php
  ?href=http://www.facebook.com/etennisnetpage
    &width=292&height=490
    &colorscheme=light
    &show_faces=false
    &stream=true
    &header=true
    &appId=xxxxxxxxxxxxxxx"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:590px;"
  allowTransparency="true">
</iframe>

Escusado será dizer que você também pode incorporar a caixa como uma aplicação desktop (por exemplo, uma Windows Presentation Foundation— ou WPF — aplicação) através de um controle WebBrowser.

Como você pode ver, o plug-in permite algum estilo rápido que funciona na maioria das vezes. No entanto, se você deseja aplicar o seu próprio CSS (na medida em que é possível e documentado) você deve incorporar a caixa como via JavaScript e HTML5. Figura 3 mostra a saída de uma caixa como um site de amostra com estilo (claro) personalizado e regular.

Figura 3 exemplo como caixa**

A atividade de plug-in

Uma outra maneira rápida de incorporar conteúdo específico existente do Facebook em páginas da Web ou aplicativos de desktop (via componentes do navegador) é a atividade de plug-in.

Essa histórias de plug-in de agregados resultantes da interação que os usuários têm com o seu site através do Facebook. Observe que o alvo aqui não é uma página de Facebook, mas sim um site externo. Ações de exemplo que geram tais alimentos são conteúdo gosto do site, assistir a vídeos, comentando e compartilhamento de conteúdo do site. O plug-in também é capaz de detectar se o usuário atual do site que contém a atividade plug-in é conectado ao Facebook ou não. Neste caso, a alimentação exibida é restrita aos amigos do usuário. Caso contrário, o plug-in mostra as recomendações de em todo o site, ao mesmo tempo, dando ao usuário a opção de login no Facebook e receber feedback mais direcionadas. Aqui é a marcação que você precisa (nota que o plug-in de atividade só pode ser consumida através de marcação HTML5):

<div class="fb-activity"
  data-site="www.yoursite.com"
  data-app-id="xxxxxxxxxxxxx"
  data-width="300"
  data-height="300"
  data-header="true"
  data-recommendations="true">
</div>

Você deve incorporar o SDK JavaScript na página para que essa marcação para produzir o que está em Figura 4.

Figura 4 atividade plug-in em ação**

Acessando a linha do tempo

Passado colunas, usei o Facebook C# SDK para afixar à parede texto e anexos. Depois que o post é feito, amigos e fãs podem interagir com ele gostando, compartilhá-lo e comentar sobre ele. Vamos ver o que é preciso para ler o cronograma de um determinado usuário.

Facebook atribui um ID único e bastante longo para qualquer conta, se página perfil ou ventilador. Usuários, no entanto, não usam este ID para identificar páginas. Então a primeira coisa a fazer, a fim de ler uma linha do tempo é corresponde ao nome público da página (ou usuário) para a identificação de Facebook subjacente. Como um mero exercício, você pode digitar o seguinte na barra de endereços de qualquer navegador: https://Graph.Facebook.com/Your-Page-Name.

O espaço reservado "seu--nome da página" é apenas o nome da conta, digite-o para chegar à página. Obtendo o ID da conta para o qual você pretende ler a linha do tempo é apenas o primeiro passo. Você também precisará ser autenticado para acessar o feed. A linha inferior é que qualquer operação que vai diretamente contra o Facebook Graph API subjacente requer autenticação OAuth. Isso significa que as mesmas etapas preliminares discutidas em colunas anteriores também devem ser feitas aqui:

• Crie um aplicativo do Facebook para lidar com o Facebook back-end.
• Que o usuário autorizar o app de Facebook para operar em nome da conta. Esta etapa fornece um token de acesso que une (por tempo limitado), o usuário e o aplicativo do Facebook.
• Use o token de acesso como a chave para operar contra o Graph API de dentro do aplicativo de host (por exemplo, um aplicativo de MVC ASP.NET ).

Uma vez adquirido, o token de acesso pode ser salvos em um cookie e utilizado para cada operação mais até que ela expire. Aqui está o código necessário para obter o raw feed do Facebook servidor:

var name = "name-of-the-user"; 
  // For example, joedummy
  var client =
    new FacebookClient(access_token);
  dynamic user = client.Get(name); 
  dynamic feed =
    client.Get(name + "/feed");

A primeira chamada para o cliente de Facebook estritamente não requer o token de acesso, como é esperado para retornar somente as informações públicas sobre o usuário. A variável de usuário apresenta propriedades como first_name, last_name, identificação e localização. Dependendo de suas intenções, talvez você não precise fazer essa chamada. A segunda chamada para o cliente do Facebook é o que realmente faz o truque. Toma-se uma seqüência de caracteres que indica o caminho do feed do usuário. Você constrói o caminho concatenando o nome da conta com o /feed string. Em troca, recebe um objeto dinâmico c# construído a partir de um fluxo subjacente de JSON. Figura 5 mostra a estrutura do fluxo JSON como capturado pelo Fiddler.

Figura 5 estrutura JSON de um Item de linha do tempo no Facebook**

Ele mostra que a mensagem seleccionada tem dois tipos de ações — foi gostado e comentado. Ele conta também atualmente 14 gostos. Mais detalhes sobre as pessoas que comentaram sobre ele ou gostaram estão disponíveis como você expande a nós. Finalmente, você encontra o conteúdo do post. A nível de JSON, o conteúdo do post é o campo de mensagem.

É importante notar que nem todos os lugares têm a mesma estrutura; Esta é a razão por que o Facebook C# SDK não usa classes simples, estaticamente definidas como objetos de transferência de dados (DTOs). Um problema comum é que o post não tem uma mensagem, o link e imagens, mas inclui um campo de história. Este é o caso, por exemplo, quando o administrador adiciona uma coleção de fotos.

O SDK C# Facebook apenas as mãos um objeto dinâmico do c#. Análise que, em mais definida, tipos de dados — ou decidir que o objeto é bom como está a gotejar para baixo para o modo de exibição — é a sua chamada. Figura 6 mostra alguns código que tenta analisar o objeto dinâmico em uma classe c# clássica.

Figura 6 analisar um objeto dinâmico em uma classe c# clássico

public class FacebookPost
{
  public String PostId { get; set; }
  public String Author { get; set; }
  public String Picture { get; set; }
  public String Link { get; set; }
  public String Published { get; set; }
  public String ContentHtml { get; set; }
  private delegate String ExtractDelegate();
  public static IList<FacebookPost> Import(dynamic data)
  {
    var posts = new List<FacebookPost>();
    foreach (var item in data)
    {
      var tempItem = item;
      var fb = new FacebookPost
      {
        PostId = Extract(() => tempItem["id"]),
        Published = Extract(() => tempItem["created_time"]),
        Picture = Extract(() => tempItem["picture"]),
        Link = Extract(() => tempItem["link"]),
        Author = Extract(() => tempItem["from"]["name"])
      };
      try
      {
        fb.ContentHtml = Extract(() => tempItem["message"]);
      }
      catch
      {
      }
      if (!String.IsNullOrEmpty(fb.ContentHtml))
        posts.Add(fb);
      }
      return posts;
    }
  private static String Extract(ExtractDelegate func)
  {
    try {
      return func();
    } catch {
        return null;
      }
  }
}

A parte mais irritante desse código é encontrar uma maneira eficaz para verificar se uma determinada propriedade é definida no objeto dinâmico que você analisar.Alguns usuários do stackoverflow.com concordam com a abordagem mostrada no Figura 6, baseado em um representante.

Lidar com redes sociais abre todo um novo mundo de possibilidades, que tornam-se oportunidades para os desenvolvedores a pensar e perceber novas aplicações criativas.Como desenvolvedor .NET, você deve ser amigo do Facebook C# SDK.

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 ao seguinte especialista técnico pela revisão deste artigo: Scott Densmore (Microsoft)
Scott Densmore é um um desenvolvimento sênior-chefe da Microsoft trabalhando em recursos no Visual Studio.Ele trabalhou em equipes de desenvolvimento ágil para os últimos 10 anos em ambientes corporativos de grande porte e pequenas startups.Seus interesses principais são cloud computing, computação em dispositivos móveis e computação social.Você pode encontrá-lo no scottdensmore.com e no Twitter em @scottdensmore.