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.




29/05/2017

Baixando vídeo diretamente do Facebook




A maioria das áreas administrativas para Webacappella, para utilizar vídeos necessita que o vídeo esteja postado no Youtube.

Então os vídeos que estão no Facebook tem que ser baixados para o computador e postados no Youtube.

Existem vários programas e sites externos que informando a url do vídeo fazem esta tarefa.

Mas para aqueles que não saibam existe uma forma super simples de se baixar os vídeos diretamente do Facebook.

Então vai a dica.

Vamos como exemplo baixar um dos vídeos desta página:


Agora vem o truque super simples.






Na url substitua https://www pela letra "m".

Pois o Facebook não é um site responsivo, mais possui uma versão mobile. E na versão mobile é disponibilizado o botão para download.

No caso da página exemplo, ficou assim:



Agora basta eu clicar no vídeo desejado e lá está a opção de fazer download.




Ou se for um vídeo de uma postagem na linha do tempo,



Faça a mesma alteração informada acima e clique para iniciar o vídeo que a opção de download aparece.



Bem facil.


17/05/2017

URL personalizada



TEMA: SEO
ARTIGO: Novo
VERSÃO: WA4 | WARC


Como todos sabem o posicionamento do seu site nos mecanismos de busca dependem de várias diretrizes.  

Muitos se preocupam com meta tags tipo título, descrição e palavras chaves e esquecem das URLS. Há os que dizem que as URLs não influenciam em nada. Se enganam. Uma URL bem definida pode ajudar e muito o posicionamento nos mecanismos de pesquisa.

Vamos por exemplo tirar como base as próprias url's criadas em nosso blog do WebacappellaShow. O WebAcappellaShow é feito pela tecnologia do " Blogger" que pertence ao Google. 

Peguei o link:
 https://webacappellashow.blogspot.com.br/2016/10/google-analytics-no-site-webappella.html



Repare que se eu não defini uma url personalizada o próprio Blogger criou a url personalizada baseado no título da postagem. Poderia ser https://webacappellashow.blogspot.com.br/2016/10/post200.html.
Mas não!! Ele criou baseado no que se trata, pois no título já informei o assunto.

E os hifens? 

Apesar que o Google por exemplo possui uma tecnologia para reconhecer a separações de palavras, o hífen é de grande importância pois eles ajudam o Google entender do que se trata.  Lembre que existem palavras formadas de mais de uma palavra. 

Por exemplo:
Dentro da palavra legalmente  se encontra legal e mente
Dentro da palavra contador se encontra conta e dor

E para quem não sabe o hífen é um dos coringas do Google. 

Caso queira saber mais sobre estes coringas do google você encontra mais informações clicando aqui

Outro erro que se comentem muito por aí é definir as url somente como a opção usada no menu do website. 

Por exemplo:

Supomos que no site webacappellashow.com.br tem a página contato.

O que não é uma boa prática é definir a url tipo webacappellashow.com.br/contato.html

O que eu sugiro é uma url mais personalizada ficando mais ou menos assim: webacappellashow.com.br/fale-com-quem-tem-conhecimento-em-webacappella.html

ou até mesmo www.webacappellashow.com.br/contatar-profissional-web-acappella.html


No caso acima eu usei no link a palavra Webacappella pois o domínio é webacappellashow.com.br . Sendo que estão duas palavras juntas: webacappella+show. Desta forma eu ajudei ao Google a entender do que se trata.

Pois se o seu domínio já for exatamente o nome ou marca no seu site, não seria necessário repetir na url personalizada.

Agora por exemplo se uma empresa chamar Garden Jardins, e seu domínio for gjpaisagismo.com.br é interessante citar garden-jardins na url. Na página de contato poderia ficar por exemplo assim: www.gjpaisagismo.com.br/fale-com-empresa-jardinagem-garden-jardins.html


Eu tenho um amigo que é dono do site pertoaqui.com.br, que é um script em php.  O Perto Aqui é um site de anúncios. 

No exemplo abaixo onde na imagem está assinalado de vermelho ele tinha cadastrado o anunciante como Fernandes Clean. 



Ou seja, ele cadastrava apenas o nome do cliente. Porém quem procura Fernandes Clean nos mecanismos de busca é somente quem já conhece a empresa, e na maioria das vezes já até sabe o site dela. Depois que ele mudou os cadastros como mostra a imagem acima. O site começou ter muito mais visitas. Ele ainda poderia ter posto melhor. Posto por exemplo: Fernandes Clean, empresa de limpeza no Bairro Betãnia. 

Para vocês verem a importância de uma boa definição para a url.

Veremos agora como personalizar as url no Webacappella 

No WA 4

Para cada página clique na opção Páginas/Matrizes>>Propriedades da Página, na tela que aparecer você clica em SEO e no primeiro campo você digita a url que deseja, conforme imagem abaixo:




Depois clique em Ok


PARA O WA RC (WA5)

Para cada página  clique em Page Properties (Propriedades da página)



E no primeiro campo você digita sua url personalizada. 




Depois Salve 

Finalizando, é importante lembrar que esta é apenas uma das técnicas utilizadas. Muita outras são necessária para que seu site fique cada vez melhor posicionado nos mecanismos de busca.

