Web social. Facebook Helper

Vejamos como implementar a rede social Facebook, na nossa web criada a partir de WebMatrix.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 13/5/13
Valorize este artigo:
No nosso exemplo:
  1. Instalaremos o Facebook Helper.
  2. Criaremos um exemplo simples, sem necessidade de funções de inicialização.
  3. Trataremos a configuração e inicialização de Facebook Helper.
  4. Criaremos um exemplo completo, com toda a funcionalidade de Facebook Helper.

Instalação de Facebook Helper

Começaremos criando um novo projeto baseado em um layout (Template).

Nota: Repasse o artigo correspondente a ASP.NET Web Helpers, que trata da instalação dos complementos ou Packages de WebMatrix.

IMAGEN 15 Para começar, clicaremos em Templates (layouts) na tela inicial de WebMatrix.

Dentre os layouts existentes, selecionamos Site vazio, lhe damos um Site Name, por exemplo FacebookHelper, e finalizamos clicando no botão OK.

Já na visão de Site no ambiente de desenvolvimento de WebMatrix, vemos no painel da direita um link para ASP.NET Web Pages Administration, clicamos nele e isto nos levará a uma janela do explorador de Internet onde poderemos realizar as tarefas administrativas correspondentes.

Dado que é a primeira vez que acorremos ao trabalho de administração neste projeto, nos pede que criemos um senha e a confirmemos, depois do que deveremos clicar no botão Create Password, que já se encontrará ativo.

Seguimos os passos já conhecidos e localizamos Facebook Helper 1.0 (Ou, se houver, uma versão mais recente) e clicaremos sobre Install.

Nos informará que o processo de instalação foi finalizado corretamente.

Ao final já poderemos fechar a sessão, clicando em Logout, fechar o explorador de Internet se não o estávamos utilizando e voltar ao ambiente de desenvolvimento de WebMatrix.

No ambiente de desenvolvimento de WebMatrix, se já não estivermos, deveremos ir à vista Files, clicando sobre a entrada no painel inferior esquerdo.

No esquema de pastas e arquivos do Site, pressionamos com o botão direito do mouse no título superior (o nome do projeto, FacebookHelper no nosso caso) e clicamos sobre Refresh, para nos assegurarmos de que estão refletidas as mudanças do sistema que deveriam ter se produzido antes.

Poderemos observar que foi criada uma nova pasta (packages) na que se encontra outra com os arquivos do pacote recém-instalado e que na pasta Admin foi criado um novo arquivo, agora há dois, o de senhas e o de configuração dos pacotes. Uma terceira pasta criada, denominada Facebook, contém toda a documentação necessária em formato HTML.

Um exemplo simples

Neste exemplo veremos algumas das possibilidades de interatuar com Facebook sem realizar nenhuma inicialização na seção de código Razor. Se bem que implica uma simplicidade e a não necessidade de dispor dos códigos de conta de aplicação do próprio Facebook, se paga em forma de menor acesso às funcionalidades do Facebook Helper.

Imaginemos que selecionamos todo o código da página Deafault.cshtml e o substituímos por:

@{
 : :  <!-- sem inicialização -->
}

<!DOCTYPE html>

<html lang="es">
 : : <head>
 : :  : :  <meta charset="utf-8" />
 : :  : :  <title></title>
 : :  </head>
 : :  <body>
 : :  : : @Facebook.LikeButton("http://localhost:28935/")
 : :  : :  @Facebook.LikeBox("http://www.facebook.com/MSDNSpain")
 : :  : :  @Facebook.LikeBox("http://www.facebook.com/Microsoft")
 : :  </body>
</html>

Finalmente para testá-lo, clicamos sobre o botão Run ou então clicamos com o botão direito do mouse sobre FacebookHelper, no esquema de arquivos da esquerda e selecionemos Launch in browser.

Observe que os botões de LikeButton, que são o Like standard mais o Sign Up e as duas janelas de LikeBox que apontam a MSDN Espanha e a Microsoft Corp.

Nota: Para seguir como usuários de Facebook, deveremos nos registrar como tal e posteriormente voltar a este ponto

Configuração e inicialização de Facebook Helper

Para utilizar todas as funcionalidades de Facebook Helper necessitamos obter dois dados de nossa conta de Facebook, por isso deveremos estar registrados nele. Supondo que sim, do contrário deveremos fazê-lo. O que segue nos descreve como obtê-los e como empregá-los em nossas aplicações.

Acederemos com nosso explorador de Internet a uma dos seguintes endereços:

  • http://www.facebook.com/developers/createapp.php
  • https://developers.facebook.com/apps
Se mostrará em primeiro lugar a janela de acesso (login) a Facebook e posteriormente outra adicional de acesso à área de aplicações, na que deveremos repetir a senha.

Agora veremos as aplicações que tenhamos registradas no Facebook, se houver.

O que nos interessa realmente é registrar e obter os dados para inicialização de funções avançadas de Facebook em outra nova.

