Configure o envio de e-mails por SMTP e garanta a entrega

O envio de mensagens padrão do Prestashop é  via PHP mail(), o qual  produz mensagens de baixa qualidade, visto que o email do remetente não é autenticado antes do envio da mensagem.

Esta função do PHP é muito usada por SPAMMERS para envio de propaganda em massa com remetentes falsos. Apesar de você poder usar esta opção no Prestashop, recomendamos o uso do SMTP, pois o envio do email é autenticado, ou seja, sabe-se que o remente é quem diz ser, e os provedores de e-mail têm uma aceitação melhor para mensagens autenticadas.

Mensagens enviadas pela função mail() do PHP normalmente acabam indo para 'lixeira', 'pasta de spam' e muitas vezes nem são entregues.

Para a configuração correta de seu Prestashop  para usar emails autenticados por SMTP, siga os passos abaixo:

1 - Logue no painel de administração do PrestaShop:

2 – Vá a “Parametros Avançados“ → “Email”:

3 – Localiza na página a área "Email"

Assinale as opções 

Definir meus próprios parâmetros de SMTP (Ex: smtp.seudominio.com)

Clique em Salvar

4 – Logo abaixo existe outro quadro para configurações de SMTP

Preencha os campos conforme as configurações fornecidas pela sua hospedagem.

Clique em Salvar

5 – Execute um envio de teste. Caso falhe, verifique as configurações :

Pronto, agora seu Prestashop envia e-mails autenticados.

Leia mais

Inserindo efeito neve no site Webacappella

TEMA: Plugins e códigos

ARTIGO: Novo

VERSÃO: WA RC  

Está chegando o Natal, e muitos gostam de inserir alguns "flus flus" no webiste. 

E um ótimo e sugerido efeito é inserir um efeito de neve caindo sobre o website.


Pois é muito simples, veja só:

A primeira coisa a fazer é baixar um arquivo js neste link: https://webacappellashow.com.br/loja/home/20-efeito-neve-site-webacppella.html

Depois faça upload para um local na hospedagem do site o qual vai inserir o efeito

Agora basta incluir o código abaixo no HEAD do website (caso deseje que apareça no site todo) ou apenas no Head da página que deseja o efeito.

CÓDIGO

<script src="URL DO LOCAL DO ARQUIVO">

</script>

Substitua o texto em vermelho pela url onde foi inserido o código.

Exemplo: 

<script src="http://www.webacappellashow.com.br/neve/CodigoNeve.js">
</script>

Para ver on line clique aqui

Muito simples não é mesmo?


Os créditos desta postagem vai para Maiochristopher

Leia mais

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

Leia mais

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

Leia mais

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.

Leia mais

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.

Leia mais

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.

Leia mais