Redes Sociais com Asp.Net e C#

Recentemente escrevi um artigo de capa para a revista .Net Magazine falando sobre programação para Facebook com Asp.Net e C#. Já que o Facebook não tem uma API própria para C#, temos que usar alternativas na programação, e a fonte de informações para isso é escassa. Pretendo dar mais enfase para programação pra redes sociais aqui no Blog. Inclusive disponibilizar alguns excelentes produtos que estão facilitando a vida de vários programadores.

O que este artigo vai mostrar? Vamos começar pelo básico, nesse artigo vou mostrar como utilizar os recursos básicos de integração com redes sociais utilizando o Asp.Net e C# e falar da importância de estar presente nas mídias sociais.

Redes Sociais? Bahh… não preciso disso! (Introdução)

Quem pensa assim, não sabe o que está perdendo! As redes sociais tem um papel importantíssimo na internet atual. Além disso, estar nas redes sociais é uma oportunidade de anunciar seus produtos e serviços, se relacionar com seus clientes ou fortalecer sua marca de forma gratuita!

A rede social de Mark Zuckerberg, por exemplo, tem levado a sério a presença das empresas, e disponibiliza diversos recursos de anúncios, estatísticas, interação, e muitos outros. Por exemplo, quando você faz um post através da sua fanpage, é possível ver qual foi a repercussão dele, quantas pessoas viram, quantas comentaram, etc.

Eu fiz, e deu certo!

Temos vários exemplos de sucesso, seria fácil falar de um case de sucesso de uma campanha da Coca-Cola ou do Axe, porém, gostaria de falar de algo mais real  aos programadores do Brasil, trata-se  de um projeto que eu estive envolvido. Trabalhei como gerente de projetos de um aplicativo promocional para Facebook desenvolvido para a Eurofarma-RC(equipe automobilística da Eurofarma na Stock Car). O aplicativo chamava-se Corrida Eurofarma, foi desenvolvido em Asp.Net e C#, tratava-se de um jogo com duração de algumas semanas onde os curtidores da fanpage da Eurofarma no Facebook podiam se cadastrar e começar a brincadeira.

As atividades diárias envolviam compartilhar postagens, responder perguntas de um quiz, convidar amigos para curtir a fanpage da empresa e participar do jogo, entre outros. Também era possível chamar amigos para “fazer parte do seu carro” e assim multiplicar os pontos ganhos pela quantidade de amigos que conseguiu reunir. Cada atividade feita valia quilômetros e no final de um período, aqueles que tivessem “corrido” mais quilômetros levava os prêmios, que incluía eletrônicos, itens autografados e até uma volta rápida com o piloto da equipe em um carro da Stock Car.

Note que as atividades incluíam compartilhar postagens, curtir e recomendar a amigos. O objetivo da empresa com o aplicativo era de aumentar as pessoas curtindo, melhorar a repercussão das publicações e fortalecer a marca nas redes sociais.

Resultados? No final do jogo, o número de usuário seguindo a empresa no Facebook teve um aumento de 60%. A fanpage da empresa obteve um aumento de 1.113% de publicações visualizadas e um aumento ainda mais impressionante de repercussão de suas publicações em 1.379% em relação ao mesmo período do mês anterior.

As ações em mídias sociais funcionam! E ainda não temos muitos programadores prontos para isso no Brasil, assim, ainda existe uma grande área para se explorar. Sair na frente as vezes é o diferencial para o sucesso, aprenda sobre programação pra redes sociais e torne isso o diferencial da sua carreira!

Clique aqui para mais informações sobre o aplicativo Corrida Eurofarma.

 

Curtir, Tweetar e Marcar +1

Um passo básico de integrar seu site com as redes sociais é utilizar os plugins disponibilizados para compartilhar seu site ou sua página. Vamos aprender a inserir o Curtir, Tweetar e +1, assim como nosso blog tem nessa página em cima to título do artigo. Já que você vai olhar lá em cima para ver, aproveite e curta esse artigo 🙂

Porque usar?

Simples, quando você disponibiliza esses recursos no seu site, os usuários podem ajudar a trazer novos usuários. Por exemplo, quando você clica em Curtir acima do título desse artigo, seu amigos vão ver “José curtiu o artigo …”, quando você Tweetar, o link e título do artigo serão divulgados, e quando marcar publicamente com +1 do Google Plus, seu círculo de amigo verá a marcação. Em outras palavras você está mostrando publicamente que gostou do meu artigo, e divulgando gratuitamente para outras pessoas que talvez considerem sua opinião ou o assunto importante e entrem para ver.

