Web Matrix  - Integrando o seu site com os serviços das redes sociais

Este é um artigo literalmente traduzido de : 13 - Adding Social Networking to Your Web Site

Um dos muitos recursos que você pode usar para incrementar o seu site é integrar o seu site com os serviços das redes sociais.

Este artigo vai mostrar como permitir que os usuários do seu site referenciem seu web site a sites como Facebook e também incluam feeds Twitter.

Em resumo você vai aprender a :

Os conceitos de programação ASP .NET relacionados com os itens acima a serem vistos são:

Os recursos usados neste artigo são:

Para saber como obter e instalar o Web Matrix veja o meu artigo : Usando o WebMatrix beta 3 - Macoratti.net

Vinculando o seu website ao sites de redes sociais

Se a pessoas gostam de algo em seu site, elas com frequência desejam compartilhar isso om seus amigos e você pode tornar esta tarefa mais fácil pela exibição de um grifo ou ícone onde as pessoas podem clicar para compartilhar a página no Digg, Reddit, Facebook, Twitter ou sites similares.

Para exibir estes grifos você só tem que incluir um helper LInkShare em sua página e as pessoas que visitarem o sua página poderão clicar em um grifo/ícone individual de forma que se elas tiverem uma conta com o respectivo site de rede social, eles podem postar o link para sua página naquele site.

Mas o que é e como eu instalo o Helper ?

Podemos usar Helpers em páginas ASP .NET para criar conteúdo dinâmico com o mínimo de código. Um pacote Helper empacota funcionalidades comumente usadas em uma forma fácil de usar e de escrever código.

Para usar os Helpers você tem que instalar o Microsoft ASP.NET Helpers Library.

Para instalar rode o site criado e na url inicial apresentada : http://localhost:41328/Default.cshtml remova o nome Default.cshtml e inclua _Admin de forma que a URL fique assim:  http://localhost:41328/_Admin/

Teclando ENTER no primeiro login será apresentada a tela para que você crie uma senha de acesso de Administrador. (somente no primeiro acesso)

Após isso será apresentada a tela de Administração do WebMatrix exibindo as opções;

No nosso caso o pacote já esta instalado se não estivesse teríamos um link para instalar o pacote.

Selecionando a opção Online veremos uma relação de pacotes que poderemos instalar para incrementar ainda mais o WebMatrix;

Basta você escolher o pacote e clicar no botão Install;

Para ver os pacotes já instalados selecione a opção Installed na caixa de listagem Show;

Para este exemplo você deve instalar os pacote FaceBook.Helper 1.0 e Twitter.Helper 1.0,  de forma que se você visualizar os pacotes instalados deverá ver :

Agora que você já sabe o que é um Helper e como instalá-lo podemos continuar...

Abra o WebMatrix e selecione a opção Site From Template;

A seguir selecione o item Starter Site para criar um site e informe o nome WebMatrix_Demo;

Será criado o site com algumas páginas básicas. Na página Default.aspx vamos incluir o código para usar o Helper do Facebook e assim vincular nossas páginas esta rede social;

Abaixo vemos o código  alterado já incluindo a chamada aos Helpers do Facebook:

O Helper Facebook renderiza um botão estilo Like bem como um contador (lido a partir do Facebook) de quantos pessoas tem clicado para a página:

Quando as pessoas clicarem no botão Like do Facebook na página do seu site, um link irá aparecer nos feeds dos usuários do Facebook indicando que eles gostaram da página;

Para ver o resultado da página em execução, no menu Home, selecione Run e escolha o seu navegador preferido (dentre os que você tem instalado);

Pronto você verá o resultado conforme a figura abaixo:

Ao clicar no link você poderá ser levado à página de autenticação do FaceBook;

Incluindo um Feed para o Twitter

Vamos usar outro Helper ASP  .NET que permite incluir um feed Twitter em uma página. Lembrando que já instalamos o Helper Twitter.Helper 1.0 em nossa aplicação.

Como o acesso a informação do Twitter é pública, não vamos precisar de uma conta afim de usar o Twitter Helper em nossa página web.

É só seguir o roteiro a seguir. Vamos lá ...

  1. Inclua a library do Twitter.Helper 1.0 na página; (isso já foi feito)
  2. Inclua uma nova página chamada Twitter.cshtml ao website;

Para isso selecione o menu Files e selecione New -> New File... (Fig 1.0);

A  seguir selecione CSHTML e informe o nome Twitter.cshtml e clique em OK; (Fig 2.0)

Fig 1.0 Fig 2.0
  1. Agora inclua o seguinte código a esta página criada;
<html>
<head>
<title>Exemplo Feed Twitter</title
</head>
<body>
<table>
<tr>
<td>Twitter profile helper</td>
<td>Twitter search helper</td>
</tr>
<tr>
<td>@Twitter.Profile("<Inserir Nome Usuário>")</td>
<td>@Twitter.Search("<Inserir Critério de Busca>")</td>
</tr>
</table>
</body>
</html>
  1. Substitua o texto em Twitter.Profile trocando <Inserir Nome Usuário> com o nome da conta do feed que você deseja exibir.Exemplo: macorati;
  2. Substitua o texto em Twitter.Search trocando <Inserir Critério de Busca> com o texto que você deseja procurar: Exemplo: livro;
  3. Execute a página em um navegador;

E dessa forma vemos como é fácil se integrar às redes sociais usando os recursos do WebMatrix.

Eu sei é apenas Web Matrix, mas eu gosto...

Referências:

José Carlos Macoratti