Prossigamos clicando sobre o botão Criar nova aplicação, como mostrado na figura anexa.

Se abrirá a caixa de diálogo Create New App.

Em App Name deve-se escrever o nome da aplicação que queremos registrar e que deve ser único. Temos que marcar a casa de verificação de aceitação da política de Facebook Platform e finalizar pressionando o botão Aceitar.

Depois de uns instantes teremos uma espécie de diploma como o mostrado em uma figura anterior na que se lê Aplicações ? WebMatrix Helper, com o nome da aplicação que tenhamos registrado que contém os dados para a inicialização das funções mais avançadas de Facebook Helper:

  • App ID/API Key
  • Código secreto da aplicação
Vamos vê-lo a seguir com um exemplo final.

Um exemplo completo

Neste breve, porém intenso exemplo, faremos um uso extensivo das funções disponíveis através do Facebook Helper.

Antes de tudo, necessitaremos para muitas delas realizar uma série de inicializaIMAGEM15 ções do API para Facebook contido no Helper:

  • Initialize: É a peça chave de inicialização de Facebook Helper, toma como parâmetros os valores obtidos anteriormente da parte de aplicações de Facebook e nos dá acesso às funções que precisam de inicialização (identificação de usuário de uma aplicação) em Facebook.
  • FbmlNamespaces: Inicializa o espaço de nomes Facebook Markup Language (FBML), de maneira que o código gerado pelo Facebook Helper seja entendido pelos exploradores de Internet.
  • GetInitializationScripts: Finalmente, Facebook utiliza bibliotecas em JavaScript que devem ser inicializadas; esta chamada faz todo o procedimento por nós e deve ir justamente depois da etiqueta de abertura de . Em todo o caso, antes de qualquer chamada ao API de Facebook Helper.
Com respeito às funções disponíveis, observe a tabela anexa. se mostram suas descrições e também se são necessários os procedimentos anteriormente descritos para as inicializações ?será um bom exercício fazer práticas sobre o exemplo final e retirar as funções que precisem inicialização e as próprias inicializações e ver se é assim e outras possíveis combinações e ver no que falha a execução-.

FunçõesInicializaçãoDescrição
LikeButtonNoMostra o típico botão ?Like? de Facebook.
LikeBoxNoMostra uma caixa com as últimas contribuições para o Facebook, do canal de notícias público, de um usuário de Facebook que se dê como parâmetro.
CommentsNoSe trata de uma poderosa ferramenta, na que se colocam comentários que posteriormente serão mostrados juntamente com a referencia completa do site e a própria aplicação.
RecommendationsSe mostra a informação de usuários que fazem recomendações de nosso site ou compartilham informação a partir do seu site
FacepileQuando se utiliza, se mostrarão as imagens dos usuários amigos quejá mostraram que gostaram da página em questão.
LiveStreamProporciona uma janela com capacidades de conversação em tempo real (chat).
ActivityFeedTambém se abre uma janela na que se mostra informação quando usuários comentam a cerca do site ou informam sobre ele no Facebook.

@{
 : :  Facebook.Initialize("316938420540102", "e834331d5a888d78ed67df4a19ae7dde");
}

A maquete de nossa aplicação deveria conter um código similar ao que segue:

@{
 : :  Facebook.Initialize("{App ID}", "{App Secret}");
}

<!DOCTYPE html>

<html lang="es" @Facebook.FbmlNamespaces()>
 : :  <head>
 : :  : :  <meta charset="utf-8" />
 : :  : :  <title></title>
 : :  </head>
 : :  <body>
 : :  : :  @Facebook.GetInitializationScripts()
 : :  : : @Facebook.LikeButton("http://locaIMAGEN 15 lhost:28935/")
 : :  : :  <!-- ^-sem inicialização -->
 : :  : :  @Facebook.LikeBox("http://www.facebook.com/MSDNSpain")
 : :  : :  <!-- ^-sem inicialização -->
 : :  : :  @Facebook.Comments()
 : :  : :  @Facebook.Recommendations()
 : :  : :  <!-- ^-sem inicialização -->
 : :  : :  @Facebook.Facepile()
 : :  : :  @Facebook.LiveStream()
 : :  : :  @Facebook.ActivityFeed()
 : :  </body>
</html>

Voltemos a olhar a parte anterior , ali finalmente obtivemos dois valores que agora temos que manipular.

Utilizaremos a chave numérica como {App ID}, observe que {App Secret} é o valor mais longo, com letras em minúsculas e números, de modo que nos faltaria o código similar ao seguinte:

@{
 : :  Facebook.Initialize("316938420540102", "e834331d5a888d78ed67df4a19ae7dde");
}

Nota: Os dados {App ID} e {App Secret} aqui dados são fictícios

Finalmente para testá-lo, clicamos sobre o botão Run ou então clicamos com o botão direito do mouse sobre FacebookHelper e selecionamos Launch in browser.

As imagens que seguem são as que se mostrarão em nossa página Web no explorador de Internet correspondente.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato