21 de janeiro de 2017

Popup Curtir Facebook para Blogger

Estou trazendo esse recurso pra vocês, apesar de ter muitos por aí na internet, vou mostrar um jeito fácil explicando passo a passo para que exiba um Popup com jQuery baseado no lightbox. Ele vai ser exibido segundos após o visitante acessar a sua página.


Esse recurso é bem interessante se você deseja aumentar o número de seguidores que acompanham o seu blog no Facebook.

Adicionando Popup curtir facebook no Blogger

Vamos lá.. siga atentamente os passos abaixo para que tudo ocorra como planejado.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.


  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML, clique sobre o editor e tecle CTRL+F e procure por </body> e acima do trecho encontrado cole:
  3. 
    <div id='mba-likebox-bg'>
    <div id='mba-likebox-bg-out'>
    </div>
    <div id='mba-likebox'>
    <div id='mba-likebox-out'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fajudaemcodigo&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false&' style='width:390px; height: 230px;'/>
    </div>
    </div>
    
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
    options.expires = -1;
    }
    if (typeof options.expires === 'number') {
    var days = options.expires, t = options.expires = new Date();
    t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
    encodeURIComponent(key), '=',
    options.raw ? value : encodeURIComponent(value),
    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
    options.path ? '; path=' + options.path : '',
    options.domain ? '; domain=' + options.domain : '',
    options.secure ? '; secure' : ''
    ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
    };
    //]]>
    </script>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    if($.cookie('popup_user_login') != 'yes'){
    $('#mba-likebox-bg').delay(100).fadeIn('medium');
    $('#mba-likebox-out, #mba-likebox-bg-out').click(function(){
    $('#mba-likebox-bg').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
    });
    </script>
    
  4. Altere o ajudaemcodigo destacado no código acima para sua página no Facebook, veja na imagem abaixo.
  5. Agora procure por ]]></b:skin> e imediatamente acima cole:
  6. 
    #mba-likebox-bg {
    display:none;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    }
    #mba-likebox-bg-out {
    width:100%;
    height:100%;
    }
    #mba-likebox {
    background:#fff;
    padding: 20px 10px 10px 10px;
    top: 20%;
    left: 33%;
    position: absolute;
    -webkit-box-shadow: inset 0 10px 0 0 #3b579d;
    -moz-box-shadow: inset 0 10px 0 0 #3b579d;
    box-shadow: inset 0 10px 0 0 #3b579d;
    }
    #mba-likebox-out {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #e1e1e1;
    z-index: 999;
    }
    #mba-likebox-out:before {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    content: "\f00d";
    text-align:center;
    display: block!Important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background:#3b579d;
      }
    #mba-likebox-out:hover:before{
    color:#fff;
      }
    
  7. Pronto, agora clique em Salvar Modelo
Espero que essa dica lhe ajude a conseguir mais curtidas em sua fã page.

Dúvidas? deixe um comentário abaixo

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

2 comentários

O pessoal do Código Blogger estão de parabéns!

adicionei o código no meu blog, porem o código não respeita o para de 7 dias dos cookies, toda vez que atualizo a pagina aparece o pop up, fiz o teste em todos os navegadores.
tem como corrigir essa falha?
Blog: http://empregosdf.blogspot.com/

Desde já agradeço!

Olá John,

Por favor verifique se você está utilizando a biblioteca do jQuery.


Abrir lista de emoticonFechar lista de emoticon