Defer e Async – Carregamento de arquivos JavaScript

Salve galera, hoje quero abordar sobre otimização de websites, vou abordar duas tags do HTML5 que podem diminuir bem o gargalo do tempo de carregamento dos arquivos de JavaScript, da qual já fiz uma introdução em outro tópico, Alto Desempenho com JavaScript da qual sabemos que um dos principais impasses para tratar o carregamento do nosso website é a chamada correta para os arquivos JavaScript, seja um arquivo externo ou mesmo uma chamada interna, sempre devemos nos atentar sobre isto.

Carregamento do Site

Sabemos que os browser embora evoluíram consideravelmente nessa última década, ainda não há um padrão exato de como ele renderiza todos os nossos arquivos e como ele vai se comportar a cada requisição do usuário, quando se trata de eventos com JavaScript ele trabalha em uma “camada” do browser da qual ele pode escrever, modificar, excluir e inserir elementos no website por isso ele impacta tanto no carregamento do site.

Craig Bucker disse – “Para o usuário pode ser indiferente um segundo ou dois de tempo de resposta de uma requisição, não é perceptível do ponto de vista humano esse “leg” pois o conteúdo principal está sendo exibido. Mesmo que essa solução é inadequada para aplicações client-side ou multi-megabyte. Em casos extremos, é necessário carregar bibliotecas de código grandes usando injeções, tag´s script ou técnicas Ajax, isso evitaria o bloqueio, mas requer um código adicional e testes rigorosos para garantir que os scripts são executados na ordem correta em todos os navegadores.”

O atributo defer

O atributo defer garante ao navegador, que em relação aos arquivos JavaScript que serão executados em seu browser não existe nenhuma tag document.write ou DOM que irá ser executado no instante de “load” do seu site, abaixo está um exemplo de como devemos atribuir em nossos script para fazer referencia que iremos utiliza-lo:

<script src="file.js" defer></script>

Quando você utiliza a tag defer os browser entendem que você irá baixar outros arquivos js em paralelo, isso irá fazer com que todos os arquivos do seu site carreguem no mesmo instante.  Isso evitaria o interrompimento do carregamento do seu site por conta de algum arquivo externo javascript , lembrando que não há um estudo minucioso para isso para utilizarmos essa tag para mobile já que sabemos por default que o jQuery é deveras grande para ser carregado e a cada requisição que o usuario fez ele baixa o arquivo novamente tornando seu site lento, por isso devo ressaltar não utilize jQuery para mobile.

Abaixo estou colocando para quais browser o atributo defer funciona:

Browser que aceitam a tag defer

Browser que aceitam a tag defer


O atributo async

O atributo async foi introduzido junto com o HTML5, ele possui o mesmo funcionamento que o defer as mesmas caracteristicas, carregar arquivos paralelamente porem seu funcionamento não é muito prático ele possui uma exceção, ele não garante que os arquivos serão executados em sequências mas eles serão carregados no instante do “onload” dos arquivos.

<script src="file.js" async></script>

Browser que suportam o async

Browser que suportam o async

De maneira geral para sabermos como fica o carregamentos dos arquivos JavaScript utilizando as tags, defer, async e sem elas.

Defer vs Async vs Normal

Defer vs Async vs Normal


Execução sem as tags:(Normal)

Por default sem o uso dessas tags o browser irá fazer o carregamento dos arquivos js, porém no mento que estiver executando o html ele vai ser interrompido para chamar esses arquivos somente depois de finalizado que ele finaliza a renderização do template para o usuário.

Execução com as tags:(defer)

Resumindo ele vai atrasar a execução do arquivos js até que finalize a renderização por completo do HTML, a parte positiva disto é que mesmo ele tendo esse comportamento ele vai deixar o DOM disponivel.

Execução com as tags:(async)

Se você não se importa quando o seus arquivos scripts estarão disponiveis para o usuario acessar, então utilize essa tag sem
preocupação, ele vai deixar renderizar seu template por completo e depois vai carregar os arquivos js de forma assíncrona.

Referencias:
http://www.sitepoint.com/non-blocking-async-defer/
http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Alto Desempenho – Inclusão do Código JavaScript

E ae, galera blz? Chegando aqui para falar de mais um tópico abordando JavaScript, conforme discutido nas colunas anteriores, estou focando mais isso, este mês de julho fiz algumas aquisições para minha biblioteca particular:

Alto Desempenho JavaScript

– JavaScript o Guia Definitivo

– O Melhor do JavaScript

– Padrões JavaScript

– JavaScript de Alto Desempenho

Estarei aos poucos trazendo aqui no blog os capítulos que achar mais pertinente, blz!?

Deu para aproveitar a agenda de julho e conciliar um curso de férias sobre Programação Avançada com JavaScript pela Caelum deu para dar um upgrade “considerado” nos conceitos sobre JavaScript,  estarei postando em breve algumas dicas que peguei de lá com o instrutor e dando um feedback para quem pretende fazer curso na Caelum da parte de frontend.

