Mostrando postagens com marcador Redes Sociais. Mostrar todas as postagens
Mostrando postagens com marcador Redes Sociais. Mostrar todas as postagens

06/05/2018

Inserindo um botão linkando para o Whatsapp


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

Hoje é muito usado disponibilizar o WhatsApp como uma forma de comunicação. Portanto não são todos os casos que devem ser considerados. Sugiro que o número seja exclusivo para isso, evitando que se misture com seus contatos pessoais.

Mas caso seja uma opção desejada é muito fácil de se inserir um link para que o visitante do site ao clicar já seja direcionado para Whatsapp com seu número pré configurado.

Pode-se ser usado através de um link configurado em um botão, imagem ou até mesmo em um texto.


A url a ser configurada como redirecionamento é a seguinte:

https://api.whatsapp.com/send?phone=seunumerodetelefone&text=%20mensagem

Basta agora você alterar as áreas que estão de vermelho acima por suas informações, ou seja: O seunumerodetelefone substitua pelo número do Whatsapp desejado contendo o código do país, código de área e o número; e mensagem por uma mensagem que deseja. Porém a mensagem não será enviada em seguida. Será necessário que o internauta clique em enviar.


Então como exemplo vou inserir o número 5531999999999 com uma mensagem "Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br"  No numero usado estou usando o código do País Brasil e código de área para Belo Horizonte e um número exemplo (este número não é um número de contato oficial do WebAcappella Show) .


Então a url ficaria assim:

https://api.whatsapp.com/send?phone=5531999999999&text=%20Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br


No exemplo então optei para utilizar em um botão no site de forma ao clicar vai abrir o Whatsapp em uma nova guia pelo computador e por celular ele perguntará se vai querer abrir pelo aplicativo ou pelo browse.



E ao clicar ficaria assim pelo WhatsApp

Basta agora o internauta clicar em enviar.

Se quiser ver on line CLIQUE AQUI

Lembrando que não conseguirá adicionar o número pois o mesmo não está adicionado ao WhatsApp. É apenas um exemplo.

Abração a todos.








29/04/2018

Integrando o Instagram no seu site feito no Webacappella 4 ou no Webacappella RC


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


Me perguntaram esses dias se eu tinha conhecimento de como intregrar o Instagram em sites feitos pelo Webacappella 4.

Então eu passei o link direto da API do Instagram https://www.instagram.com/developer/, porém tem que se dedicar um tempinho. Eu particularmente nunca usei.

Não sei porque a cada dia que passa nosso tempo está cada vez mais curto, então nos obriga a ser o mais prático possível.

Com base nisso vou mostrar no vídeo um dos recursos  que utilizo para incorporar o Instagram nos sites que faço tanto no Webacappella 4, quanto no Webacappella RC (WA5)

Eu utilizo também Lightwidget pois nele tenho a possibilidade de usar como grade, slide e colunas/linhas, além  de aplicar vários estilos e ao clicar na foto ele manda diretamente para o Instagram o qual foi incorporado.

Caso queira ver o vídeo pelo Youtube clique aqui




Grande abraço pra Geral

17/09/2017

Google + Botão Share (botão para compartilhamento)


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



O Google Plus possui  um botão de partilha que permite aos seus visitantes compartilhar todo o conteúdo que achem interessante do seu Site .
O botão partilhar não é igual ao botão Google +1 (tal como acontece no Facebook, em que o botão Compartilhar é diferente do botão Curtir).
Para inserir o Botão Share do Google no seu site Webacappella é muito simples.

O primeiro passo é configurar  o botão e para isso clique aqui







Agora basta configurar a seu gosto como gostaria que fosse mostrado o botão. A esquerda das opções de configuração é exibido uma prévia do botão.

Sugerimos:

Em Nota deixe marcado como Em Linha
Em Tamanho deixe marcado Médio
Em Idioma selecione o seu.
Em Dinâmico. marque se for utilizar no WA RC e não marque se for usar no WA4
Em Analisar tags marque como Padrão (ao carregar)
Em URL para compartilhar insira a url que deseja que o internauta seja direcionado quando clicar no resultado. Ou seja na imagem que foi compartilhada no Google Plus. Exemplo abaixo:


A imagem que será representada será a que o Google encontrar na página que mais se ao ambiente do post. Ou você pode configurar a imagem escolhida utilizando o mesmo código do Open Graph Facebook. Para saber mais clique aqui




Após configurar copie o código que é disponibilizado no quadro abaixo da prévia


O nosso exemplo ficou como abaixo:






IMPLEMENTANDO NO WEBACAPPELLA 4

Para implantar no Web Acappella 4 nas configurações acima citadas NÃO marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.



Agora  insira um elemento código HTML no local que deseja que o Google Shared apareça




Cole o código no campo de código no elemento. Dê um nome para o elemento e não marque Ativar pré-visualização, pois a mesma não irá funcionar.



Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura de acordo de como configurou na página do Google. No caso da configuração sugerida por nós a largura é 90px e altura 20 px.



Infelizmente na página das configurações não fornecem estes dados, então o truque é publicar o site, printar a tela, igualar os elementos do print aos do projeto e depois encontrar o tamanho a ser usado.



Publique e pronto.

Para ver on line no Webacappella 4 clique aqui.



IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)


Já no Wa Responsive é necessário que nas configurações para gerar o código seja marcado como dinâmico.

No seu projeto insira um box e um subbox, dentro do subbox insira um elemento HTML




Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <center>. Desta forma a visualização nos dispositivos móveis será centralizada

.


Publique o site.

Para ver on line no Webacappella Responsive clique aqui.

.. ABRAÇOS

11/09/2017

Google+ Badge




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



O Google Badge é seu crachá do Google+ e é uma ótima maneria de aumentar o seu público no Google+ e obter mais recomendações para o seu site na busca do Google.

Você não só terá beneficiando seu site como também seus usuários finais.

O único fator contra é que eles nem sempre combinam bem com o que o site representa.

Em sites de profissionais liberais, freelances e pessoas públicas tais como fotógrafo, cantor,  candidato político e afins é uma ótima opção.

Para implantar o Gaoogle Badge é necessário que tenha uma conta de perfil no Google +.

Então o primeiro passo é fazer login em sua conta.


Após logado vá para o seguinte link:

https://developers.google.com/+/web/badge/



Agora basta configurar a seu gosto como gostaria que fosse mostrado o seu crachá do Google +.

Sugerimos:

Em Recursos deixe marcado como Emblema
Em Layout deixe marcado com Retrato
Em largura deixe no máximo como 320 (garantindo boa apresentação em dispositivo móveis)
Em tema de cores vai depender das cores utilizadas nos seu site e o design (gosto muito do escuro)
Foto da capa deixe assinalado se queira que a imagem da capa do seu google+ apareça em fundo, se não deixe como desativado.
Em frase sugerimos deixar como Desativado.
Em Idioma selecione o seu.

Nas opções avançadas assinale a caixa de verificação em Dinâmico.
Nas opções avançadas em Analisar tags marque como Explícito

Após configurar copie o código que é disponibilizado no quadro abaixo do crachá.


O nosso exemplo ficou como abaixo:







IMPLEMENTANDO NO WEBACAPPELLA 4

Para implantar no Web Acappella 4 nas configurações acima citadas NÃO marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.

Agora  insira um elemento código HTML no local que deseja que o Google Badge apareça




Cole o código no campo de código no elemento. Dê um nome para o elemento e não marque Ativar pré-visualização, pois a mesma não irá funcionar.



Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura com o mesmo valor que definiu nas configurações ao criar o Google Badge.

Publique e pronto.

Para ver on line no Webacappella 4 clique aqui.



IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)


Já no Wa Responsive é necessário que nas configurações para gerar o código seja marcado como dinâmico.

No seu projeto insira um box e um subbox, dentro do subbox insira um elemento HTML




Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <center>. Desta forma a visualização nos dispositivos móveis será centralizada.


Publique o site.

Para ver on line no Webacappella Responsive clique aqui.

É ISSO AÍ GALERA. FICA A DICA.. ABRAÇOS




18/06/2017

FACEBOOK | Page Plugin | Modo fácil e rápido




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


Como muitos já sabem o Facebook disponibiliza vários plugins para implementar em seu site através do Facebook Developers.

https://developers.facebook.com/


Hoje iremos falar do Page Plugin (Plugin de Página) . Algo semelhante a isto:




 Para configurar seu Plugin Page acesse este link: https://developers.facebook.com/docs/plugins/page-plugin , configurar a seu gosto e  gerar o código e aplicar no WebAcappella

