Fantástica Box expansível para Facebook, Google Plus e Twitter

Share on facebook
Share on google
Share on twitter
Share on linkedin

Acesse o Painel do Blogger, clique imediatamente na guia Layout e depois em Adicionar Gadget e escolha o tipo Html/JavaScript e cole todo código a seguir e salve. 
<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 = "http://connect.facebook.net/pt_BR/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
if (typeof (jQuery) == 'undefined') { 
    //output the script (load it from google api) 
    document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>"); 

</script> 
<style type="text/css"> 
.fblbCenterOuter *, .fblbReset * { 
    clear: none; 
    margin: 0; 
    padding: 0; 
    border: 0;   
    font-size: 100%; 
    line-height: 18px; 

.fblbCenterOuter { 
    position: fixed; 
    top: 0; 
    height:100%; 
    display:table; 
    vertical-align:middle; 
    z-index: 10000; 

.fblbCenterInner { 
    position:relative; 
    vertical-align:middle; 
    display:table-cell; 

/* Fixed top */ 
.fblbCenterOuter.fblbFixed { 
    position: fixed; 
    top: 0; 
    height: auto; 
    display: block; 
    vertical-align: top; 
    z-index: 10000; 

.fblbFixed .fblbCenterInner { 

.fblbWrap { 
    font-family: Arial, Helvetica, sans-serif; 
    text-align: left; 
    position: relative; 

.fblbRight .fblbForm { 
    /* margin-left: 60px;*/ 

.fblbHead { 
    position: absolute; 
    z-index: 9999; 
    top: 50%; 
    display: block; 
    text-indent: -9999em; 
    overflow: hidden; 
    cursor: pointer; 

.fblbForm { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

.fblbInner { 
    min-height:150px; 
    position: relative; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

.fblbHeader { 
    font-size: 12px; 
    line-height: 16px; 
    font-weight: bold; 
    margin-bottom: 15px; 
    text-transform: uppercase; 

/* 
.fblbInnerlight { 
    background: #fff; 

.fblbInnerdark { 
    background: #333; 

.fblbTheme0 .fblbForm { 
    background: #3b5998; 

*/ 
/* Tabs */ 
.fblbCenterOuterFb.fblbRight .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb1-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb2-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb3-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab4 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb4-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab5 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb5-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab6 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb6-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb7-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb8-right.png); 

.fblbCenterOuterFb.fblbRight .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb9-right.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb1-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb2-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb3-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab4 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb4-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab5 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb5-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab6 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb6-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb7-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb8-left.png); 

.fblbCenterOuterFb.fblbLeft .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/fb9-left.png); 

.fblbCenterOuterTw.fblbRight .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw1-right.png); 

.fblbCenterOuterTw.fblbRight .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw2-right.png); 

.fblbCenterOuterTw.fblbRight .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw3-right.png); 

.fblbCenterOuterTw.fblbRight .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw7-right.png); 

.fblbCenterOuterTw.fblbRight .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw8-right.png); 

.fblbCenterOuterTw.fblbRight .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw9-right.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw1-left.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw2-left.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw3-left.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw7-left.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw8-left.png); 

.fblbCenterOuterTw.fblbLeft .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/tw9-left.png); 

.fblbCenterOuterGp.fblbRight .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp1-right.png); 

.fblbCenterOuterGp.fblbRight .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp2-right.png); 

.fblbCenterOuterGp.fblbRight .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp3-right.png); 

.fblbCenterOuterGp.fblbRight .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp7-right.png); 

.fblbCenterOuterGp.fblbRight .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp8-right.png); 

