As fanpages do Facebook, que agora estão utilizando oficialmente o formato de timeline, oferecem uma série de recursos que, se bem explorados, podem atrair mais público e maximizar a visibilidade de uma marca ou site na internet.
As abas customizadas, já conhecidas pelos administradores de fanpages, ganharam melhorias significativas nessa migração das fanpages para o formato Timeline: agora temos 810px de largura para trabalharmos nosso conteúdo (contra os antigos 520px), e a possibilidade de usarmos uma imagem de 117x74px, definida por nós, para dar um maior destaque a essas apps na timeline - antes só tínhamos a opção de um pequeno ícone, que era definido apenas nas configurações da aplicação pelo desenvolvedor, e não pelo dono da fanpage. Para maiores informações sobre as novidades das fanpages timeline, veja nosso último post: FanPages Timeline no Facebook - visão geral e dicas de customização.
Neste artigo você acompanhará um tutorial mostrando como criar essas abas customizadas, ou timeline apps, de maneira a explorar melhor os recursos oferecidos pela sua fanpage. É preciso um conhecimento básico de html (saber o que é um iframe e como disponibilizar um conteúdo online em servidor próprio) para a execução do passo a passo.
1. Preparação do conteúdo
A primeira parte, antes de mais nada, é definir e preparar o conteúdo que você deseja disponibilizar na aba customizada. Ele será exibido com um iframe, por isso você precisa ter um site onde disponibilizar esse conteúdo online. A título de exemplo, criarei uma página no entrebits com um simples "Hello World", que será o conteúdo da app.
Ao definir o layout do conteúdo, lembre que o espaço disponível é de 810px.
Agora que o conteúdo já está pronto, vamos criar o aplicativo no Facebook.
2. Criação do aplicativo
Acesse https://developers.facebook.com/apps para criar a aplicação. Clique no botão "Criar novo Aplicativo". Uma janela aparecerá solicitando duas informações: o nome do aplicativo e o namespace. O namespace é o identificador da app, deve ser único para cada aplicação.
Depois de definir o nome e o namespace, clique em "Continuar". Uma janela com captcha aparecerá, depois de digitar você será direcionado para a página de edição do aplicativo.
No parte superior, você encontra as opções para definir o ícone e a imagem maior, que será exibida por padrão ao adicionar o aplicativo à sua fanpage. Também estão nesse box o APP ID - que você precisará no final para adicionar o app à fanpage - e a APP SECRET, que você precisará caso sua aplicação faça requisições à API do Facebook (por exemplo, se quiser buscar dados a mais do usuário, ou publicar em sua timeline, ou exibir um conteúdo específico apenas caso o usuário tenha curtido a página). Para mais informações sobre desenvolvimento com a API do Facebook, leia esse post: Login de usuários via Facebook . No nosso caso, não utilizaremos essas requisições, pois se trata de um conteúdo estático.
Agora você precisa definir a url do seu conteúdo. Mais abaixo, você encontra uma caixa com as opções para sua aplicação. Você deve clicar na opção "Page Tab" e preencher como mostrado abaixo (trocando, é claro, para os seus dados / dados do seu conteúdo):
Não esqueça de marcar a opção "Wide (810px)", pois o que vem marcado por padrão é a "Narrow". Note que no campo "secure page url" coloquei o https em vez do http. Ter o https é um requerimento do Facebook desde setembro de 2011; isso é uma configuração do servidor, você precisa verificar antes de mais nada se o seu servidor suporta conexão segura por https.
Ter o https é obrigatório?
Aparentemente, não. Porém, os usuários que acessarem o Facebook através de https não conseguirão acessar a sua aplicação. O Facebook afirma que é um requerimento desde setembro de 2011, porém, se você criar a aplicação e definir apenas a url normal, ele deixa passar, e funciona normalmente se você estiver navegando em conexão normal (eu testei).
3. Adicionando o aplicativo à sua fanpage
Agora que seu aplicativo está criado e configurado, você já pode adicioná-lo à sua fanpage.
Você deve acessar o seguinte link (troque as informações "YOUR_APP" pelo id da sua app - encontrado no box onde tem o ícone e a miniatura e a secret key - e o "YOUR_URL" pela url definida como o conteúdo da custom tab. Se você colocar uma url diferente, não vai funcionar)
Ao acessar o link, será exibida a tela para escolher em qual fanpage você deseja adicionar o aplicativo. Escolha a fanpage, clique em "adicionar aba da página" e pronto.
A aba/aplicativo já estará visível na fanpage:
Espero que tenha ajudado! :) Se tiverem dúvidas, podem perguntar nos comentários.
Tags: facebook, fanpages, abas customizadas, timeline apps, tutorial
Nesta tarde de quinta-feira o Google anunciou um novo serviço na área de Marketing de Pesquisas: Google Customer Surveys.
Com a costante demanda por oferecer serviços e produtos mais personalizados aos usuários, trabalhando com mercados de nichos bem definidos, as pesquisas de marketing são cada vez mais importantes para compreender melhor o público alvo e suas preferências.
O novo serviço do Google tem por objetivo oferecer uma nova forma de rentabilização para publishers (ótima notícia pra quem já trabalha com AdSense), uma alternativa para obter retorno em conteúdos de qualidade que não são distribuídos abertamente (que requerem algum pagamento ou ação do usuário, como cadastro).
A idéia é a seguinte: quando o usuário for acessar o conteúdo, ter uma opção a mais, que seria responder a uma pesquisa anônima. Abaixo, uma amostra de como se apresentaria a pesquisa:
O vídeo de apresentação:
Por enquanto, o serviço aparentemente está em fase de testes, em utilização apenas por alguns sites. Mas no pronunciamento do Google em seu blog oficial eles disponibilizaram um link para os publishers que têm interesse em utilizar o serviço se inscreverem. Eu já fiz a minha inscrição :)
O mês de março trouxe uma grande novidade para quem administra fan pages no Facebook: as novas fanpages no formato Timeline, similares ao novo perfil.
O grande "porém" é que teríamos de migrar para o novo formato de todo jeito, pois no dia 30 (amanhã) a migração será realizada automaticamente pelo Facebook. Como já estamos em cima desse prazo e sei que muita gente ainda não mudou para o novo formato (inclusive grandes marcas, pelo que pesquisei hoje), ou não personalizou como gostaria, resolvi escrever esse post pra dar uma ajudinha.
Abaixo um print de uma das fanpages que administro, após customização:
Então, quais foram as principais mudanças na nova FanPage Timeline?
1. Imagem de Capa: já conhecida por causa dos perfis de usuário, essa imagem é um ótimo atrativo visual pra quem acessa a sua fanpage. Mas não vá pensando que pode colocar qualquer coisa nessa imagem; o Facebook impôs algumas regras que devem ser observadas:
A imagem não deve ser usada comercialmente; para anunciar descontos, promoções, ou frases apelativas do tipo "compre já", "visite nosso site"
Informações que devem estar no "Sobre" - telefone, email, endereço do site, etc - não podem ser colocadas na imagem
"Curta nossa página" e similares também não pode!
Abaixo você confere um diagrama com as dimensões da imagem de capa, assim fica bem mais fácil criar algo criativo e personalizado.
2. Aplicativos (antigas abas): O nome "abas" perdeu o sentido há tempos, e por isso agora convencionou-se o termo "timeline apps". Elas ficam no canto direito, abaixo da imagem de capa. Você pode adicionar até 12 aplicativos, porém apenas 3 são exibidos por padrão fora o "Fotos", que é fixo (os outros só aparecem quando o usuário clica na setinha ao lado). O "Opções Curtir" você pode mexer, se quiser dar lugar a outro aplicativo.
Essas "novas abas" trouxeram um benefício inegável comparando com o antigo formato da fanpage: a imagem de visualização. Antes, apenas um ícone era exibido, e agora temos a opção de colocar em destaque um thumbnail de 111x74, que corresponde ao thumb da aplicação/custom tab que foi adicionada - mas você pode alterar essas imagens como quiser. Para fazer isso, clique na setinha ao lado das aplicações, para expandir a visualização. Ao passar o mouse sobre a app que você quer modificar, vai aparecer um lápis. Clique, e acesse a opção "Editar Configurações". Aí você poderá mudar a miniatura exibida e o texto.
A área / canvas dos aplicativos (abas) também está maior: agora são 810px (antes eram apenas 520px), bem mais espaço pra você organizar o seu conteúdo personalizado.
3. Landing Page: Não tem mais. As antigas "páginas de aterrissagem" eram um recurso bastante utilizado, que direcionava os usuários para uma página (aplicativo/custom tab) específico ao entrar na fanpage. Muita gente achou isso um ponto bem negativo, mas realmente não teria mais o mesmo retorno com esse formato de fanpage, já que as novas abas, quando abertas, ocultam a imagem de capa e outras informações importantes que devem ser exibidas logo de cara quando alguém acessa sua fanpage pela primeira vez. Mas você ainda pode usar links diretos para os aplicativos/abas da sua fanpage se quiser.
4. Fluxo de Informações / atividades: você já deve estar acostumado a esse novo formato de fluxo de informações, que já é usado nos perfis de usuários. As atividades da fanpage são exibidas em caixas organizadas em duas colunas, mas você pode destacar uma atividade e assim ela ocupará o espaço de duas colunas. Isso é legal pra usar com imagens que você deseja colocar em destaque.
Para colocar uma atividade em destaque, passe o mouse por cima que aparecerá no canto direito uma estrela e um lápis; basta clicar na estrela. Para desfazer é só clicar novamente.
5. Marcos (eventos): similar ao que existe nas timelines dos usuários, nas fanpages também é possível criar "marcos", que são eventos do passado, como por exemplo a fundação da empresa ou algo do tipo. A opção está disponível na caixa de postagem, é a última opção no canto direito, ao lado do "Perguntar". Na imagem acima você pode ver como ele é exibido.
São muitas mudanças, mas como já estamos habituados às timelines pessoais, foi mais fácil a migração.
Inspirações
Agora, para se inspirar, 4 fanpages que são referência:
Eu já tinha ouvido falar desses tais cartões de visita do Facebook, mas ainda não tinha encontrado aonde / como fazê-los, até ontem.
O serviço é oferecido através de uma parceria do Facebook com a MOO, empresa inglesa de impressão que fornece serviços diversos de impressão - cartões de visita, minicards, adesivos, dentre outros produtos profissionais.
Nessa parceria, você tem direito a 50 cartões gratuitamente - eles são gerados a partir da sua Timeline e você pode editar os textos e informações de contato com bastante facilidade. Você só precisará pagar o frete internacional - £2.75 (cerca de 8 reais). O pagamento é feito através de cartão de crédito internacional.
Ontem (22 de março) pedi os meus, e a previsão de entrega é para o dia 27 de abril - pouco mais de um mês. Quando chegar eu atualizo esse post com as fotos dos cartões :)
Vamos ao passo a passo:
Acesse a sua linha de tempo do Facebook (seu perfil) e clique no botão "Atualizar Informações", que fica do lado direito junto ao "Registro de Atividades", logo abaixo da imagem de capa.
Na página das suas informações, procure pela caixa "Informações de contato", do lado direito logo abaixo das informações básicas. Passe o mouse sobre o ícone do cartãozinho como mostrado na imagem abaixo, e um pop-up vai aparecer com o link para solicitar a impressão dos cartões. Clique em "imprimir cartões".
Depois de clicar no link, você deverá autorizar a app do MOO, pois ela precisa buscar suas informações (info de contato e imagens) do Facebook. Após autorizar, você será redirecionado para a página do MOO, e ele já vai mostrar os layouts dos seus cartões pra você editar. Ele pega até 50 imagens suas de capa e usa nos layouts dos cartões - você pode ter até 50 diferentes cartões (muda só a imagem de fundo, que no caso é a sua imagem de capa do Facebook).
Como eu só tinha duas imagens no meu álbum de imagens de capa, só tive dois layouts disponíveis. Acabei optando por deixar apenas o principal, da minha imagem de capa atual. Pra fazer isso basta excluir os outros layouts que aparecem (no botão "remove this design" ao lado do layout que você quer excluir).
Agora é só editar os cartões, seguindo as instruções do próprio site. É bem fácil e intuitivo. Para virar e ver a parte de trás dos cartões, clique no botão "flip cards over", logo abaixo do cartão.
Na parte de trás você pode colocar um "quote" (frase) - acho que ele pega do seu Facebook, mas como eu não tenho nenhuma ele coloca uma padrão pra você editar. Também tem os contatos na parte inferior (endereço do seu profile no Facebook, celular e email). Todas essas informações são editáveis.
Depois de editar tudo e se certificar que está tudo certinho e sem nenhum erro de digitação, clique no botão "Next Step".
Na parte superior vai aparecer um checklist pra te ajudar a checar se está tudo correto, depois de marcar todas as opções e clicar em "Next" você vai ser direcionado para finalizar o pedido, passando suas informações de contato, entrega e o cartão (para pagamento do frete).
É bem fácil e intuitivo.
Dica: antes de fazer, deixe seu perfil Timeline bem organizadinho, com uma foto legal que você quer que seja usada nos cartões. Também é bom já ter configurado um username pra ter seu endereço personalizado no Facebook (tipo facebook.com/seulogin). Fica bem mais fácil quando você entregar o cartão, para que a pessoa acesse o seu Facebook.
Tags: facebook, cartões de visita, Moo, passo a passo, gratuito
Nos últimos dias, precisei configurar um servidor para rodar uma aplicação web que estou desenvolvendo e necessitava fazer com que, caso o meu servlet container (estou utilizando o Jetty) parasse de funcionar, um outro processo levantasse o Jetty. Isso é um problema bastante comum e deve existir N maneiras de se resolver. Como sou iniciante em linux, scripts, etc... Resolvi criar um shell script para resolver este problema e com isso aprender um pouco como funcionam as coisas no linux.
Os assuntos abordados para resolver esse problema são :
Agendamento de Tarefas no linux
Shell script
Shell script
Shell script é uma linguagem de script usada em vários sistemas operativos (operacionais), com diferentes dialetos, dependendo do interpretador de comandos utilizado. Um exemplo de interpretador de comandos é o bash, usado na grande maioria das distribuições GNU/Linux. (wikipedia)
Para identificar que o arquivo é um script é necessário que a linha inicial seja:
#!/bin/bash
Precisamos também setar a permissão para executar script:
$ chmod +x arquivo
Para executar o script basta digitar "./nome_do_script.sh".
Exemplo:
Crie um arquivo chamado "teste.sh" com o conteúdo abaixo, configure sua permissão e execute-o.
#!/bin/bash
echo Olá mundo!
Agora vamos ao nosso script para deixar o Jetty sempre em execução:
Script:
O script funciona da seguinte maneira:
Verifica se tem algum processo "java" rodando que contenha na sua linha de comando "jetty.port=9090", caso exista, o script não faz mas nada, caso não exista, ele irá verificar se existe uma pasta chamada "logs", se não existir, ela será criada e dentro dela conterá um arquivo de log informando quando ocorreu do Jetty não está rodando e armazena o "load average" do servidor naquele momento, logo após, executa o serviço do jetty novamente.
OBS: O load average vai me indicar superficialmente como estava o status do servidor no momento em que o Jetty caiu.
Agora, como fazer para agendar esse script para ser executado a cada X intervalo de tempo ?
Simples, adicionamos no serviço de agendamento do linux (cron) um agendamento para esse script.
Entendendo uma expressão cron
* * * * * [usuario] [comando]
Semântica dos valores de uma expressão cron:
- Minutos: Números de 0 a 59. - Horas: Números de 0 a 23. - Dias do mês: Números de 0 a 31. - Mês: Números de 1 a 12. - Dias da semana: Números de 0 a 7. - Usuário: Usuário que irá executar o comando (não é necessário especificá-lo se o arquivo do próprio usuário for usado). - Comando: Tarefa que será executada.
Nosso exemplo:
*/5 * * * * /caminho_do_seu_script/uptime.sh
Neste exemplo, o script de uptime será executado a cada 5 minutos.
Os agendamentos para seu usuário fica guardados em uma tabela chamada "crontab", para você poder adicionar um agendamento, apenas edite este arquivo adicionando o seu agendamento, para isto execute o comando abaixo:
$ crontab -e
Caso não exista agendamentos para o seu usuário, esse comando irá cria-ló. Se desejar ver os arquivos de agendamentos de cada usuário, você terá que logar como root e ir na pasta "/var/spool/cron/usuario".
Caso você deseje ver todos os agendamentos para seu usuário, digite:
No início de 2011 comprei um NAS modelo NS-K330 no DealExtreme e quando fiz o pedido já estava pensando em utilizá-lo de forma "não convencional". Para quem não conhece, um NAS (Network-Attached Storage) é, em linhas gerais, um dispositivo dedicado ao armazenamento e compartilhamento de arquivos e à disponibilização de serviços em uma rede. O NS-K330, além do preço sempre bacana do DX, tem as seguintes características:
Duas porta USB 2.0, permitindo que dispositivos como memórias flash e impressoras possam ser plugados ao aparelho;
Servidor de arquivos FTP;
Servidor de arquivos SAMBA;
Cliente BitTorrent, não sendo necessário que um computador fique ligado para que você possa baixar arquivos através de torrents;
Servidor de impressão compartilhado, permitindo que os usuários de uma rede acessem uma impressora conectada ao NAS;
Porta ethernet RJ45 10/100Mbps.
A primeira coisa que fiz quando o NAS chegou foi atualizar seu firmware, pois o original é fraquinho e cheio de bugs. Fiquei empolgado com o Snake OS, um projeto opensource, originalmente brasileiro, de um firmware para o NS-K330 e o WLXKJ652 baseado em Linux, o que no futuro ajudaria muito nos meus planos de extender o uso do NAS para alguns projetinhos malucos. Até aí tudo jóia, a atualização do firmware foi um sucesso e eu pude utilizar o aparelho durante bastante tempo na sua forma comum, principalmete seu cliente BitTorrent.
Problema
Em meados de agosto do ano passado, eu comecei a fuçar mais no NAS com o objetivo de disponibilizar na Internet as imagens de uma webcam USB conectada ao aparelho e que ficaria filmando o interior de minha casa. Superado este desafio, a falta de conectividade wireless no NAS passou a se tornar um problema e a me incomodar, pois eu queria colocar o aparelho e a webcam em um local em que um ponto de rede com fio seria inviável e apenas o acesso à rede wifi poderia resolver o problema. Para fazer isso eu precisaria ativar o módulo wireless do kernel utilizado pelo Snake OS e gerar um novo firmware para carregar no dispositivo.
Depois de muita pesquisa e apanhar bastante, consegui gerar um firmware com o kernel modificado para as minhas necessidades. O problema foi que quando fiz o upgrade meu NAS não "voltou" e parou de responder a qualquer tentativa de comunicação. Eu estava com um NS-K330 morto em mãos.
Recuperando o NAS
Antes de matar o NAS eu já havia lido algumas coisas sobre a recuperação do mesmo (procuro não fazer nada que possa matar um dispositivo antes de ter certeza que existe a possibilidade de trazê-lo de volta para este mundo). O wiki do Snake OS possui duas páginas que tratam de como estabelecer comunicação serial entre o NS-K330 e um computador e como regravar o firmware original. Foi este material que eu utilizei como guia e você pode acessar as páginas clicando aqui e aqui.
A única dificuldade que tive foi que o tutorial de recuperação da página do Snake OS descreve a utilização de um cabo USB de comunicação Nokia que já tem um hardware para conversão do nível TTL (utilizado pelo NAS) para RS232 (utilizado pelo computador). Como eu não tinha o cabo disponível e comprar no DX iria demorar horrores para chegar, resolvi montar um circuito na protoboard utilizando componentes que eu já tinha. É este procedimento que eu descrevo nos seguintes passos:
Primeiro passo
Desmonte o NAS e solde uma barra de pinos em sua placa. Na imagem abaixo é possível verificar onde ficam localizados os parafusos que fixam a carcaça do dispositivo:
Perceba que os parafusos estão localizados abaixo das borrachas que servem como pés para o aparelho. Você precisará retirar as quatro, tomando o cuidado de não danificá-las para que na montagem possa fixá-las novamente. A barra de pinos deve ser soldada na localização indicada a seguir:
Serão quatro pinos, nas ilhas demarcadas pelos quadrados em vermelho (VCC), preto (RX), preto (TX) e amarelo (GND). O VCC (primeiro pino da esquerda para a direita) não será utilizado.
Segundo passo
É necessário confeccionar os cabos de conexão com o NAS e com o computador. Para o primeiro, eu cortei um cabo de alimentação de disquete de uma fonte velha, para aproveitar o conector fêmea de quatro vias que se encaixa perfeitamente na barra de pinos soldada ao NS-K330. Para o segundo, eu precisei soldar três fios em um conector DB9 fêmea (pinos 2, 3 e 5) e a uma barra com três pinos. Os cabos prontos ficaram assim:
Terceiro passo
Com os cabos prontos e o NAS preparado para a conexão serial, é necessário montar o circuito de conversão do nível TTL para RS232 em uma protoboard. Os componentes eletrônicos necessários são:
MAX232 - Circuito integrado responsável por converter uma entrada TTL para uma saída RS232 e uma entrada RS232 para uma saída TTL;
4 capacitores eletrolíticos de 1uF;
Fonte de alimentação de 5VC - Eu utilizei meu Arduino Nano que tem saída de 5V simplesmente pela facilidade de uso, já que precisei apenas conectá-lo na USB, mas também pode ser usada, por exemplo, uma fonte ATX de PC.
O esquema elétrico ficou assim (clique na imagem para ampliar):
A montagem na protoboard pode ser vista a seguir (clique na imagem para ampliar):
Quarto passo
Agora conecte o NAS à protoboard e a portoboard à serial de um computador. O aspecto da montagem final ficou assim:
Antes de alimentar o NAS e a protoboard, é necessário abrir a porta serial do computador com as configurações 38400bps 8-N-1. Eu utilizei o putty para isso, mas você pode utilizar qualquer outra aplicação que realize uma comunicação serial, como por exemplo o HyperTerminal do Windows.
Ao ligar o NAS à energia, você verificará todo o processo de boot do firmware. No meu caso, estava ocorrendo um "Kernel panic" que impedia que o sistema operasse.
Quinto passo
Com a comunicação NAS - Computador funcionando, é hora de recuperar o dispositivo. Reinicie o NAS e interrompa o processo de boot através do pressionamento de qualquer tecla, então você terá o prompt "Star Equuleus #" do uboot.
Para baixar a imagem do boot de recuperação, você precisará de um servidor TFTP instalado no computador. No Ubuntu, precisei apenas instalar o pacote tftpd-hpa assim:
sudo apt-get install tftpd-hpa
Depois baixe o arquivo recovery.8132 (boot para recuperação) e coloque na raíz do servidor TFTP. No meu caso coloquei o arquivo no diretório padrão do tftpd-hpa /var/lib/tftpboot.
Ainda no computador, baixe o arquivo fw_def_mtd.zip (firmware original) e o extraia em um pendriver que será utilizado em seguida. Também configure o IP da placa de rede para 192.168.0.100. Não esqueça de conectar um cabo de rede do NAS para o computador.
No prompt do NAS, execute os seguintes comandos para configurar a interface de rede, baixar a imagem do boot de recuperação e executá-la:
O NAS deverá carregar o boot que você baixou. Aguarde então o processo ser concluído até o surgimento de um prompt (aqui eu precisei dar um enter no final do boot para que o prompt surgisse).
A recuperação ainda não está concluída. É necessário espetar o pendriver com o firmware original ao NAS, que será montado automaticamente em /usb/sda1. Depois deste procedimento, rode os seguintes comandos no prompt do NS-K330:
Estes comandos irão gravar as imagens do firmware original nas posições de memória corretas. Os dois últimos podem demorar um pouco mais de tempo. Aguarde o fim da gravação e reinicie o NAS removendo e recolocando o cabo de energia. Pronto, seu NAS está recuperado com o firmware e as configurações originais de fábrica.
Conclusão
O processo de recuperação do NAS NS-K330 é mais trabalhoso do que complexo. Uma vez montada a protoboard com o circuito de conversão de nível, a recuperação se resume a comandos no prompt do NAS. O processo pode ser simplificado com a aquisição e utilização do cabo sugerido no wiki do Snake OS.
Em caso de dúvidas, sinta-se a vontade para perguntar através da seção de comentários desta página.