Blog do Joanir - Notas melódicas

Como colocar comentários do Facebook e deixá-los juntos com os do Blog

quinta-feira, 10 de maio de 2018
Se você quer dar mais uma opção para os seus leitores comentarem no seu blog e ao mesmo tempo promovê-lo, você está lendo o post certo. Aqui, ensinaremos como pôr a caixa de comentário atualizada do Facebook e manter a caixa de comentário do blog, assim, o leitor poderá escolher um dos dois para comentar. Ensinaremos também como moderar esses comentários e como ser notificado quando alguém comentar.

Como colocar comentários do Facebook e deixá-los juntos com os do Blog
Adicionar comentários do Facebook juntamente com o do Blogger

Infelizmente, o tutorial é grande, mas está bem explicadinho, "nos seus mínimos detalhes". Está dividido em três etapas para melhor visualização. Então, vamos lá!


1 - Criando um "app" (aplicativo) no Facebook

1.1 - Primeiramente, deve-se criar um aplicativo no Facebook. Para isso, acesse https://developers.facebook.com/apps/ e clique em +Add a New App (Adicionar um novo aplicativo).

Clique no botão verde, localizado próximo ao canto superior direito, +Add a New App
Adicionando um novo App

Na janela que se abre, selecione www:

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Editando HTML do blog
Selecione www
Após isso, você será levado para outra página que mostrará alguns de seus aplicativos, caso vocês os tenha. Ignore isso e clique em Skip and Create App ID:

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
Clique em Skip and Create App ID

Na janela que se abre, preencha o que se pede (Observação: pode ser que estas opções já estejam traduzidas):
Display name (Nome de exibição): Escolha um nome para o aplicativo;
Contact Email (Email de contato): Coloque o seu e-mail de contato;
Namespace: Coloque o mesmo nome de cima, só que sem espaço (e sem acentos);
Is this a test version... (Esta é uma versão de teste de outro aplicativo?): Não
Categoria: escolha "Apps for Pages (Aplicativos para Páginas)".
E clique em Create App ID (Criar um ID do Aplicativo).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
Criando o aplicativo

Aparecerá uma janela chamada Security Check. Basta preenchê-la com o que for pedido e clicar em Submit. Por exemplo, pode ser pedido para que você selecione as imagens que têm uma flor.

1.2 - Finalmente, você estará com o Aplicativo criado, mas precisará configurar algumas coisas. Na coluna de opções, selecione Settings (Configurações) e preencha os campos que ainda não estejam preenchidos:
App Domains (Domínios do aplicativo): Digite aqui o endereço do seu blog, sem o "https":

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
Coloque o endereço do seu blog sem o "https"

1.3 - Depois, ainda nessa janela, clique em + Add Platform (+Adicionar Plataforma) e selecione “Site”. Na aba que aparecer, em Site URL, adicione o endereço completo do seu blog, com o https://. Clique em Save Changes (Salvar alterações).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
Adicionando endereço completo do blog

1.4 -  Agora, vá para App Review (Revisão do Aplicativo) (1), clique em "Yes (Sim)" (2) para tornar o App público e clique em Confirm (3):

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Tornando o aplicativo público
Tornando o App público

1.5 - Na coluna lateral, selecione novamente o Dashboard (Painel) e guarde o ID do aplicativo (ou deixe essa janela aberta).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - ID do aplicativo
Guarde o ID do seu aplicativo

2 - Colocando os códigos no template do blogger

2.1 - Vá para o painel do seu blog, selecione “Modelo” e clique em Editar HTML:

ATENÇÃO:
* Antes de qualquer alteração no seu template, faça o backup do mesmo.
* Recomendamos que você crie um blog de teste e faça os passos lá. Se tudo ocorrer bem, você poderá aplicá-lo ao seu blog principal.
*Não nos responsabilizamos por quaisquer danos causados pelo seguimento deste tutorial.

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Editando HTML do blog
Não esqueça de fazer o backup antes de qualquer alteração

2.2 - Agora, clique em qualquer área dentro do editor de códigos e aperte Ctrl+F para abrir uma caixa de busca dentro do próprio template.

ATENÇÃO: Você deve clicar em qualquer área do editor de texto (1), e não fora dela. Após deixar o cursor piscando nela, você aperta Ctrl+F para abrir a caixa de busca dentro dele (2), e não fora. Veja na imagem abaixo:

Como procurar partes do código no Blogger

2.3 - Nessa caixa de pesquisa, procure por </head>, cole antesdele o seguinte código e clique em “Salvar modelo”:

Atualização (13 de abril de 2016): Este código foi atualizado. Caso você tenha acessado este tutorial anteriormente, localize essa parte e faça a substituição do anterior. Obs.: o código anterior ainda está em funcionamento.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'SEU_APP_ID',
      xfbml      : true,
      version    : 'v2.8'
    });
  };
  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<meta content='SEU_APP_ID' property='fb:app_id'/>

<script type='text/javascript'>
function commentToggle(comentario) {
 if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';
window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
 } else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>

Caso você seja de Portugal ou Espanha, ou qualquer outro país, troque o pt_BR por pt_PT (Portugal), es_ES (Espanha) ou a sigla correspondente ao seu país.

2.4 - Troque SEU_APP_ID pelo ID do aplicativo que você acabou de criar. (Cuidado para não retirar as aspas).

Atualização (15 de novembro de 2016): A documentação do Facebook diz que você deve configurar o ID do Aplicativo ou de sua conta, não ambos. Então, não precisa mais descobrir qual é o ID da sua conta.

2.5 - Agora vamos inserir os códigos CSS. São eles que darão a aparência e estilo da box do Facebook e do Blogger. Procure por ]]></b:skin>, cole esse código antes dele e clique em “Salvar modelo”:

.comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
.comments-page .fb_iframe_widget,
.comments-page .fb_iframe_widget span,
.comments-page .fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}

2.6 - Ainda não há nenhuma alteração visível no seu blog. Procure por <div class='comments' id='comments'> e cole o seguinte código depoisdessa linha.
Obs.: Você deverá encontrar dois resultados para essa busca. Cole o código nas duas ocorrências, caso contrário, a box poderá aparecer ou não em algumas postagens.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://sites.google.com/site/arquivosdoblog007/ico/btface.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentário(s)
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://sites.google.com/site/arquivosdoblog007/ico/btblogger.png'/> <data:post.numComments/> Comentário(s)
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType != "index"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light'  />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Caso você tenha encontrado apenas um <div class='comments' id='comments'>, procure por <div class='comments'> ou <div id='comments'> e cole também o código abaixo dele.

Note que destacamos o "light". Ele é o valor padrão para a sua box do Face. Caso seu template seja escuro, troque o "light" pelo "dark" e veja o que acontece.

  Quer a Box do Blogger antes da do Face?

Se você quiser que a Box do Blogger esteja selecionada por padrão e apareça antes da Box do Face, acesse: Colocar os comentários do Blogger antes dos comentários do Facebook.

  A box do Facebook não está aparecendo. E agora?

Se você seguiu todos os passos até aqui e a box do Facebook não apareceu (ou apareceu parcialmente), siga esse tutorial que escrevi hoje (22 de junho de 2015) apontando algumas causas e soluções para esses problemas: Bug nos comentários do Facebook no Blogger 

3 - Moderando os comentários do Facebook

Com todos os códigos colocados, agora precisamos configurar a moderação. Se alguém comenta algo no seu blog, você precisa receber uma notificação para que saiba que essa pessoa comentou, não é mesmo? O Facebook oferece essa funcionalidade nessa box, desde que esteja tudo configurado corretamente. Lembra dos IDs pedidos no passo 2.4? Eles servem para o Facebook saber que você é o administrador do blog onde a box está inserida e pra qual App enviar os dados comentados.

3.1 - Então, acesse: https://developers.facebook.com/tools/comments e você verá seu Painel de Controle de comentários. Adicione esse endereço aos seus favoritos, pois é bom que você faça visitas periódicas a ele.
Clique em configurações:

Moderar comentários

3.2 - Na janela que abrir, adicione-se como moderador. Veja abaixo o que significa cada uma das opções:

Atualização (13 de abril de 2016): Esta janela foi atualizada e agora está dividida por abas. Faça as observações necessárias para aplicar as configurações abaixo.

    Moderators: Adicione pessoas que poderão moderar os comentários feitos. Adicione-se também;
    Blacklisted Words: Escreva aqui algumas palavras que serão bloqueadas na box. Comentários que as contenham ficaram ocultos e irá para a aba "hidden". Lá, você pode torná-lo público ou não;
    Comment Length Limit: Defina até quantos caracteres poderão ter em um comentário;
    Enable Attachments: Ative a anexação de imagens nos comentários;
    Sort Comments By: Defina a ordem em que os comentários aparecerão: Top (mais populares), Newest (novos primeiros) e Oldest (antigos primeiros);
    Moderation: Public (os comentários serão públicos automaticamente;  Review Blacklisted Comments(os comentários que conterem as palavras bloqueadas definidas estarão ocultos passivos à moderação) e Closed (todos os comentários estarão ocultos e apenas os comentários que não estiverem na lista de palavras bloqueadas ficarão passíveis de moderação);
    Notifications: Defina se você e outros moderadores serão notificados a cada comentário novo.

Se você tem uma página do Facebook dedicada ao seu blog, ative o Espelhamento de comentários. Assim, os comentários feitos nos seus posts também aparecerão na sua página.

Ajustando as notificações


Está com dúvidas?

Se você ainda está com dúvidas, solicite um atendimento virtual agora mesmo, clicando no link abaixo. Entraremos em contato com você e faremos todos os processos remotamente.
VALOR: R$ 40,00 (quarenta reais).

Clique aqui para solicitar uma ajuda

Conclusão

É isso. Não se esqueça de fazer o backup do seu template antes de fazer essas alterações e depois também, para manter uma cópia salva das alterações.  Se tiver dúvida ou deu algo errado, revise o código para ter certeza de que não esqueceu nenhum detalhe. Não se esqueça também de comentar aqui para sabermos se deu tudo certo!

Como resolver o problema pra fazer login no Kogama BR

segunda-feira, 16 de outubro de 2017
Nesta semana, alguns usuários não estão conseguindo fazer o login no Kogama BR. Isto está ocorrendo por um problema interno do site Click Jogos, que é provedor do Kogama aqui no Brasil. Pra alegria de vocês, neste tutorial ensino passo a passo como fazer login  na sua conta novamente!

Resolvendo o problema pra fazer login no Kogama BR
Resolver problema de login no Kogama BR

Este procedimento foi feito no Google Chrome, mas serve para outros navegadores também, com poucas diferenças. Sem muita enrolação, vamos para o tutorial:

Felizmente, esse problema já foi resolvido. Você pode fazer login diretamente em kogama.com.br/login/

Resolvendo o problema


1 Acesse o kogama.com.br e clique em conectar:

Login Kogama BR
Clique em conectar

2 Você notará que a página que abre fica carregando, mas não aparece nada. Então, ali na URL, adicione https:// antes de tudo, ficando igual a imagem abaixo:

Login Kogama BR
Adicione https:// antes da URL

3 Aparecerá este aviso de segurança. Clique em Avançado:

Login Kogama BR
Clique em "Avançado"

4 Nesta parte, o navegador está dizendo que o certificado de segurança expirou a tantos dias, por esse motivo que não está dando pra logar. Ignore essa mensagem e clique em Ir para accounts...(não seguro), como destacado na imagem abaixo:

Login Kogama BR
Clique no local indicado

5 Novamente, a tela ficará em branco. Então, troque https:// por http:// deixando parecido a imagem abaixo:

Login Kogama BR
Substitua https:// por http://

6 Pronto, a página de login  aparecerá agora e você poderá entrar na sua conta do Kogama novamente.

Login Kogama BR
Faça o login normalmente

No celular

No celular, você deve fazer o mesmo, caso jogue pelo navegador. Este procedimento não dá certo pelo Aplicativo do Kogama, mas você pode acessar o Kogama pelo navegador mesmo (Chrome ou outros), pois quando clicar em jogar, ele abrirá o aplicativo automaticamente na sua conta.

Em breve, a equipe do Kogama resolverá esse problema, mas enquanto isso não ocorre, você pode usar esse macete. Se este tutorial foi útil pra você, deixe seu comentário aí embaixo. Até a próxima!

Em busca do curso gratuito

sábado, 2 de setembro de 2017
Na aventura de hoje, narraremos como foi minha busca pelo curso gratuito de desenho aqui em Cascavel. O local do acontecido foi no colégio Ideal, mas o resultado não foi tão ideal assim.

É caro pagar um curso gratuito?
Logo do INE - Instituto Nacional de Educação

Pra contar este fato, precisamos voltar alguns dias. Estava eu na Internet e vi em algum lugar do Facebook algo como: cursos grátis em Cascavel. Desconfiei. Não existe comida de graça, assim como também acho que não existem cursos de graça. Mas, mesmo com dois pés atrás, me cadastrei no site indicado. Primeiramente coloquei um número falso na opção Telefone, mas depois corrigi.

Passado um dia, eles me mandaram uma mensagem no WhatsApp dizendo que eu fui selecionado entre as milhares de pessoas que se cadastraram recentemente. Legal. Mas nesta mensagem tinha uma frase que me fez entender as coisas: curso totalmente gratuito, isenção de taxa de matrícula, nada de mensalidades (reparem no nosso grifo maroto), certificado de conclusão free, mas o custo dos materiais pessoais é com você, meu amigo.

Bom, eu mesmo pagar meu material? É justo! O professor ensina, apresenta a matéria e, como complemento do curso, eu compro os materiais necessários.

Porém, minha primeira crítica aí é como o curso é apresentado: Totalmente grátis. Pessoas como eu, que estão desempregadas, ou até jovens que não tem renda própria, são, de certa forma, atraídos por essa propaganda, e posteriormente, se sentem enganados (explico nos próximos parágrafos).

Bom, levantei-me hoje com uma disposição. Fazia tempo que não levantava com um propósito em mente. Peguei o dinheiro da passagem e mais um pouco para algumas coisas. Saí de casa às 8 horas e fui pro terminal de ônibus. Ônibus lotado, pra variar. Assim que cheguei no colégio, fui pra uma sala grande, onde tinham muitas outras pessoas. Estava lotado.

Logo, um moço de 27 anos se apresentou e apresentou o INE - Instituto Nacional de Educação. Após a apresentação, ele explicou como seriam os cursos. Fez uma estimativa dos valores dos cursos  nas escolas profissionalizantes e enfatizou que no INE, todos os cursos são gratuitos. Falou também que teríamos o direito a 4 horas semanais durante 24 meses, podendo fazer até dois cursos simultâneos. E por fim, falou do material. O material custará 99 reais mensais.

De fato, não está caro. Dependendo da situação financeira de muitos, 99 reais pode não ser nada, assim como pode ser muito. Mas o foco aqui é que no momento do cadastro, da apresentação e da inscrição, o tempo todo é enfatizado que o curso todo é gratuito, que não há mensalidades. Porém, a compra do material é obrigatória, você tem sim que pagar mensalmente os 99 reais.

Aí digamos que o espertão aqui dissesse: mas eu só quero fazer o curso, dispenso o material, dou meu jeito. A resposta seria uma negativa, haja vista que a maioria dos cursos oferecidos são feitos por meio de um programa de computador. Dando um exemplo: se o módulo do curso for de Word, um simulador de Word é rodado no computador do aluno e este vai seguindo os passos indicados no programa. O professor, nesse caso, torna-se apenas instrutor, pois cada aluno estará num ritmo próprio, dependendo de seu desempenho. Desse modo, no "material" está incluso a licença de uso do programa. Ou seja, parte do próprio material acaba sendo o próprio curso. Logo, o curso não é grátis.

Para concluir, não estou dizendo aqui que os 99 reais não sejam uma boa aplicação. Conseguir um trabalho hoje está difícil, então quanto mais qualificações você tiver, melhor. Mas a forma como ele é divulgado e a falta de um link com os regulamentos no ato do cadastro induzem muitas pessoas ao erro. O apresentador tem boa oratória, traça paralelos entre outras escolas e acaba até te convencendo de certas coisas. Cursos profissionalizantes são ótimos, mas cursos técnicos têm pontos a mais. Fazer o curso de forma individual por meio desses programas também é interessante, pois o aluno define o seu ritmo de aprendizagem, mas a figura do "professor" é quase deixada de lado, sendo consultado apenas quando o aluno sentir alguma dificuldade.

Adblock Detectado

Percebemos que seu AdBlock está bloqueando propagandas no nosso blog.

Desative-o, por favor, também não gostamos de janelas abrindo aleatoriamente, então não temos dessas aqui.

Muito obrigado!