Antecipando o review, recomendo para quem procura um curso que engloba essas duas tecnologias(JavaScript e Jquery), o material e o instrutor são bons, a didática dele é excelente, bem prático os exercícios, contexto real não fica fazendo execícios tolos de somar, dividir e onClick, a maioria das escolas que dizem dar curso de JavaScript fazem isso, então atente-se sobre a grade do curso, o que considero de suma importância em todo curso de JavaScript(DOM, BOM, Function, Prototype, Classe e Herança) outra coisa que pude perceber e sobre a curva de aprendizado é bem acentuada. \o/

Bom chega de firulas, vamos falar do que importa, como dito no inicio do tópico quero abordar com vocês um tópico que vi no livro Alto Desempenho – JavaScript do Nicholas C. Zakas.

Primeiro tópico que já engloba o livro na parte de desempenho e que gera muita discussão pela comunidade é aonde deixar as tags <script>? Entre as tags <head>? Ou seria entre as tags <body>?!

A importância da chamada dos script na sua página, deve ser muito bem analisada e estruturada pois isso pode impactar tanto no carregamento da página quanto no desempenho da mesma.

Antigamente, todos partiam do principio que o correto seria:

Jeito Errado: Carregamento de todos os arquivos JS no inicio entre as tags <HEAD> da página pode afetar o desempenho de carregamento da sua página pois o interpretador como lê toda a chamada da página “linearmente” so vai mostrar o conteudo que está entre as tags <BODY>, após carregar todos os seus arquivos javascript, pense agora no usuario com uma conexão mais lenta tentando acessar seu site e aparece uma página branca, entendeu? Isso sem levar em consideração que antigamente não havia um estudo minucioso sobre os browser quanto ao tratamento do carregamento desses arquivos, o que por sua vez faz compreender um dos problemas em se trabalhar com javascript.

<!DOCTYPE html>
<html> 
<head> 
<title>Carregamento JavaScript – Jeito Errado</title> 
<script src="http://teste1/scripts/lib/prototype.js"></script>
<script src="http://teste1/scripts/lib/scriptaculous.js"></script>
<script src=”http://teste1/global/scripts/browserdetect.js”></script&gt;
<script src=”http://teste1/global/scripts/apple_core.js”></script&gt;
<script src=”http://teste1/scripts/search_decorator.js”></script&gt;
<script src=”http://teste1/scripts/promomanager.js”></script&gt;
<script src=”http://images.apple.com/home/scripts/ticker.js”></script&gt;
<script src=”http://images.apple.com/home/scripts/promotracker.js”></script&gt;
</head> 
<body> 
<h1>Texto</h1> 
</body> 
</html>

Jeito Certo: Carregamento de todos os arquivos JS no final da página antes do fechamento da tag <BODY>, isso proporciona o carregamento do seu site por completo depois que seu site foi carregado, o browser faz o tratamento para fazer a chamada para todos os arquivos externos do JavaScript, irei abordar depois sobre como os browser funcionam no carregamento de arquivos para modelo Serial e modelo Paralelo , suma importância entender esses conceitos!

<!DOCTYPE html>
<html>
<head>
<title>Carregamento JavaScript - Jeito Certo</title>
</head>
<body>
<h1>Texto</h1>
<script src=”http://images.apple.com/global/scripts/lib/prototype.js”></script&gt;
<script src=”http://images.apple.com/global/scripts/lib/scriptaculous.js”></script&gt;
<script src=”http://images.apple.com/global/scripts/browserdetect.js”></script&gt;
<script src=”http://images.apple.com/global/scripts/apple_core.js”></script&gt;
<script src=”http://images.apple.com/global/scripts/search_decorator.js”></script&gt;
<script src=”http://images.apple.com/global/scripts/promomanager.js”></script&gt;
<script src=”http://images.apple.com/home/scripts/ticker.js”></script&gt;
<script src=”http://images.apple.com/home/scripts/promotracker.js”></script&gt;
</body>
</html>

A internet evoluiu bastante nesses últimos 15 anos, juntamente com os browsers ainda mais depois que a Google lançou o Chrome, digamos que através disso está ocorrendo um “padrão” de como os sites devem ser carregados, entretanto ainda há muito a ser melhorado pois dependendo da tecnologia que você está utilizando seu site pode ser interpretado de maneira diferente em cada browser, entramos em outro tópico que seria Cross-Browser.

Uma abordagem interessante que o Nicholas Zakas @slicknetcoloca em seu livro é que quando eles perceberam no Yahoo o problema do fluxo de carregamento dos arquivos e o tempo de resposta para o usuario ao requisitar uma página, adotando essa abordagem de inserir as tags <script> antes do fechamento da tag body, ao invés de fazer essa chamada como no exemplo abaixo:

Modelo 1:  Chamando todos os scripts
<script src="http://images.apple.com/global/scripts/browserdetect.js"></script> <script src="http://images.apple.com/global/scripts/apple_core.js"></script> <script src="http://images.apple.com/global/scripts/search_decorator.js"></script>

Modelo 2: Chamando todos os scripts de maneira resumida.

<script src="http://images.apple.com/global/scripts/browserdetect.js"& "http://images.apple.com/global/scripts/apple_core.js" & "http://images.apple.com/global/scripts/search_decorator.js" />

Abordando de forma rápida como os navegadores faziam para executar os arquivos js no momento da leitura.

Modelo Paralelo e Modelo Serial

Modelo Serial: Ele realiza o carregamento do seu script na tag head, ele executava arquivos de forma isolada, executava o primeiro enquanto ele não finalizava ele não seguia para o próximo, agora pense se um desses arquivos estiver corrompido como iria ficar seu site? Abaixo está um pequeno desenho explicando o acesso de vários arquivos js.

Modelo Paralelo: Ele consegue carregar todos os arquivos ao mesmo tempo de forma independente não importando seu tamanho e não sendo necessário aguardar finalizar um para iniciar outro, com isso seu site estará mais rápido na requisição do cliente e não haverá quebras.

Carregando arquivos em Modo Paralelo

Carregando arquivos em Modo Paralelo

Lógico que para fazer esse recurso você pode utilizar uma biblioteca do javascript que chama head.js ela faz esse recurso de carregar todos os arquivos ao mesmo tempo ou então utilizar uma tag do HTML 5 que chama defer, bom em suma ficaria assim a chamada de seus arquivos com esse recurso.

Defer – Garante dependência ou seja para carregar um arquivo ele depende do outro, ou seja ele não termina seu carregamento enquanto não executar todos os arquivos que seu site depende, existe também outra tag do HTML5 que chama assync porém ele não garante essa dependência ou seja se você utilizar ele pode executar um arquivo e o outro não carregou por completo e ele não compreende isso e da status finalizado para o script que não finalizou.

Se você for escolher essas tags do HTML5 para trabalhar no Internet Explorer , devo ressaltar que há um conflito pois o browser da Microsoft ainda não está padronizado aceitando essas tags, como para tudo tem um jeito então pesquisando você pode utilizar como solução para o IE, o ScriptLoader ou então comentado acima head.js.

Mais informações:

https://developers.google.com/speed/articles/html5-performance?hl=pt-BR
http://headjs.com/
http://labjs.com/
http://novatec.com.br/livros/javascriptdesemp/capitulo9788575222416.pdf

Criando, Deletando e Excluindo Cookie – JavaScript

Cookie JS

Cookie em JavaScript

Vamos iniciar mais um artigo aqui no Descascando Pepinos, já aproveito a deixa e peço desculpas pela falta de tempo, compartilhar idéias e novos artigos, o blog ficou meio de canto mas pretendo colocar um artigo semanal.

Bom a proposta agora para as postagens de artigo será mais voltado para parte de desenvolvimento Frontend (Javascript, Jquery, Ajax, Flex, HTML5 e CSS3), anteriormente estava criando artigos para área de negócios, publicidade, marketing digital, page rank e afins, em suma não deixarei de postar sobre isto mas o foco agora será mais desenvolvimento, caso queira partilhar algum artigo ou mesmo sugerir mande aqui nos comentários ou por e-mail cristofer.sousa@gmail.com.

Bom vamos lá, hoje irei discutir sobre Cookies em JavaScript essa semana que passou estava com uma demanda da empresa e precisei reavaliar vários pontos de como implementa-lo e principalmente que existe uma ressalva que o Google Chrome faz para quem pretende trabalhar com Cookie via localhost.

Como esse artigo está estruturado:

  • Introdução – O que é um Cookie?
  • Como criar um Cookie em JavaScript?
    1. Criar
    2. Exibir
    3. Excluir
  • Caso de Uso – Exemplo
  • Google Chrome vs Cookies via localhost
  • Conclusão

Introdução – O que é um Cookie?

Bem antes de começar acho que é válido explicar do que se trata um Cookie, basicamente ele armazena os dados do usuário do momento que ele entrou no seu site e isso fica salvo no computador dele! Entendeu?

Bom ainda há dúvidas, você deve estar se questionando como assim salva os dados do usuário no computador dele? Qual o beneficio de salvar no computador dele se eu quero acessar essa informação para mim!?

Vamos por partes, primeiramente é preciso estar claro que Cookie é a troca de informações entre servidor web e o navegador(browser), a cada requisição que usuário faz no site, caso o mesmo esteja pré-configurado ele pode ser implantado no seu computador, o intuito disto é salvar algumas informações e futuramente caso o usuário faça novas visitas naquele determinado site ele vai tomar uma decisão.