Em breve mais posts sobre S.E.O.


11/05/2017

PRESTASHOP 1.6 - Termos e condições de uso


Hoje iremos configurar os Termos e condições de nossa loja. 

É importante frisar que este artigo não se trata das obrigações legais que regem o comércio eletrônico.

Caso deseja saber sobre as questões legais que regem o e-comerce procure por Decreto Federal 7.962/13 de 14/05/2013 (decreto brasileiro) .

Para as ações feitas no Brasil é importante também estar por dentro da Lei Marco Civil da Internet sancionada em junho de 2014 e também o código do consumidor (Lei Federal n. 8.078, de 11 de setembro de 1990).

O não cumprimento da lei para lojas online prevê multa, apreensão de produtos e intervenções de cunho administrativo, podendo culminar no fechamento definitivo da empresa. Por isso, recomenda-se que você procure uma assessoria especalizada para adequar seu site à lei, evitando correr o risco de sofrer sanções.

Mas como já dito, este artigo se trata apenas comentar e sugerir os termos e condições que estarão disponíveis em sua loja, quanto configurar na sua loja Prestashop 1.6

Por meio de seus termos e condições gerais de uso e/ou de venda, uma loja explica aos usuários quais são as condições de utilização do serviço disponibilizado a, seja ele gratuito ou pago. Além de informar o usuário sobre a necessidade de cadastro ou sobre os elementos protegidos por direitos autorais, este instrumento determina, ainda, as responsabilidades de cada uma das partes - editor (pessoa que mantém a loja) e usuário -, em relação ao uso do serviço.
A cláusula mais importante dos termos e condições gerais de uso é aquela que define a política de privacidade da loja. Nela, o editor comunica claramente ao usuário como serão protegidas ou utilizadas as informações que este fornece a loja, sejam elas dados pessoais ou dados de navegação.
Nos casos em que a loja colocar à venda produtos ou serviços, este documento virá, também, complementado pelas condições gerais de venda, que regularão os detalhes desta transação, tais como as formas de pagamento, a entrega e a política de trocas e devoluções.

Vamos agora adicionar nossos termos e condições em nossa loja Prestashop.

Acontece que no conteúdo de nosso Termos e condições de uso existem links que redirecionam para outras informações importantes; como por exemplo Política de Entrega e Política de pagamento. 

Por este motivo vamos preparar antes do nosso Termos e condições os demais links os quais terão referencia.

Em nossa loja exemplo, iremos começar com a Política de Entrega de Produtos. 
Baixe um modelo exemplo clicando aqui.

Então logue na sua área administrativa da loja e vá para PREFERÊNCIAS>>CMS



Agora edite o ítem correspondente a Política de Entrega de produtos. Em nossa loja exemplo:


Preencha o campo Conteúdo com o termos definidos para a política de entrega de sua loja.


Salve.

Como nos Termos e Condições de uso de nossa loja exemplo cita tanto a Política de Entrega e a Política de Pagamento vamos agora inserir no site a Política de Pagamento fazendo da mesma forma que a Política de Entrega.
Baixe um modelo exemplo clicando aqui.

Após feito e salvo, vamos agora  inserir os Termos e condições de Uso.
Baixe um modelo exemplo clicando aqui.

Da mesma forma que feito para as políticas acima comentadas faremos para os Termos e condições de uso, portanto nos trechos do termos e condições de uso que se refere as Políticas citadas, lembre de inserir um link redirecionando.


Caso queira ver on line clique aqui



PRESTASHOP 1.6 - Traduzindo o Menu Informação


Hoje iremos falar como traduzir o menu INFORMAÇÃO na sua loja Prestashop 1.6. Geralmente este menu é mostrado quando se clica em alguma categoria. (imagem abaixo)



Acontece que dependendo de como foi feita a tradução da loja alguns lugares da sua loja ainda podem ficar em inglês. Sendo assim estas traduções podem ser feitas manualmente.


No caso das opções do Menu INFORMAÇÃO é algo fácil e já podemos aproveitar e ajustar os links permanentes no idioma desejado.

Então após logar na área administrativa da sua loja vá ao menu PREFERÊNCIAS>>CMS


Lá estará todas as opções do Menu 


A ação mostrada deve ser repetida para cada ítem.

Para cada um clique no botão Editar correspondente: Vamos mostrar somente usando como exemplo a opção Delivery



Primeiramente lembre de selecionar para qual linguagem você deseja fixar a tradução selecionando a seta do botão conforme mostrado na imagem acima.

No campo Meta título digite o título desejado já no idioma que deseja.
No campo Meta descrição digite uma descrição no idioma desejado.
No campo Meta palavras-chave digite palavra chaves no idioma desejado para auxiliar os mecanismos de busca encontrar a página
No campo URL amigável digite como você deseja a url na barra do browser
No conteúdo você digita o texto conforme a situação
Se desejar que a página seja indexada pelos Mecanismos de busca marque o campo "Indexação por motores de busca" como SIM.

Salve.

No nosso exemplo ficou assim:




Como já dito, deve-se editar cada ítem do Menu. 

Nosso Menu em nossa loja exemplo ficou assim:



Para ver online cliqueaqui

Abraços a todos.




Related Posts Plugin for WordPress, Blogger...