Apesar de você pode a configurar a seu gosto, vou falar neste post a maneira mais usada em websites.





 Acima a imagem mostra os campos os quais iremos personalizar . Vamos comentar campo a campo.

URL DA PÁGINA DO FACEBOOK: Neste campo você vai inserir a URL da FANPAGE




GUIA: Neste campo se deixar como timeline, serão mostrados as postagens realizados na linha do tempo da  página. As postagens vão aparecer dentro da altura determinada

Você pode usar para ser mostrado a linha do tempo, eventos e ou mensagens.

Portanto não fica uma visualização muito legal no website. E se você tem intenção de usar este plugin no rodapé, usando o timeline , eventos ou mensagens fica pior ainda.

Aconselho limpar esse campo deixando-o em branco.

Observe na imagem abaixo que removendo a visualização ficou bem mais agradável


LARGURA: Neste campo você informa a largura que deseja para o plugin page. Mínimo de 180 e máximo de 500 px. Eu gosto muito de utilizar 500 px

ALTURA: Neste campo você informa a altura que deseja para o plugin page. Minimo de 70 px
Caso você queira que os rostos de amigos apareçam sem que mostre uma barra de rolagem no plugin, procure utilizar 300 px na altura


USAR CABEÇALHO PEQUENO:  Caso você assinale esta opção será cortado ao meio a altura da imagem da capa da sua fanpage.

OCULTAR FOTO DA CAPA: Se assinalar esta opção não será mostrado a imagem da capa da fanpage; o que não fica muito bonito.

ADAPTAR À LARGURA DO CONTÊINER DO PLUGIN: Deixe esta opção assinalada pois assim será forçado o ajuste na sua área de implementação do código no seu site.

MOSTRAR ROSTOS DOS AMIGOS: Caso queira que seja mostrado o rosto dos amigos deixe esta opção marcada. Esta opção é interessante pois por exemplo: Se você está logado no Facebook e visita um website onde tem o plugin page do Facebook implantado. Ali serão mostrados a quantidade e o rostos de alguns amigos seu que já curtiram a Fanpage. Dependendo dos amigos abre até uma curiosidade de se visitar a fanpage.

Após tudo configurado clique em Obter código


Você pode usar o código fornecido em SDK do JavaScript  ou o código de implantar como iFrame.
Aconselho a primeira opção.

Serão mostrado dois códigos.

O 1º seria para ser inserido no head do website ou da página do seu website a qual seria implantado o plugin




E o 2º seria para ser inserido no local da página do seu website onde é para aparecer o plugin page finalizado.



Portanto você pode simplesmente utilizar os dois código juntos na área a qual deseja que o plugin page apareça. Inserindo o primeiro código e o segundo logo em seguida na área de implementação.

Então irei mostrar desta forma como implementar tanto no Webacappella RC como no Webacappella 4


Então no caso usaremos como exemplo os códigos para implementar o plugin page da Fanpage do Webacappella Show o qual juntando os dois códigos, o código a implementar fiaria assim:



<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>


IMPLEMENTANDO NO WA 4


Na página do site em que deseja que o plugin page aparece acione a opção: INSERIR >> CÓDIGO HTML



E cole o código na área conforme imagem


Depois clique na guia da régua e configure a largura e altura com os mesmos valores utilizados na criação do plugin.


Depois só arrastar a área do código para o local desejado na página do seu site

Para ver o exemplo on line clique aqui.

IMPLEMENTANDO NO WA RC


Na página do site em que deseja que o plugin page aparece insira um subbox dentro do box onde será implementado o código




Depois insira o pelo menu a área de html




Porém iremos fazer uma pequena alteração no código para ficar melhor no WARC.


Como pode observar abaixo, inserimos <center> no início para que o plugin page centralize dentro da área onde foi inserido o código.


<center>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>




E colamos o código na área de implementação HTML a qual definimos na página do website.





Para ver on line nosso exemplo clique aqui.


Um detalhe importante é que dependendo dos scripts utilizado em seu site possa ser que em vez de usar os dois códigos fornecidos pelo Facebook Developers somente na área html; tenha que separar e utilizar o primeiro no head da página ou até mesmo do website.




17/08/2016

Inserindo um botão compartilhar no Facebook utilizando os botões do Webacappella (Método 2)



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