Exemplo:O momento que o usuário entra no site, ele pede para o usuário se identificar com seu nome, se em algum dia o usuário retornar novamente para aquele site ele irá trazer uma mensagem de boa vindas para o usuário dizendo Olá, @NomeDoUsuario! Veja aqui no link isto implementado via javascript.

Antes de colocar a mão na massa é necessário que tenha alguns cuidados para implementar o seu Cookie, existem algumas regras que devem ser levadas em conta:

  • Cada domínio pode ter apenas 20 Cookies.
  • Tamanho máximo permitido por Cookie 4kB(4000 caracteres).
  • Cookies só podem ser lidos pelo seu próprio domínios

OBS: Se você tem um cookie no site da UOL somente domínio do UOL poderá ler, se tentarem através do site Terra ler esse cookie não irão conseguir.

Bem acredito que até aqui você já entendeu a finalidade do Cookie, para que serve e como podemos utiliza-lo em nossas aplicações, certo?


Make Cookie

Como criar um Cookie em JavaScript?

Vamos agora para a parte interessante que é a implementação, bom essa parte recomendo que saiba trabalhar com Funções(function) em JavaScript, elas serão de suma importância para seu aprendizado, aprender também a trabalhar com métodos do JavaScript como getTime(), getDate() e assim por diante.

Iremos criar 3 Functions:

Criar
function setCookie(name,exdays)    //função universal para criar cookie

var expires;

var date; 