.fblbCenterOuterGp.fblbRight .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp9-right.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab1 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp1-left.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab2 .fblbHead { 
    width: 48px; 
    height: 155px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp2-left.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab3 .fblbHead { 
    width:  58px; 
    height: 60px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp3-left.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab7 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp7-left.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab8 .fblbHead { 
    width: 28px; 
    height: 90px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp8-left.png); 

.fblbCenterOuterGp.fblbLeft .fblbTab9 .fblbHead { 
    width:  35px; 
    height: 36px; 
    background: url(http://bloggeritems.com/image/tpfanbox/gp9-left.png); 

</style> 
<script type="text/javascript"> 
/* 
Blogger Widget by Tien Nguyen 
Site: BloggerItems.com 
*/ 
//Setting_begin 
var Fb_Url='URL DA PÁGINA DO FACEBOOK'; 
var Tw_Url='USUÁRIO DO TWITTER'; 
var Gp_Url='URL DA PÁGINA DO GOOGLE PLUS'; 
var Tab_Style=8; 
var Fix_Right=true; 
var Fb_En=true; 
var Tw_En=true; 
var Gp_En=true; 
//Setting_end 

////Hidden widget to display as plugin 
////and pre load media for not delay when user hover other image 
document.write('<div class="bitp3pots-achor-hook" style="display:none"></div>'); 
$('.bitp3pots-achor-hook').parents('.widget').each(function(){ 
        $(this).children('h2').remove();                    
        $(this).attr('class','bitp3pots-plugin'); 
        $(this).attr('style','margin:0!important;padding:0!important;width:0!important;height:0!important;');                         
}); 

var Tp_Fb = '<div class="fblbCenterOuter fblbCenterOuterFb fblbFixed '+((Fix_Right) ? 'fblbRight':'fblbLeft')+'" style="margin-top: 50px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #3b5998; height: 350px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -175px; '+((Fix_Right) ? 'right':'left')+': 305px;">Facebook</h2><div class="fblbInner" style="background: #ffffff;"><div class="fb-like-box" data-href="'+Fb_Url+'" data-width="292" data-height="350" data-show-faces="true" data-stream="false" data-header="true"></div></div></div></div></div></div>'; 
var Tp_Tw = '<div class="fblbCenterOuter fblbCenterOuterTw fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 250px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #33ccff; height: 400px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -200px; '+((Fix_Right) ? 'right':'left')+': 305px;">Twitter</h2><div class="fblbInner"><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 30000,width: 300,height: 335,    theme: {shell: {background: \'#33ccff\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#000000\',links: \'#47a61e\'}},features: {loop: false,live: false,scrollbar: true,avatars: true,behavior: \'all\'}}).render().setUser(\''+Tw_Url+'\').start();<\/script></div></div></div></div></div>'; 
var Tp_Gp = '<div class="fblbCenterOuter fblbCenterOuterGp fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 150px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #000000; height: 150px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -75px; '+((Fix_Right) ? 'right':'left')+': 305px;">Google Plus</h2><div class="fblbInner" style="background: #000000; height: 150px;"><link href="'+Gp_Url+'" rel="publisher" /><script type="text/javascript">window.___gcfg = {lang: \'pt-BR\'};(function() {var po = document.createElement("script");po.type = "text/javascript"; po.async = true;po.src ="https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po, s);})();<\/script><div class="g-plus" data-href="'+Gp_Url+'" data-size="badge"></div><div style="padding: 15px; overflow: auto; height: -16px;"></div></div></div></div></div></div>'; 
var Tp_Main = ((Fb_En) ? Tp_Fb : '') + ((Tw_En) ? Tp_Tw : '') + ((Gp_En) ? Tp_Gp : ''); 
document.write(Tp_Main); 
</script> 

<script type="text/javascript"> 
<!-- 
jQuery(document).ready(function(){ 
var fblbFbOrgRight=jQuery('.fblbCenterOuterFb').css('right'); 
var fblbFbOrgLeft=jQuery('.fblbCenterOuterFb').css('left'); 
jQuery('.fblbRight.fblbCenterOuterFb').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({ 
    right: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({ 
    right: fblbFbOrgRight 
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width()); 
}); 
jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({ 
    left: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({ 
    left: fblbFbOrgLeft 
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width()); 
}); 
var fblbTwOrgRight=jQuery('.fblbCenterOuterTw').css('right'); 
var fblbTwOrgLeft=jQuery('.fblbCenterOuterTw').css('left'); 
jQuery('.fblbRight.fblbCenterOuterTw').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({ 
    right: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({ 
    right: fblbTwOrgRight 
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width()); 
}); 
jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({ 
    left: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({ 
    left: fblbTwOrgLeft 
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width()); 
}); 
   
   
var fblbGpOrgRight=jQuery('.fblbCenterOuterGp').css('right'); 
var fblbGpOrgLeft=jQuery('.fblbCenterOuterGp').css('left'); 
jQuery('.fblbRight.fblbCenterOuterGp').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({ 
    right: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({ 
    right: fblbGpOrgRight 
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width()); 
}); 
jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').hover( 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({ 
    left: -3 
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width()); 
  }, 
  function(){ 
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({ 
    left: fblbGpOrgLeft 
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width()); 
}); 
   
// =================== 
jQuery('.fblbCenterOuter').find('.fblbForm').hover( 
  function(){ 
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).hide(); 
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))-100); 
  }, 
  function(){ 
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).show(); 
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))+100); 
}); 
}); 
--> 
</script> 

Não esqueça de trocar as partes do código que estão destacadas em vermelho pelo que é pedido. OBS: Não altera nada além do que está destacado. 

Deixe seu comentário

Quem somos

A Entendedor Digital é uma empresa de marketing digital que tem como objetivo ajudar pequenas, médias e grandes empresas a venderem mais pela internet. 

Posts recentes

Acompanhe-nos

Receba novidades por e-mail

Garantimos a segurança e privacidade dos seus dados. Não enviaremos SPAM.