24/05/2016

Inserindo botões de compartilhamento no seu site com AddThis






TEMA: Redes Sociais
ARTIGO: Novo
VERSÃO:  WA  4  |  WA RC



Os botões de compartilhamento são muitos úteis e podem ajudar aumentar o tráfego do seu site se forem bem aproveitados.

O AddThis fornece uma forma muito interessante e simples de você inserir estes botões no seu site. E fornece além de botões de compartilhamento nas principais redes sociais como também enviar um e-mail ou até mesmo imprimir a página.

Então vamos lá:

1) Acesse a url http://www.addthis.com/

2) Crie uma conta gratuita clicando em GET STARTED FREE!


2) Crie uma conta gratuita clicando em GET STARTED FREE! Muito fácil, você informa seu e-mail e uma senha.

3) Após criar a conta e logado você opta pela opção GET SHARE BUTTONS



4) Agora você seleciona se deseja o botão a direita ou a esquerda da tela.




4) Depois selecione um tema 



5) Escolha agora se quer que aparece a contagem de compartilhamento nos botões. 




6) Em services você pode escolher se a personalização do compartilhamento será automática ou se você vai personalizar quais botões deseja que seja oferecido para compartilhamento. Eu prefiro eu mesmo personalizar .. Desta forma informo quais redes sociais eu desejo. Prefiro pois assim eu não sujo o site com excesso de botões.



7) Selecionando personalizada será apresentado um quadro com os ícones de compartilhamento disponíveis a esquerda. Basta clicar no ícone desejado, e com as setas do centro ir incluindo no quadro da direita. Os que forem inclusos no quadro da direita serão os botões que irão aparecer no seu site. Clicando em determinado ícone no quadro a direita e utilizando as setas para cima e para baixo você posiciona o ícone selecionado na ordem de sua preferência.





8) Clique em SHOW MORE OPTIONS


9) Em HIDE ON HOMEPAGE, você informa se quer que oculte a ferramenta em uma página de nível superior como seusite.com.br, não nas páginas iniciais como seusite.com.br/pasta

Eu prefiro deixar em NO

10) Em HIDE ON THESE PAGES: você insere as páginas em que não quer que apareça. Esta opção pode ser interessante no caso dos ícones atrapalharem o design de alguma página, ou alguma página que você não queira que seja compartilhada.

11) Em SHARED COUNT THRESHOLD você informa a partir de que número a contagem dos compartilhamentos iniciarão, Esta não nem mecho muito, pois prefiro algo mais limpo, então no geral não configuro para mostrar contagem nos botões.

12) Em RESPONSIVE WIDTH você informa a partir de que resolução em largura você não quer que apareça os botões. Útil no caso de celulares , para que os botões não atrapalhem as opções do site. Mas isto vai depender de cada layout. Lembre que se você usar o botão Whatsapp e retirar a visualização dos botões para dispositivos móveis, nada adiantará o botão.

13) Em VERTICAL OFFSET você informa a distância to topo e da moldura da tela.

14) Em SHOW THANK YOU  mostra um obrigado depois de compartilhar e pedi aos visitantes a seguí-lo. Mas para isso você terá que ter o cabeçalho da página (head) configurado para acompanhamento. Se tem dúvidas sobre isso melhor deixar como Não.

15) Caso ter definido a questão do ítem anterior como sim, em THANK YOUT TITLE você escreve a mensagem de agradecimento.

16) FOLLOW MESSAGEM é a mensagem para seguir.

17) RECOMMENDED CONTET MESSAGE é para personalizar a mensagem de Recomendação

18) Hide Email Sharing Confirmation , assinale se quiser ocultar o e-mail de confirmação.


Confirme e você será redirecionado para  a página de criação do código.




INSERINDO NO WA 4

Copie o código fornecido na página conforme item 18 deste post, figura item 1

No WebAcappella clique em SITE>>PROPRIEDADES DO SITE

Clique na catraca.


Cole o código na área de HEAD



Cole o código na área de HEAD

Publique o site.




INSERINDO NO WA RC

Copie o código fornecido na página conforme item 18 deste post, figura item 1

No painel inicia do projeto (Dashboard), clique em PROJECT SETTINGS .




Depois cole o código copiado na área EDIT HTML CODE



Clique em SAVED AND CLOSE e public


___________________________________________________________________________

Curtiu? Pq não comenta?


15/05/2016

FACEBOOK | Botão curtir com comentário





TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO:  WA  4  |  WA RC



Coloque o botão curtir do Facebook no seu site de uma maneira bem simples. Em testes quando coloquei a url de uma Fanpage, automaticamente eu curti Fanpage. Porém os comentários demoraram um pouco a aparecer no meu perfil. Essa demora aconteceu também quando coloquei a url do site. Mas apareceu. Apareceu o comentário e a imagem que tinha configurado no Open Graph Facebook para o site.


Legal neste código é que ao visitante clicar em Curtir, ele ainda comenta e seu comentário sai na sua linha de tempo.

Veja o print do meu teste:






EDITE O CÓDIGO: (substitua o trecho "http://www.webacappellashow.com.br/"  pela URL de seu blog, site ou fanpage.)

 <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.webacappellashow.com.br/?fref=ts&layout=standard&show_faces=false&width=380&action=like&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:38px;" allowtransparency="true"></iframe>



APLICANDO NO WEBACAPPELLA 4

No WebAcappella, opção INSERIR>>CÓDIGO HTML cole o código alterado.





Como o não é mostrado o resultado Ativando a pré-visualização sugiro dar um título "Botao curtir" e clicando na régua configure as dimensões para largura 250 px e altura 38 px. Desta forma você terá a referencia da área de ocupação.



APLICANDO NO WEBACAPPELLA RC

Insira um box, ou subbox onde vai entrar o código html. No RC quanto mais subbox criar melhor será seu controle sobre a distribuição dos elementos. 


Clique na opção HTML no menu e arraste até o drag/drop onde será inserido o código do botão



Dê duplo clique na área de html e insira o código modificado  na tela que abrir



Inclua <center> no início do código. Isto para que ele fique centralizado no box. 


Clique em Ok para salvar

Desta forma você trabalha com a largura com os recursos do Wa Rc e ele estará centralizado no box. Sentirá a diferença quando visualizar na menor resolução.



Prontinho. Espero ter sido útil.

Abraços.










Related Posts Plugin for WordPress, Blogger...