var value;
date = new Date(); //  criando o COOKIE com a data atual
date.setTime(date.getTime()+(exdays*24*60*60*1000));
expires = date.toUTCString();
value = "TESTE123";
document.cookie = name+"="+value+"; expires="+expires+"; path=/";
}
Exibir
function getCookie()
{
var c_name = document.cookie; // listando o nome de todos os cookies
if(c_name!=undefined && c_name.length > 0) // verificando se o mesmo existe
{
var posCookie = c_name.indexOf(cookieSeuNome); // checando se existe o cookieSeuNome 
if (posCookie >= 0) //se existir o cookie mostra um alert no browser
{
alert("Cookie Existe!!!");
}
else
alert("Cookie não existe!!!");
}
Excluir
function eraseCookie(name)
{
setCookie(name,-1); // deletando o cookie encontrado a partir do mostraCookie
}


Caso de Uso – Exemplo

Vamos para uma aplicação real agora, vamos abordar o que foi aprendido até aqui, vamos supor o seguinte cenário:
Vamos criar um Cookie e dele desejamos armazenar apenas se o usuário veio de algum site(indicado), caso ele não tenha visto então ele não deverá ter esse Cookie. Qual o fator motivacional de implementarmos isto? Imagine que você possua um site e você quer saber se o seus parceiros estão realmente dando um retorno de válido para seu site, como fazer isto? Em modo geral você teria um relatório que exibiria tudo isto mas e se quisermos algo mais simples e prático?

Pensando de forma abstrata, para codificarmos, todo site(parceiro) deve conter esse cookie, quando o usuário acessar o site do parceiro será implantado esse cookie agora imagine que seu site é divulgado por 10 sites parceiros, como você irá saber qual foi o parceiro que gerou essa divulgação? Existe uma propriedade no JavaScript que chama Document.Referrer ela traz para nós o retorno da url que o usuário navegou no caso se ele veio de algum parceiro irá vir http://www.parceirox.com.br.

Também devemos pensar no seguinte escopo como vamos supor que temos 10 parceiros que fazem divulgação do seu site devemos armazenar isso em um vetor se o document.referrer for igual ao parceiro ele vai manter o cookie na maquina do usuário senão ele irá deleta-lo, no caso deletar pois podemos imaginar que ao passar de um determinado prazo algum parceiro pode deixar de fazer publicidade para seu site no caso é so você fazer uma comparação para avaliar se o array com os dominoios

Definição e Uso
A propriedade referrer retorna o URL do documento que carregou o documento atual.

Sintaxe
document.referrer


Como o artigo está muito longo irei colocar a parte prática de como manipular o cookie -caso de uso em um segundo artigo, este primeiro artigo deixaremos apenas como teoria de como funciona o Cookie em JS.

Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh

RIA Lab

Let’s talk about creating a sliding panel system that adjusts automatically to any screen size or rather any device resolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. So the app will run on any iOS, Android devices including computer browsers such as Google Chrome and Apple Safari. If you have seen a Sencha Touch app which uses a nested list or the sliding animated panels then you must have noticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demo will do the same. I have a very simple implementation of auto adjusting sliding panels.

In one of my previous tutorials I talked on the same Sliding Panel concept but the problem was that it did not auto adjust. If you check the demo on Google Chrome you will notice that only…

View original post mais 763 palavras

Loja Virtual Própria ou Alugada? Qual vale a pena?

Olá á todos, hoje irei abordar um assunto que muitos dos meus clientes tem dúvida, loja virtual qual a melhor alternativa? Sistema próprio? Lojas alugada? Qual é o custo disso?

Bem primeiramente acho que é pertinente você se questionar quanto você está disposto a investir em seu negocio online
Loja virtual sua demanda(produtos oferecidos) são itens de procura na internet para o consumidor? Seu preço é atrativo? Qual é o seu diferencial dos seus concorrentes?

Respondendo essas dúvidas iniciais você já pode traçar sua meta sobre qual loja virtual é mais indicada para o seu perfil,  mas veja nada impede você de fazer uma transição no futuro, como iniciar com um sistema alugado de inicio e depois partir para um sistema próprio, muitas corporações fazem isso.

Pesquisando na internet encontrei algumas empresas que oferecem um sistema de e-commerce com domínio incluso (.com, .com.br) com opção para cadastrar até 200 produtos, e-mail exclusivo com taxas mensais a partir de R$30,00 a R$ 250,00.

Em suma o aluguel dessas lojas virtuais o tipo de serviço que elas disponibilizam seria:

  • A complexidade é baixa
  • Não se exige exclusividade
  • A necessidade de integração com outras ferramentas é baixa
  • A urgência para o lançamento é muito alta
  • E sua estratégia de mercado é relativamente baixa

Mas o que muda de uma empresa para outra ?  O sistema  não é o mesmo? Afinal o proposito é anunciar seus produtos e vender na internet .  Bom primeiramente você deve analisar o suporte que essa empresa irá prestar para você, é viável analisar se a loja oferece um sistema de customização de layout (sempre é bem nulo esse serviço), se informar se a empresa possui inserção e otimização de SEO,  recursos de inclusão com redes sociais, opções de inserção de várias bandeiras de pagamentos como PagSeguro, BCash, PayPall, MoIP entre outras, inclusão do seu site em sites leilões como Mercado Livre, Toda Oferta ou mesmo agregador de preços como o Buscapé, Shopping Uol e Terra Ofertas.

Bom até aqui, você percebe que possuir uma loja virtual é necessário ter um pouco de conhecimento, pois para seu negocio prosperar além de muito trabalho você precisa apostar nos números certos, isso não é uma loteria, é seu investimento, o prejuízo caso ocorra tem que ser minimo.  Pense comigo você tem um funcionário para atender seus clientes você quer que ele transmita a imagem que você vê da sua empresa uma boa aceitação e ninguém melhor que você para oferecer o seu serviço para seu cliente ninguém conhece isso melhor que você, mas existem diversas formas de abordar o seu cliente e de ter a linguagem correta para isso afinal cada cliente é único o produto que você oferece por R$ 10.00 é o mesmo que o concorrente oferece por R$50,00, sabendo isso você entende o porquê  de haver tantas empresas oferecendo lojas virtuais com preços diferenciados?

Vimos todos os impasses que temos para analisar qual sistema de e-commerce alugar pelo menos os pontos chaves, agora vamos analisar o sistema próprio, bem com esse sistema próprio você tem vários recursos, uma loja virtual desenvolvida para a sua necessidade, linguagem e recursos visuais que você pode passar para os desenvolvedores  no momento da criação o que viabiliza muito no fato de sua loja virtual ser única.
Ok, mas e quanto ao preço disso?

  • Custo fixo do sistema: R$ 700,00 (no mínimo)
  • Custo de locação de servidor e link em Data Center: R$ 700,00 (no minimo)
  • Custo de um firewall bem básico: R$ 800,00
  • Certificado SSL: R$ 100,00
  • Backup: R$ 500,00
  • CUSTO TOTAL INICIAL: R$ 2.800,00
  • Custo fixo mensal: R$ 700,00 do datacenter

Não estou considerando, que você necessitará periodicamente fazer manutenções no seu sistema, contratar um desenvolvedor para fazer o ajustes necessários. Hora de desenvolvedor é em torno de R$ 150,00.


Agora, uma sugestão que acho pertinente compartilhar com você pequeno e médio empresário,  de inicio é pertinente por conta do custo alugar uma loja virtual que ofereça um serviço otimizado conforme mencionei acima, recomendo que tenha um profissional na sua empresa que seja no minimo um web designer pois a parte visual do seu site e a criação de conteúdo e algumas excentricidades que venham ao ocorrer durante a vida útil do seu e-commerce ele consegue resolver, o salário base de um profissional da área é em torno de R$1200,00 a  R$2000,00 (depende da região) ou uma outra solução é contratar um freelancer que possa estar empenhado em fazer sua loja virtual funcionar trazer bons resultados motive ele informando que embora não seja um profissional CLT da sua empresa ele pode ganhar uma comissão conforme os resultados das vendas sejam expressivos na sua receita isso com certeza irá fazer ele criar uma atenção maior para sua empresa na hora de trabalhar, hoje por conta da web 2.0 existem muitos freelancer e esse tipo de profissional no Brasil se encontra em todo lugar acaba compensando muito para as empresas ter um profissional indiretamente ligado a empresa, em breve farei uma coluna sobre eles.

Caso tenha alguma dúvida mais sobre qual a solução de e-commerce ideal para sua empresa  pode me contatar terei o prazer em ajuda-lo e se você tem algum ponto que acha pertinente incluir , compartilhe conosco suas experiências !
Até a próxima =) .