Em outra postagem eu explique como inserir no seu site Webacappella um botão Compartilhar no Facebook utilizando o método Facebook Developers.

Link da postagem:
http://webacappellashow.blogspot.in/2016/08/inserindo-um-botao-compartilhar-no.html

Portanto para ao clicar no botão tenha o efeito desejado é necessário seguir os procedimentos explicados em outra postagem:
Link:
http://webacappellashow.blogspot.in/2015/07/facebook-open-graph-imagem-compartilhar.html



Vamos então para outro método que é utilizando os botões do Webacappella:



MÉTODO 2 - UTILIZANDO BOTÃO DO WEBACAPPELLA


Existem casos que desejamos fugir da imagem padrão que o Facebook nos fornece para o botão Compartilhar como mostrado no Método 1. Então existe uma forma de você utilizar os próprios botões do Webacappella. 

Para isso faça todos os procedimentos do MÉTODO 1 insira o botão e publique o site. Após o site publicado clique no botão como fosse compartilhar no Facebook:

Ao abrir a tela de publicação copie todo o conteúdo da barra de endereço.



NO WA 4

No Webacappella na página que deseja o botão compartilhar insira um botão com a opção INSERIR >> BOTÃO. 

Personalize o botão da sua maneira, e na hora de definir um link para o botão defina para "Link para um endereço na internet" , "Nova Janela", e no campo abaixo cole o que você copiou da barra de endereços conforme mostrado na imagem acima.




Para ver o resultado on line clique aqui


NO WA RC

No  Webacappella RC,  na página que deseja o botão compartilhar insira um box onde vai receber o código, clique no ícone Button no menu 

Personalize o botão da sua maneira, e na hora de definir um URL e assinale a caixa de verificação "Open in a windows"  No campo da url cole o que copiou na barra de endereços conforme a imagem mostrada.


Uma pena que até a data de hoje, no WA RC não temos muitas opções de personalização do Botão. Como inserir um ícone por exemplo.

Para ver o resultado on line clique aqui (o botão está no rodapé do site)





Este método dispensa a inclusão do código no head de cada pagina como mostrado no MÉTODO 1


Agora você tem um botão mais personalizado para compartilhar o site no Facebook.

08/08/2016

Inserindo um botão compartilhar no Facebook pelo método Facebook Developers





TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC  |  WA 4
Em outra postagem eu expliquei sobre a importância e como inserir uma imagem a ser compartilhada no Facebook do seu site. Algo de extrema importância.

Se você não viu a postagem basta clicar aqui.

Através do que foi explicado a funcionalidade já pode ser executada pastando digitar a url do seu site em uma postagem. Mas para que o visitante que gostou queira compartilhar?

Não seria muito mais fácil ter um simples botão de compartilhamento em que ele clicasse e já fizesse tal ação?

Então; hoje vamos explicar inserir este botão através das próprias ferramentas disponibilizadas no Facebook Developers.

Vou usar como exemplo deste artigo, um site que um amigo desenvolveu, inclusive pelo WA RC o qual vou configurar para ele esta aplicação.

Localize com a barra de rolagem a parte Configurador do botão Compartilhar




Em URL to share informe a url do site. 
Layout escolha a forma que você deseja o botão
Em Tamanho do botão selecione o tamanho desejado
E se desejar assinale a opção iframe para plataforma móvel


E clique em OBTER CÓDIGO  para a geração do código.


 IMPLEMENTANDO NO WA 4



No Webacappella , na página em que deseja incluir o botão utilize a opção PÁGINAS / MATRIZES clique na CATRACA  e inclua o código fornecido no ítem 1.:




Agora continuando na págian que deseja incluir o botão vai na opção INSERIR>> CÓDIGO HTML  e cole o código fornecidos no item 2.




 IMPLEMENTANDO NO WA RC


No Webacappella , na página em que deseja incluir o botão utilize a opção PAGE PROPERTIES clique em EDIT HTML CODE  e inclua o código fornecido no ítem 1.:



Agora continuando na página que deseja incluir o botão selecione a opção HTML no menu  e cole o código fornecidos no item 2.

 Para o RC eu costumo digitar <center> antes do código para que facilite eu trabalhar com os alinhamentos.












Related Posts Plugin for WordPress, Blogger...