Ainda podemos falar de outro benefício que essa integração trás: a relevância no Google.

Cada vez mais nosso amigo Google tem dado atenção e importância para o lado “Social” das coisas. O algoritmo do Google sofre diversas mudanças a cada ano, e de alguns anos pra cá, o Google quer ver a importância do seu site como as pessoas veem, portanto, um site que tem aprovação publica de várias pessoas através das redes sociais pode ser o diferencial para passar seu concorrente nas buscas.

Quer ver um exemplo? O Google tem uma ferramenta chamada Google Webmasters, nela você pode acompanhar o desempenho do seu site nas buscas, bem como ver os links que apontam para sua página(é fato conhecido que a quantidade e qualidade de links que apontam para seu site é considerado pelo Google como fator de relevância). Quando for verificar os links, note que tem um contador referente ao Twitter e Facebook, de pessoas que compartilharam seu link, página ou artigo. (no Facebook apenas fanpages pontuam link). Além disso, sua presença no Google Plus, por ser uma rede social do Google, também tem influência no que ele pensa do seu site.

Como fazer?

Botão Curtir – Facebook



<script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script><fb:like show_faces="false" width="60" height="22" layout="button_count"></fb:like>


Note que o layout button_count indica que será um botão curtir mostrando na frente o número de curtidas que já teve. Você pode utilizar a propriedade href=”http://www.sua-url.com.br” na tag fb:like para indicar uma URL a ser curtida, caso não seja a mesma que o botão está. No meu caso, utilizo o href nas páginas de listagem, por exemplo, na página inicial, afinal cada artigo tem uma URL diferente, e aqui na página do artigo não é preciso.

Botão Tweetar – Twitter



<a href="http://twitter.com/share" data-count="horizontal" data-via="[Tweetar]">Tweetar</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


Assim como o Curtir do Facebook, você pode usar uma opção para definir uma URL a ser tweetada que não seja a que o botão está, para isso chame a propriedade data-url=”http://www.sua-url.com.br” dentro da tag a.

Botão +1 – Google Plus

No seu código:



<g:plusone size="medium"></g:plusone>


Dentro da tag <head>:



<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{ lang: 'pt-BR' }

</script>


Para definir uma URL a ser marcada com +1 que não seja a que o botão está, chame a propriedade href=”http://www.sua-url.com.br” dentro da tag g:plusone.

Like Box do Facebook

É uma “caixa” que você pode  inserir no seu site para mostrar as “carinhas” das pessoas que já curtiram sua fanpage e assim incentivando outras pessoas a curtir também. Caso esteja logado no Facebook, seus amigos que curtiram serão mostrados primeiro. Também é possível configurar para mostrar as últimas postagens da sua fanpage.

Como fazer?

O Facebook tem um gerador pra facilitar a nossa vida. Clique aqui para abri-lo.

Você verá as seguintes configurações:

Facebook Page URL: Endereço da sua fanpage.

Width: Largura

Height: Altura

Color Scheme: Tema de cores, se o seu site tem o fundo escuro, use o dark.

Show Faces: Deixe marcado para exibir as “carinhas” de quem curte a fanpage.

Border color: Antigamente não tinha esse recurso, e era muito chato não ter opção e deixar a borda de um jeito que ficava estranho no seu site, ainda bem que eles mudaram isso e agora você pode escolher a cor da borda. Ex: #CCCCCC

Stream: Marque para deixar habilitado a exibição das últimas postagens.

Header: Marque para deixar habilitado o cabeçalho(desnecessário).

Depois de configurar, clique em Get Code e escolha que tipo de código você quer. Ai é só colar no seu Asp.Net ou HTML. (na minha experiência com Like Box, tive menos problema com  a opção de código Iframe, pois deu menos conflitos).

Widget com os últimos Tweets

Para exibir os últimos tweets, a própria rede social disponibiliza uma ferramenta para criação, assim como o Facebook. Clique aqui para acessar. Você será direcionado para a seguinte página:

Achei desnecessário incluir informações adicionais de como configurar, já que é em Português e as configurações são muito fáceis.

Transformando Perfil de Amigos em Fanpage no Facebook

Sim, é possível converter o perfil de amigos em Fanpage e transformar os amigos em curtidas! Decidi incluir essa informação porque vejo muitas pessoas quebrando a cabeça com isso. Algumas tem um perfil de amigos no Facebook com milhares de pessoas adicionadas e criam uma fanpage começando do zero e pedindo para os amigos curtirem. Isso não é necessário! Basta logar no Facebook, acessar a página de migração e seguir o passo-a-passo para transformar o perfil de amigos em Fanpage e converter os amigos em curtidores da página.