Você sabe aumentar sua base de fãs no Facebook?

Como aumentar o número de fãs nas sua FanPage!

Como aumentar o número de fãs da sua página no Facebook. Fan Pages popularesOlá, amigos faz tempo que não escrevo me desculpo mas estou tendo bastante trabalho aqui com mídias sociais nas empresas, bem , fazendo algumas consultorias nas empresas a principal pergunta é “Como faço para Aumentar meu número de fãs?”  Existe algum macete? Qual é a a melhor forma de conquistar isso?

Bem, primeiramente depois que foi criado uma Fan Page para sua empresa no Facebook, o grande desafio passa a ser como fazer crescer a sua base de fãs. É o desafio do Like. É através do Curtir que as pessoas expressam sua simpatia e aprovação pela sua marca, portanto, é essencial que você crie ações que visem aumentar a sua base de fãs.

Afinal, uma das funções da sua página no Facebook é a de mostrar como as pessoas confiam na sua marca, serviços e produtos, e o termômetro disso é o número de fãs. Evidentemente essa não é a única métrica na análise de desempenho de uma Fan Page, mas em um primeiro contato, é claro que isso fala, e muito, ao consumidor. Além do mais, um número elevado de fãs, certamente irá influenciar positivamente o seu Edge Rank.

Futuramente estarei em um próximo artigo explicando como utilizar o Edge Rank e como entender ele perfeitamente.

Recomendo os artigos abaixo para quem está começando a trabalhar com Mídias Sociais:

Vejamos então algumas ações que irão ajudar a sua empresa a aumentar o número de fãs da sua página.

1 – Incorpore imediatamente o botão Like no seu site

Provocar a ação é essencial e nada melhor do que o botão Curtir para incentivar essa ação. Coloque esse botão no site da empresa, sempre em uma posição de aprovação, ou seja, ao final de uma apresentação. O usuário do Facebook tem essa característica, ele somente Curte a sua página após conhecer detalhadamente o conteúdo. O botão Curtir no topo da página ou post no blog não é tão eficiente assim.

2 – Seja o primeiro a Curtir

Comece o trabalho de divulgação pelo seu próprio perfil no Facebook. Curta sua página e aproveite a viralidade da sua rede de amigos para incrementar seu número de fãs. Peça a opinião de seus amigos e convide-os a dar um Like.

3 – Convide sua base de e-mails para Curtir sua página no Facebook

Uma forma interessante e válida para aumentar a sua base de fãs é enviar uma newsletter anunciando o lançamento ou reformulação da sua Fan Page e convidando a sua base de e-mails a Curtir a página.

4 – Incorpore o botão Curtir em sua template de e-mail

Providencie um lugar de destaque na template de e-mail usada no dia-a-dia da sua empresa. Lembre de forma indireta a seus contatos que você tem uma presença no Facebook. Uma boa opção é incorporar o botão ou um link na assinatura de e-mail. Torne isso um padrão para toda a empresa e colaboradores. Esse é um detalhe muitas vezes negligenciado nas empresas.

5 – Coloque um ícone em suas newsletter

Crie um gancho entre o seus boletins informativos e o Facebook colocando um ícone em sua newsletter. Muitas vezes, as pessoas ao lerem algo interessante em sua newsletter querem repassar isso para seus amigos nas redes sociais e por isso você deve facilitar essa ação inserindo essa solução no corpo dos seus informativos.

6 – Crie promoções exclusivas em sua Fan Page

Crie promoções onde apenas os fãs da sua página podem ser beneficiados. Existem aplicativos que permitem esse filtro de usuários. Os que não são Fãs tem acesso a um conteúdo, já os que já Curtiram a página tem acesso a um conteúdo diferenciado.

7 – Divulgue a página através de Facebook Ads

Já que sua empresa está no Facebook a negócios, que tal começar a usar o Facebook Ads com mais frequência. Comece por divulgar sua página de Fãs com um anúncio bem estruturado e positivo. Incentive os usuários a Curtirem a sua página.

8 – Crie links para sua página de Fãs no seu site

As páginas de fãs do Facebook tem um ótimo potencial para SEO. Por isso, vale a pena ajudar no link building da página incluindo links para ela em seu site, blog e outras fontes de publicação na web. Para aumentar essa influência, certifique-se que estes links tenham Do Follow.

9 – Dê incentivos para seus fãs espalharem a sua mensagem

