Web social. Grupo de recomendações

Vejamos como implementar os botões das redes sociais em nossa web criada com ASP .NET.

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


Publicado em: 14/6/13
Valorize este artigo:

Neste artigo abordaremos os seguintes objetivos:

  1. Instalação da ASP.NET Web Helpers Library.
    Note que se foi seguido o artigo Web social. ASP.NET Web Helpers Library já se tratará de um tema conhecido, que se poderá deixar de lado.
  2. Instalação do Google +1 Helper.
  3. Implementação de botões Twitter para recomendação -tuitar- e seguimento.
  4. Implementação de um botão de eu gosto de Facebook.
  5. Implementação de um botão de votação de Google +1.

 

Instalação de ASP.NET Web Helpers Library

Iniciamos em WebMatrix um novo projeto baseado em um layout (Layouts).

Selecionamos um layout de tipo "Empty Site" e lhe damos um determinado Nome do site (optamos nonosso exemplo por "Recomendações"). Finalmente clicamos sobre o botão "Seguinte".

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

Entre elas, se encontram a gestão dos denominados "Web Helpers", que é o que nos interessa neste momento.

Dado que é a primeira vez que recorremos aos trabalhos de administração neste projeto, nos pedem que criemos uma senha e que a confirmemos. Depois disso devemos clicar sobre o botão "Create Password", que já se encontrará ativo.

No passo seguinte somos informados de que deveremos realizar imediatamente uma tarefa previa no ambiente de desenvolvimento de WebMatrix e clicar onde indicado no texto (Click here).

Voltemos por um momento ao ambiente de WebMatrix.

No ambiente de desenvolvimento de WebMatrix, se ainda não estivermos , deveremos ir à visão "Arquivos", clicando sobre a entrada no painel inferior esquerdo.

No esquema de pastas e arquivos do Site, pressionamos com o botão direito do mouse sobre o título superior (o nome do projeto, "Recomendações" no nosso caso) e clicamos sobre "Atualizar", para nos assegurarmos de que se refletem as mudanças do sistema que deveriam ter sido produzidas recentemente.

Finalmente, localizamos o arquivo _Password.config, dentro da nova pasta "Admin", dentro de "App_Data" e o renomeamos para "Password.config". Note, sem a barra de sublinhado inicial, que é fundamental esta leve mudança.

Voltemos ao explorador de Internet e nos dispomos a iniciar sessão no "ASP.NET Web Pages Administration".

Escrevemos a senha que havíamos criado e clicamos sobre "Login".

Depois de uns instantes nos mostrará uma lista de todos os pacotes instaláveis. Em condições gerais, navegaríamos em busca do desejado ou utilizaríamos a opção "Search".

Neste caso concreto, o "ASP.NET Web Helpers Library", em sua última versão, é um dos primeiros mostrados.

Clicamos sobre o botão "Install" que se encontra logo à sua direita.

Nos pedirá confirmação para a instalação. Leia detidamente que, na verdade, é esse o pacote desejado e prossiga clicando no botão "Install".

No final já poderemos encerrar a sessão, clicando em "Logout", encerrar o explorador de Internet se não o estávamos utilizando e voltar ao ambiente de desenvolvimento de WebMatrix. Por enquanto, deixaremos a sessão aberta.
 

Instalação de Google +1 Helper

Se não encerramos a sessão ou tínhamos iniciado sessão desde o começo, deveremos localizar o "Google +1 Helper" e instalá-lo.

Na área de textos de "Search" escreveremos, por exemplo, Google e clicaremos sobre o botão de busca.

Ao cabo de uns instantes serão mostradas as entradas que contenham o padrão de busca. No nosso caso aparece o buscado: Google +1 Helper.

Prosseguiremos clicando sobre os sucessivos botões de "Install".

Até que apareça a janela final de "Package Google +1 Helper - was successfully installed".

Agora sim já é o momento de encerrar a sessão, clicando em "Logout", encerrar 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 ainda não estamos aí, deveremos ir à visão "Arquivos", clicando sobre a entrada no painel inferior esquerdo.

No esquema de pastas e arquivos do Site, pressionamos com o botão direito do mouse sobre o título superior (o nome do projeto, "Recomendações" no nosso caso) e clicamos sobre "Atualizar", para nos assegurarmos de que se refletem as mudanças do sistema que deviam ter sido produzidas recentemente.

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.


 

Nosso exemplo de implementação de recomendações

Ampliemos no editor o conteúdo do arquivo "Default.cshtml", clicando duas vezes sobre sua referencia na árvore de arquivos da esquerda.

Para ver o funcionamento das diversas recomendações de Twitter, Facebook e Google +1, substituí-se todo o seu conteúdo pelo que mostramos na Lista 1. Aí codificamos:

  • Uma mensagem ao começo da área de código Razor
    var mensagem = "O que de nada duvida, nada sabe.";
  • Código de inserção de um botão de Twitter, para referenciar, tuitar, o artigo no qual se encontra inserido:
    @Twitter.TweetButton()
  • Código de inserção de um botãode Twitter, para seguir o autor do artigo no qual se encontra inserido:
    @Twitter.FollowButton("jpt219")
  • Código de inserção de um botão de Google +1, para referenciar, votar pelo artigo no qual se encontra inserido:
    @GooglePlusOne.PlusOneButton()
  • Parâmetro opcional para definir a linguagem:
    language: GooglePlusOne.Languages.Spanish
  • Parâmetro opcional para definir o tamanho, pode ser Small, Medium ou Tall:
    size: GooglePlusOne.Sizes.Medium)
  • Código de inserção de um botão de Facebook, para referenciar, eu gosto, no artigo no qual se encontra inserido:
    @Facebook.LikeButton()

Lista 1: Código de nosso exemplo de recomendações com WebMatrix.

@{
var mensagem = "O que de nada duvida, nada sabe.";
}

<!DOCTYPE html>

<html lang="es-es">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>@mensagem</h2>
<hr>
<table>
<tr>
<td>@Twitter.TweetButton()</td>
<td>@Twitter.FollowButton("jpt219")</td>
<td>@GooglePlusOne.PlusOneButton(
language: GooglePlusOne.Languages.Spanish,
size: GooglePlusOne.Sizes.Medium)</td>
<td>@Facebook.LikeButton()</td>
</tr>
</table>
Estamos a @DateTime.Now horas
<hr>
©Jaime Peña Tresancos, 2012
</body>
</html>

Agora bastará clicar no botão "Executar" na Barra de ferramentas de acesso rápido, e se mostrará o documento no explorador de Internet, tal como se observa na figura adjunta. Alternativamente, se pode clicar com o botão direito do mouse sobre o nome do arquivo do documento, à esquerda, e selecionar "Iniciar no explorador".


 

Códigos particulares. A modo de biblioteca

Lista 2: Código mínimo para um TweetButton e um Twitter FollowButton.

@{

}

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@Twitter.TweetButton()
@Twitter.FollowButton("jpt219")
</body>
</html>

Lista 3: Código mínimo para um Facebook LikeButton.

@{

}

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@Facebook.LikeButton()
</body>
</html>

Lista 4: Código simples para um Google +1 Button.

@{

}

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@GooglePlusOne.PlusOneButton(
language: GooglePlusOne.Languages.Spanish,
size: GooglePlusOne.Sizes.Medium)
</body>
</html>






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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