Tutorial: Como criar um LightBox com um quadro para curtir no Facebook automaticamente

Cicklow · 11/12/2015

Boas, este tutorial seria uma continuação de 2 dos meus tutoriais anteriores:
http://forobeta.com/tutoriales/253426-ocultar-like-css-capturar-like-js.html
http://forobeta.com/tutoriales/251727-ocultar-like-css.html

O que faremos desta vez será mostrar um LightBox que conterá um quadro para curtir uma fanpage, e um botão "Fechar", mas este botão por baixo terá a curtida oculta...

O usuário, ao clicar na curtida oculta, está compartilhando seu post no Facebook. Não é o clássico autolike de apenas curtir uma URL fixa (uma fanpage, por exemplo)... neste caso, ele compartilha o post no mural do usuário. Digamos que compartilha porque o estilo do post é parecido com o de compartilhar, mas ele só está curtindo um post do seu site. É importante para que isso funcione que as og:metas estejam no seu site (ver mais adiante)...

Vários pontos sobre este tutorial:
- A curtida oculta só é mostrada ao usuário que vem do Facebook, com isso garantimos que o usuário está logado
- Quando o usuário curte, capturamos esse evento e ocultamos o LightBox, e para que não apareça por um tempo, colocamos um cookie
- O AutoLike funciona para qualquer site, seja WP, Blogger ou meu próprio código...
- Pode ser que com o tempo o AutoLike peça para confirmar a curtida, ou pode ser que não... depende do Facebook...
- Não será mostrado em versões mobile, já que o usuário usa o aplicativo do Facebook e não está logado no navegador, fazendo com que a curtida peça os dados do usuário para logar...
- Se por alguma razão o LightBox não puder ser fechado, ele se fecha sozinho após 10 segundos (pode ser alterado)

Assim será visto pelo usuário:

E assim será visto pelos amigos (no Facebook):

Todos sabemos (ou a maioria) que ao colocar o cursor sobre o curtir, ele diz "Curtir". Para evitar que o usuário perceba isso, mudaremos o idioma da curtida. Neste caso, colocaremos em francês, mas vocês podem colocar o idioma que quiserem (que não seja inglês ou espanhol)
Lista que o Facebook suporta: https://www.facebook.com/translations/FacebookLocales.xml

Antes de continuar e explicar o código em questão, é preciso levar em conta alguns pontos:
- O site onde a curtida for colocada tem que ter as og meta do Facebook. Exemplo:

HTML:

<meta property="og:url" content="http://test.cicklow.me/like.html" />
	<meta property="og:type" content="article" />
	<meta property="og:title" content="ForoBeta Like" />
	<meta property="og:description" content="Somos betas, siempre mejoramos" />
	<meta property="og:image" content="http://test.cicklow.me/like.png" />
	<meta property="fb:app_id" content="56312423423423" />

Tentem sempre que a imagem seja maior ou igual a 600x315, assim fica grande no Facebook... (como o exemplo acima).
- Estes og meta podem ser gerados por um plugin ou colocados manualmente, depende do CMS que vocês usam.

Passo 1
Vamos a https://developers.facebook.com/apps/ e criamos um novo aplicativo, com isso obteremos um ID de aplicativo para usar.

Passo 2
Antes do </head> colocamos (se for WP, editar header.php... se for Blogger, vocês têm que editar o design):

HTML:

	<style>
		#contenedor{ display:none; width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.7); z-index:9996;}
		#cuadrito{ border:1px solid #fff; width:280px; height:150px; color:#fff; position:absolute; top:40%;left:40%; background-color: #3b5998;z-index:9997; padding:5px;}
		#boton { pointer-events:none; font-family:verdana; padding:10px; background-color:#fff; position:absolute;bottom:5px; color:#000; left:33%; width:80px; text-align:center; z-index:9999; }
		#lke{ position:absolute; padding:10px; left:36%; bottom: -2px; width:73px; text-align:center;  z-index:9998; }
		.fb-like{ overflow:hidden; width: 80px; }
	</style>

Este CSS se encarrega do LightBox, do quadro de pedir a curtida e de posicionar os objetos no quadro... e o que usaremos de novo em CSS é:

HTML:

pointer-events:none

Esse código simples faz com que a tag A (link) perca o evento click, fazendo com que possamos clicar na curtida. Em um resumo mais básico, temos duas camadas uma sobre a outra, a camada 0 é a curtida e a camada 1 é o botão. Sem o pointer events, ao clicar no botão, estaríamos fazendo isso... clicando no botão, mas ao tirar o clique, o que se faz é dar o clique na curtida (é uma confusão de clique clique clique... XD)

Passo 3
Depois do <body> colocamos (se for WP, editamos index.php (ou home.php), pode ser também header.php...)

HTML:

<div id="contenedor">
<div id="cuadrito">
	<iframe width="280px" height="70px" frameborder="0" border="0" src="about:blank" id="fanpage"></iframe>
	<a href="javascript:void(0);" id="boton">CERRAR</a>
	<div class="fb-like" id="lke"></div>
	<div id="fb-root"></div>
</div>
</div>

Aqui colocamos o contêiner (lightbox), o quadrinho que pede a curtida e os objetos que o Facebook precisa... Como veem, temos um iframe com src="about:blank", isso é assim já que depois, com JS, colocaremos a URL da nossa fanpage...

Passo 4
Antes do </body> colocamos (no WP editamos footer.php):

PHP:

<script>
//Verificamos si el usuario viene desde facebook y no es un mobil
    if (document.referrer.indexOf('facebook.com') >= 0 && !detectmob()) {
//Luego de 10 segundos se cierra el lightbox... es por cualquier cosa...
        setTimeout(function(){  ver_like_ccw(); }, 10000); //10000 = 10 segundos
//Verificamos si la cookie no existe
        if (getCookie('like') != 1) {
//Aca colocaran la url de su fanpage
	    var urlfan = "https://www.facebook.com/facebook";
//Agregamos la url completa del likebox de nuestra fanpage
	    document.getElementById('fanpage').src = "https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&app_id=563126933851462&container_width=280&hide_cover=false&href="+encodeURIComponent(urlfan)+"&locale=es_ES&sdk=joey&show_facepile=false&small_header=true";
//Mostramos el LightBox
            document.getElementById('contenedor').style.display = "block";
        }
    }

//Esta funcion esta encargada de ocultar el lightbox y colocar la cookie (100 dias dura)
    function ver_like_ccw(url, html_element) {
        document.getElementById('contenedor').style.display = "none";
        setCookie('like', '1', 100);
    }
//funcion para colocar cookies
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
//funcion para leer cookies
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }

//Cargamos el SDK de facebook
//Reemplazamos 123456789 por el ID de nuestra aplicacion
    window.fbAsyncInit = function() {
        FB.init({
            appId: '123456789',
            xfbml: true,
            version: 'v2.5'
        });
//Con edgecreate lo que hacemos es controlar si el user dio like
        FB.Event.subscribe('edge.create', ver_like_ccw);
    };
//Como ven dice fr_FR eso es el idioma del like ;)
    (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/fr_FR/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
//funcion encargada de detectar el mobil
    function detectmob() { 
        if( navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)
        ){
            return true;
        } else {
            return false;
        }
    }
</script>

Como veem, não tem muita ciência o código em si, basicamente o truque está no CSS com o pointer event (evento de ponteiro) e depois são algumas camadas ocultando a curtida do usuário... Ao colocar o autolike na camada de baixo e cobri-la com outra, obtemos o efeito desejado...

Demo
(a demo está modificada para que funcione igual, independentemente se entra pelo Facebook ou não)

Inserir CODE, HTML ou PHP:

http://test.cicklow.me/like.html

Ajuda
FB.Event.subscribe
Pointer Events
Melhores práticas para compartilhar no Facebook
Tutorial 2 Base
Tutorial 1 Base

Licença
- Este tutorial pode ser reproduzido em qualquer outro lugar, desde que seja deixado um link para este post.
- Não é permitida a comercialização de forma alguma deste código, seja parcial, total ou derivados do mesmo.

Abraços...
PD: Odeio autolike... mas estava entediado XD 😛7:

Para os usuários de WP
Se quiserem que só seja funcional nos posts e não no início/buscas/etc do WP, apenas coloquem o JavaScript do passo 4 desta maneira:

PHP:

<?php if(is_single()){ ?>
Codigo del paso 4
<?php } ?>

Desta forma, o autoshare/autolike só será mostrado nos posts

E aqui deixo um exemplo de como ficaria em um WP (O WP é do tutorial: Seu próprio site de tarot)

E no FB:

Para que funcione com cada post no WP, vocês só precisam fazer estas modificações....
buscar

PHP:

if (getCookie('like') != 1) {

mudar por

PHP:

 if (getCookie('like<?php the_ID(); ?>') != 1) {

......
e também

PHP:

setCookie('like', '1', 100);

por

PHP:

setCookie('like<?php the_ID(); ?>', '1', 100);

isso faz com que funcione com cada post.

Se vocês tiverem outra chamada ao SDK do Facebook

HTML:

    (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/fr_FR/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

Pode ser que o script não funcione bem, ou simplesmente mostre a curtida em espanhol

Makonde · 11/12/2015

Muito obrigado, um abraço.

Daniel Muñoz · 11/12/2015

Muito obrigado por compartilhar, sem dúvida um vencedor da semana :encouragement:

Mcbite · 11/12/2015

Obrigado! 🙂

Cicklow · 11/12/2015

Daniel Muñoz disse:
Muito obrigado por compartilhar, sem dúvida um vencedor da semana :encouragement:

De nada... mas nunca competi com os tutoriais... uma vez ganhei um e deixei o prêmio para o segundo mais votado... penso que como mod não pega bem que ganhe alguém de dentro do fórum... é como se você faz um sorteio para os compradores de um negócio e um funcionário ganha... XD...

djfumon · 11/12/2015

[MENTION=9679]cicklow[/MENTION] muito bom tutorial, seria legal saber sobre o autoshare

Cicklow · 11/12/2015

djfumon disse:
[MENTION=9679]cicklow[/MENTION] muito bom tutorial, seria legal saber sobre o autoshare

os autoshare não existem... são apenas autolikes... este compartilha o post que o usuário está vendo... não é um autolike de uma URL, mas sim do post que o usuário vê...

djfumon · 11/12/2015

cicklow disse:
os autoshare não existem... são apenas autolikes... este compartilha o post que o usuário está vendo... não é um autolike de uma URL, mas sim do post que o usuário vê...

amm, pensava que tinha um por aí funcionando.

Cicklow · 11/12/2015

djfumon disse:
amm, pensava que tinha um por aí funcionando.

não... só colocaram o nome de autoshare... mas é apenas um like em um post. E ao ter os og:meta do Facebook, parece que um post foi compartilhado no mural, mas é apenas um like... o share implica abrir uma janela nova na qual aparece o quadro de compartilhar... isso não pode ser fraudado a partir de uma web (pode ser com alguma extensão no navegador, mas não a partir da web)...

Por isso coloquei que têm que colocar os og:meta em seu site, para que "pareça" que seu post foi compartilhado... embora só tenha dado like...

djfumon · 11/12/2015

cicklow disse:
não... só colocaram o nome de autoshare... mas é apenas um like em um post. E ao ter os og:meta do Facebook, parece que um post foi compartilhado no mural, mas é apenas um like... o share implica abrir uma janela nova na qual aparece o quadro de compartilhar... isso não pode ser fraudado a partir de uma web (pode ser com alguma extensão no navegador, mas não a partir da web)...

Por isso coloquei que têm que colocar os og:meta em seu site, para que "pareça" que seu post foi compartilhado... embora só tenha dado like...

ahh ok ok entendi, obrigado.

YeltsinReyes · 11/12/2015

Excelente tutorial cara, com isso dá para viralizar um bom post! :encouragement:

darkmouse · 11/12/2015

Interessante, vou testar para ver como me saio, muito obrigado!

bettotheflayer · 11/12/2015

cicklow disse:
não... só colocaram o nome de autoshare... mas é apenas um like em um post. E ao ter os og:meta do Facebook, parece que um post foi compartilhado no mural, mas é apenas um like... o share implica abrir uma janela nova na qual aparece o quadro de compartilhar... isso não pode ser fraudado a partir de uma web (pode ser com alguma extensão no navegador, mas não a partir da web)...

Por isso coloquei que têm que colocar os og:meta em seu site, para que "pareça" que seu post foi compartilhado... embora só tenha dado like...

Não dá para fazer para que, caso o usuário não esteja logado no Facebook, não apareça nada e a mensagem feche ao clicar em fechar janela 😀

É muito legal, na verdade, certamente com isso se consegue viralizar ao máximo 🙂

Usuario eliminado 136921 · 11/12/2015

Ótimo tutorial, só me falta ter Facebook kkkkkkk

carlosjulian · 11/12/2015

Gosto quando se trabalha com código e se deixa registrado o trabalho, obrigado [MENTION=9679]cicklow[/MENTION] vou testar daqui a pouco quando tiver tempo livre.

Abraços

intoroddex · 11/12/2015

Nada mal, boa contribuição :encouragement:

LuiggiC · 11/12/2015

[MENTION=9679]cicklow[/MENTION] Muito obrigado papu :encouragement:

shruken · 11/12/2015

+10 e aos favoritos, excelente tutorial, tem um "curti" bom homem

Carlos Joaquin · 11/12/2015

Nos favoritos, muito bom tutorial para viralizar um artigo. Vou utilizar em algum dos meus blogs para ver como funciona :encouragement:

melonidas · 11/12/2015

ah, já entendi ---

Tutorial: Como criar um LightBox com um quadro para curtir no Facebook automaticamente

Cicklow

Makonde

Daniel Muñoz

Mcbite

Cicklow

djfumon

Cicklow

djfumon

Cicklow

djfumon

YeltsinReyes

darkmouse

bettotheflayer

Usuario eliminado 136921

carlosjulian

intoroddex

LuiggiC

shruken

Carlos Joaquin

melonidas

Tópicos similares