Existem dois tipos de pessoas que poderão ajudá-lo a divulgar a Fan Page da sua empresa: quem vai fazê-lo de forma altruísta, porque eles acreditam na mensagem, e aqueles que irá fazê-lo em troca de uma recompensa.
Não há nada de errado com o uso de incentivos para recompensar as pessoas para espalhar a sua mensagem, e que é igualmente verdade que a construção de uma base de fãs Facebook. Várias empresa fazem isso através de sorteios, concursos ou brindes. Essa é uma boa idéia a seguir.

10- Dê vida a sua Fan Page

Seja interativo com seu público. Não se esqueça que sua popularidade está ligada diretamente ao retorno que você oferece aos seus fãs. O coração de cada página do Facebook é o Mural. É onde as conversas entre uma empresa e seus fãs ocorrem. Sua empresa deve incentivar o diálogo com os fãs na forma de Likes, comentários e conteúdo gerado pelo usuário, como mensagens no Mural, vídeos e fotos. Engajamento com os fãs estimula a opção Curtir porque cada engajamento leva a conteúdo que está sendo postado para o Mural, onde seus amigos podem ver. Uma base de fãs bem ativa leva a um forte crescimento orgânico.

Bem, esses passos são os principais para manter sua FanPage com “vida” e como conquistar seus fãs,  existem outros processos para conquistar isso que alguns fazem que o sorteio de brindes, porém depende muito de qual é o intuito de sua fanpage lembre-se , auto-promover pode lhe render algumas dores de cabeça se o trabalho não for bem executado, pense no caso da Visou , sempre é relevante ter um analista de mídias sociais e principalmente saiba delegar as funções e cargos, futuramente estarei evidenciando  como fazer isso de forma prática, é isso espero que tenham gostado do artigo,quem tiver alguma dica a mais e quiser compartilhar, coloque aí embaixo para nós e principalmente dê um compartilhar na sua rede agradeço muito, até a próxima !
Veja mais:  http://www.cursodeecommerce.com.br/blog/aumentar-numero-fas-facebook/#ixzz27FBv0m6V

Vamos montar uma FanPage?

Fan PageOlá, á todos hoje quero falar sobre um assunto que martela bastante no Marketing Digital que é a inserção da FanPage de uma empresa no Facebook, existem pontos fortes em possuir esse recurso seja ele para se auto-promover ou para categorizar algo em especifico.

Mas trocando em miúdos o que é uma Fan Page?

Uma Fan Page é uma interface específica para a divulgação de uma empresa, marca, banda, etc é como se fosse um “mini-site” funcionando dentro do facebook .

Sua FanPage pode ser seguida pelos usuários que estão interessados em uma determinada marca ou empresa, com isso sempre que você postar qualquer conteúdo na sua fanpage obrigatoriamente os usuários que curtiram sua fanpage irão receber esse conteúdo primeiramente.

Isso acaba acarretando em uma estratégia de marketing digital eficiente e de baixo custo*.

*Lembrando que fanpage a criação é gratuita, o facebook não cobra para utilizar essa ferramenta.

Como qualquer outra mídia social, o sucesso da Fan Page depende do engajamento dos usuários perante a marca ou empresa. Isso depende de um bom planejamento em mídias sociais realizado com muita competência.

Posso dizer que a mesma se trata de um “mini-site” pelos seguintes aspectos toda fan-page possui: 

          -Apresentação
          -Fotos
          -Contato

Agora  por que fazer uma fan page para sua empresa, organização ou banda?

Você está criando um vinculo social entre você e seus usuários, logo com isso você está rompendo a barreira entre espaço vs distância,  através deste artificio pessoas poderão relacionar você ao interesse de outras pessoas das quais não possui nenhuma ligação ainda, lógico que isso depende do seu nível de interatividade com seu público.

Ex: Casa de Show,  todos que estiverem na Fanpage Casa de Show e você lançar uma promoção ou uma enquete elas estarão recebendo isso e por sua vez essas pessoas podem julgar que outras pessoas também irão gostar daquilo e vão naturalmente convidar elas através do comando @nomedapessoa com isso sua rede terá mais contatos e pessoas interessadas ou seja é um marketing que você fez gratuitamente onde as pessoas o ajudaram para sua “auto-promoção” .  (legal né?!)

Sucesso das FanPage

Bom como tudo na vida, a chave do sucesso depende exclusivamente do seu comprometimento e na FanPage não é diferente, existem algumas dicas que irei dar agora de como ter maior visibilidade e conquistar números de fans e consequentemente possuir visitantes diários para comentar e publicar afinal uma rede social só existe se houver movimentação de seus usuários.

1– Crie uma fan page tendo como base uma pesquisa prévia do ambiente onde você quer se destacar, esse foco é fundamental, para não errar o público nem o conteúdo que você ira publicar.

2 – Como o ambiente no Facebook é mais flexível e diferenciado  adapte a fan page sua empresa para este formato.

Caso você seja um dos muitos que teve como primeiro passo crie um perfil no facebook  para sua empresa ao invés de uma fan page, você poderá mudar o perfil criado para uma página no Facebook.