Concluindo…

Você viu na introdução a importância das redes sociais na vida dos programadores que querem se destacar. Use os recursos básicos que disponibilizei nesse artigo e fique atento. Em breve, vou disponibilizar uma API de programação para Facebook em Asp.Net com C#. Se você quer criar aplicativos para o Facebook em C# de uma forma muito fácil, cadastre-se através da opção na direita para receber as novidades por e-mail. Dentro de alguns dias você receberá um alerta para entrar no Blog  e conferir a API para Facebook em C#.

Obrigado por ler o artigo, se possível, curta, tweet e marque com +1.

15 Comentários


  1. Onde você colocou este código quando jogo na minha página asp.net não funciona?

    Responder

    1. Olá Leandro. Você pode inserir no body de sua página HTML ou ASP.NET. Com exceção do script do G+ que deve ser inserido na HEAD. Abraço.

      Responder

  2. Meus Parabéns! Entro em seu site quase todos os dias!

    Parabéns!!!!

    Muto bom!

    Responder

    1. Olá Vinicius, gostaria de agradecer a você e a todos os leitores pelo apoio e pelos acessos 🙂
      Estou preparando diversas novidades para o Blog, infelizmente está demorando mais do que eu previa por questão de falta de tempo, mas em alguns dias novidades surgirão!
      Abraço.

      Responder

  3. Cesar, tudo bem?
    Estou colocando dentro do body de minha pagina porém não está funcionando.. nao aparece… como devo fazer?

    Responder

    1. Olá Vinicius. Tudo certo, e você? Qual rede social você está instalando?

      Responder

  4. Olá, primeiramente gostaria de dizer que suas publicações são realmente fantásticas, e pedir a gentileza de me orientar sobre a tag do twitter pois a mesma só está aparecendo a palavra Tweetar, não está mostrando nem a figura nem a contagem. Obrigado.

    Responder

    1. Olá Alex. Obrigado pelo elogio 🙂
      Por favor, poste seu código para que eu possa avaliar.
      Abraço.

      Responder

      1. Olá Cesar, valeu pela atenção mas já encontrei o problema após dar uma procurada, estava faltando no meu código do twitter a class=”twitter-share-button”. Novamente obrigado pelo post. Valeu!!

        Responder

  5. boa tarde pessoal,
    estou fazendo uma rede social, e contratei uma empresa indiana para desenvolver-la, porém não entendo muita coisa a respeito de desenvolvimento web.
    Então, após algumas consultas, vi que a tecnologia utilizada por eles é a C#, ASP.NET + MVC5 + RAZOR.
    Banco de dados: NEO4j + CYPHER
    ENTITY+ LAMBDA (para manuseio de dados)
    Minha pergunta é: essa tecnologia irá suportar mais de 10 milhões de usuários?
    se não, o por que?
    se sim, o por que?

    Hoje, o sistema está praticamente pronto, está hospedado em um servidor Azure (A8) e está muito lento, e comecei a sentir que eles estão perdidos no que fizeram.

    existe algum recurso para deixar o site mais rápido?

    Meus custos com servidores serão mais caros por estar utilizando essas linguagens?

    Estamos pensando em abandonar o projeto com essa empresa Indiana, e contratar uma Brasileira que irá desenvolver em NODE.js (estarei fazendo a coisa certa ou devo permanecer acreditando que o ASP.NET poderá funcionar?)

    Alguém aí pode me ajudar?
    obrigado!

    meu email: learnandiscovery@gmail.com

    Responder

  6. Olá,

    Precisava incluir apenas a parte de fazer “Login” do Facebook em um sistema.
    Esse sistema é utilizado para fazer login para ter acesso a Internet.
    Incluir o SDK JS disponibilizado no “Facebook for Developers” e realizando o teste com acesso a internet funciona corretamente.
    Agora no caso para acesso sem internet, foi preciso liberar o link do “Facebook.com” e o link do JS “https://connect.facebook.net/pt_BR/sdk.js”.
    O problema é que esse link do JS, apesar dele já esta liberado, nem sempre carrega, como se não estivesse liberado, deixando esse componente inconstante.

    Queria saber se tem alguma outra forma de trabalhar com isso?

    Obs: Em sistemas parecidos com o que eu trabalho, os campos de “E-mail” e “Senha” são fixos na própria tela da aplicação. O caso que estou usando, com o SDK do Facebook,
    o que ele faz é direcionar para um dialog do Facebook.

    Utilizado: Visual Studio 2010 / MVC 4 / Asp.Net e C#

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*