3 – Cite outros perfis na sua fan page

Quando for escrever sobre alguma empresa, sobre alguém ou citar algum perfil na sua fan page do Facebook coloque o símbolo de arroba  mais o nome do perfil,  para que essa pessoa seja notificada sobre o post que você a citou.

Esse fator funciona como a menção do Twitter, fazendo isso será criado um link para o perfil citado e você poderá partilhar informações com outras pessoas, dar créditos a artigos alheios, fazer indicações, enfim, tudo que você julgue necessário que um outro perfil saiba que está sendo mencionado.

4 – Use o chat como canal de relacionamento

Seja uma empresa que presta suporte para seu público e dispõem de chat para esse setor. Por exemplo, ele pode ser usado caso uma pessoa esteja na fila para o atendimento ela poderá te procurar pelo Facebook, como forma de encurtar seu atendimento. Assim, devem-se ter objetivos claros da utilidade da ferramenta e estar pronto para direcionar a pessoa para o local onde o que ela deseja seja solucionado.

5 – Use o Botão Curtir e dê a possibilidade de testar a sua fan page. 

Deixe um botão de curtir no seu site para dar a possibilidade do visitante curtir seu produto, artigo, promoção. Se ele gostar vai espalhar uma informação que o agradou e que deseja repassar para seus amigos.

Você deverá analisar o melhor lugar para posicionar esse botão, para isso faça testes e escolha o que tiver um melhor desempenho.

6 –Fãs querem interação e Participação

Assim como em qualquer outra mídia social a interação é o foco das ações, então incentive e participe de discussões de assuntos relacionados ao seu negócio. E o mais importante: seja ativo e mantenha sua página sempre atualizada.

7 – Integração é a palavra chave para destacar sua fan page.

Como a Internet estabelece uma integração de conteúdos extraordinária é muito importante que todas as suas ações em mídia digital se comuniquem e uma leve informação sobre a outra. Quanto maior a presença e integração da sua fan page as outras redes de relacionamento maior a possibilidade da sua marca ganhar expressão e novos fãs, é uma reação em cadeia passando de uma rede para outra

8 –  Cuidados com as Publicações:

Publique informações intercalando os dias de três em três dias, fazendo isso sua fanpage não fica com uma imagem de taxativa e as pessoas pelo fato de estar em uma rede social não querem ter pessoas perturbando todo momento, elas precisam saber que você existe mas que aquele contato que você fez é como um sinal de amizade.

9 –  Conteúdo diversificado:

Poste videos, imagens e assuntos relacionados as coisas que você gosta, as pessoas se identificam com isso e acabam se aproximando bem mais de você e interligando com outros usuários,  não faça uma ditadura na sua fanpage, como colocar apenas conteúdo que é da sua empresa, exemplo você vende camisetas mas não vende adornos(chapeús,lenços, correntes, óculos e etc) coloque fotos de um modelo utilizando um manequim completo e adiciona um @parceiros  isso irá fazer referencia para as outras lojas que ajudou a montar o manequim, afinal parceria faz sucesso e é melhor fazer parte de 10 redes diferente do que apenas uma não é mesmo.😉

10 – Respeite o comportamento e a opinião de seu usuário:

Cada individuo possui uma cultura e um grau de esclarecimento, discutir com seu usuário pela sua fanpage além de prejudicar sua imagem na rede social pode se tornar um marketing negativo e todos os seus fãs podem não gostar do que estão vendo, tente sempre dialogar, ache a melhor solução e seja transparente, jamais minta nas informações postadas.

Tenho mais uma infinidade de dicas que posso passar por aqui, mais essas 10 regrinhas vão dar um bom “up” na sua rede,  so para ressaltar a sua fanpage também pode ser customizada idêntico a seu perfil, da qual ter uma capa , foto do perfil com isso terá a sua “cara” e as pessoas saberão que estão no lugar correto.

Logo Facebook FanPageE aproveitando o artigo, entre na minha fanpage e fique a vontade para falar comigo por lá, lembrando também que a fanpage possui recursos de instalação de aplicativos(youtube, mapas entre outros) isso tudo faz enriquecer ainda mais sua fanpage da qual o usuário fica navegando por horas se o conteúdo for interessante.

E também tem os Insights que é uma métrica que o facebook faz para contabilizar o alcance de suas postagem, dando uma vaga lembrança ao google analytics em breve falo detalhadamente como ela funciona, em resumo seria basicamente, o Facebook pega todos os usuários que são fãs de sua página e faz um simples somatório, dando o alcance esperado caso uma ação obtenha 100% de êxito. Quanto mais fãs, maior o alcance de amigos que teremos.

Bom é isso, já montou sua fanpage? Se não clica aqui ! Tem dúvidas?Deixe aqui no mural  que respondo, não esqueça de Compartilhar o Blog!!  Valeuu!!!   =)