Box de Redes Sociais

• Descrição:

Boa tarde.

Estou tentando colocar as Box de Redes Sociais no meu Forum, seguindo o tutorial Box de Redes Sociais.

Aplicando este código e fazendo as alterações referidas no tutorial oficial;

Spoiler:

Mas o resultado não é bem o esperado, vejam estas imagens;

Spoiler:

O que estarei a fazer de errado?

• Informações:

PAGINAFACEBOOK -> Troque pelo Facebook desejado, utilize o nome dado no link da página.
GOOGLE+ -> Troque pelo desejado.
twitter-pagina -> Troque pelo twitter desejado.
novidades-assinar -> Para trocar o feed.

Kyo Panda escreveu:Olá,

Pelo o que pude verificar no código, você não alterou essa parte:

PAGINAFACEBOOK -> Troque pelo Facebook desejado, utilize o nome dado no link da página.
GOOGLE+ -> Troque pelo desejado.
twitter-pagina -> Troque pelo twitter desejado.
novidades-assinar -> Para trocar o feed.

Procure dentro do código essas tags e substitua pelas suas páginas.

Abraços.

Kyo Panda escreveu:Hum... Poderia manter o plugin ativado para que possamos analisar? Parece que o mesmo foi desabilitado na página.

Kyo Panda escreveu:Poderia nos passar o Javascript do Widget, com as alterações que fez?

Código:

<div>
    <style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script>
   <div id="on">
      
      <div id="facebook_right" style="top: 18%;">
         
         <div id="facebook_div">
         </div>
         
         <div>
             <img src="http://i.imgur.com/x0CZ66o.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/obloggueiro&width=200&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe>
         </div>
         
      </div>
      
      <div>
         
      </div>
      
   </div>
   
   <div>
      
   </div>
   
   <div id="on">
      
      <div id="twitter_right" style="top: 35%;">
         
         <div id="twitter_div">
            
         </div>
         
         <div>
             <img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: "profile", rpp: 4, interval: 1000, width: 246, height: 265, theme: { shell: { background: "#63BEFD", color: "#FFFFFF" }, tweets: { background: "#FFFFFF", color: "#000000", links: "#47a61e"} }, features: { loop: false, live: true, scrollbar: false, hashtags: false, timestamp: true, avatars: true, behavior: "all"} }).render().setUser("https://twitter.com/OBloggueiro").start(); </script>
         </div>
         
      </div>
      
      <div>
         
      </div>
      
   </div>
   
   <div>
      
   </div>
   
   <div id="on">
      
      <div id="google_plus_right" style="top: 52%;">
         
         <div id="google_plus_div">
            
         </div>
         
         <div>
             <img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png" />
            <div style="float:left;margin:10px 10px 10px 0;">
               
            </div>
            
            <div>
                <script type="text/javascript"> window.___gcfg = {lang: "en"}; (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="https://plus.google.com/+ObloggueiroPt/posts" data-width="180" data-height="69" data-theme="light">
                  
               </div>
               
               <div>
                  
               </div>
               
            </div>
            
            <div>
               
            </div>
            
         </div>
         
         <div>
            
         </div>
         
      </div>
      
      <div>
         
      </div>
      
   </div>
   
   <div>
      
   </div>
   
   <div id="on">
      
      <div id="feedburner_right" style=" top: 69%;">
         
         <div id="knfeedburner_div">
            
         </div>
         
         <div>
            
            <center>
               
            </center>
            
         </div>
         
         <div>
            
            <h4 style="color:#F66303;">
               
            </h4>
            
         </div>
         
         <div>
             Receba as novidades por e-mail:
         </div>
         
         <div>
            
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               
            </form>
            
         </div>
         
         <div>
             <input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
         </div>
         
         <div>
            
         </div>
         
         <div>
             <img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png" />
         </div>
         
      </div>
      
      <div>
         
      </div>
      
   </div>
   
   <div>
      
   </div>
</div>

Código:

<div>
    <style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script>
  <div id="on">
     
      <div id="facebook_right" style="top: 18%;">
         
        <div id="facebook_div">
            <img src="http://i.imgur.com/x0CZ66o.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/obloggueiro&width=200&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe>
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="twitter_right" style="top: 35%;">
         
        <div id="twitter_div">
            <img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: "profile", rpp: 4, interval: 1000, width: 246, height: 265, theme: { shell: { background: "#63BEFD", color: "#FFFFFF" }, tweets: { background: "#FFFFFF", color: "#000000", links: "#47a61e"} }, features: { loop: false, live: true, scrollbar: false, hashtags: false, timestamp: true, avatars: true, behavior: "all"} }).render().setUser("OBloggueiro").start(); </script>
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="google_plus_right" style="top: 52%;">
         
        <div id="google_plus_div">
           
        </div>
         
        <div>
            <img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png" />
            <div style="float:left;margin:10px 10px 10px 0;">
               
            </div>
           
            <div>
                <script type="text/javascript"> window.___gcfg = {lang: "en"}; (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="https://plus.google.com/+ObloggueiroPt/posts" data-width="180" data-height="69" data-theme="light">
                 
              </div>
               
              <div>
                 
              </div>
               
            </div>
           
            <div>
               
            </div>
           
        </div>
         
        <div>
           
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="feedburner_right" style=" top: 69%;">
         
        <div id="knfeedburner_div">
           
        </div>
         
        <div>
           
            <center>
               
            </center>
           
        </div>
         
        <div>
           
            <h4 style="color:#F66303;">
               
            </h4>
           
        </div>
         
        <div>
            Receba as novidades por e-mail:
        </div>
         
        <div>
           
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               
            </form>
           
        </div>
         
        <div>
            <input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
        </div>
         
        <div>
           
        </div>
         
        <div>
            <img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png" />
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
</div>

Kyo Panda escreveu:Tente trocar por este:

Código:

<div>
    <style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script>
   <div id="on">
      
      <div id="facebook_right" style="top: 18%;">
          
         <div id="facebook_div">
             <img src="http://i.imgur.com/x0CZ66o.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/obloggueiro&width=200&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe>
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="twitter_right" style="top: 35%;">
          
         <div id="twitter_div">
             <img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: "profile", rpp: 4, interval: 1000, width: 246, height: 265, theme: { shell: { background: "#63BEFD", color: "#FFFFFF" }, tweets: { background: "#FFFFFF", color: "#000000", links: "#47a61e"} }, features: { loop: false, live: true, scrollbar: false, hashtags: false, timestamp: true, avatars: true, behavior: "all"} }).render().setUser("OBloggueiro").start(); </script>
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="google_plus_right" style="top: 52%;">
          
         <div id="google_plus_div">
            
         </div>
          
         <div>
             <img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png" />
            <div style="float:left;margin:10px 10px 10px 0;">
                
            </div>
            
            <div>
                <script type="text/javascript"> window.___gcfg = {lang: "en"}; (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="https://plus.google.com/+ObloggueiroPt/posts" data-width="180" data-height="69" data-theme="light">
                  
               </div>
                
               <div>
                  
               </div>
                
            </div>
            
            <div>
                
            </div>
            
         </div>
          
         <div>
            
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="feedburner_right" style=" top: 69%;">
          
         <div id="knfeedburner_div">
            
         </div>
          
         <div>
            
            <center>
                
            </center>
            
         </div>
          
         <div>
            
            <h4 style="color:#F66303;">
                
            </h4>
            
         </div>
          
         <div>
             Receba as novidades por e-mail:
         </div>
          
         <div>
            
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                
            </form>
            
         </div>
          
         <div>
             <input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
         </div>
          
         <div>
            
         </div>
          
         <div>
             <img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png" />
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
</div>

Kyo Panda escreveu:Eu não estou conseguindo fazer este plugin do Twitter funcionar... Aqui vai minha sugestão. Aceda ao painel do Twitter:

https://twitter.com/settings/widgets

Crie o Widget desejado, clicando em Criar Novo, então copie e cole o código aqui, para que eu possa configurar a aba.

Código:

<a class="twitter-timeline" href="https://twitter.com/OBloggueiro" data-widget-id="349665915136262144">Tweets de @OBloggueiro</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Código:

<div>
    <style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script>
  <div id="on">
     
      <div id="facebook_right" style="top: 18%;">
         
        <div id="facebook_div">
            <img src="http://i.imgur.com/x0CZ66o.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/obloggueiro&width=200&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe>
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="twitter_right" style="top: 35%;">
         
        <div id="twitter_div">
            <img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png" /> <a class="twitter-timeline" href="https://twitter.com/OBloggueiro" data-widget-id="349665915136262144">Tweets de @OBloggueiro</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="google_plus_right" style="top: 52%;">
         
        <div id="google_plus_div">
           
        </div>
         
        <div>
            <img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png" />
            <div style="float:left;margin:10px 10px 10px 0;">
               
            </div>
           
            <div>
                <script type="text/javascript"> window.___gcfg = {lang: "en"}; (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="https://plus.google.com/+ObloggueiroPt/posts" data-width="180" data-height="69" data-theme="light">
                 
              </div>
               
              <div>
                 
              </div>
               
            </div>
           
            <div>
               
            </div>
           
        </div>
         
        <div>
           
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
   
  <div id="on">
     
      <div id="feedburner_right" style=" top: 69%;">
         
        <div id="knfeedburner_div">
           
        </div>
         
        <div>
           
            <center>
               
            </center>
           
        </div>
         
        <div>
           
            <h4 style="color:#F66303;">
               
            </h4>
           
        </div>
         
        <div>
            Receba as novidades por e-mail:
        </div>
         
        <div>
           
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               
            </form>
           
        </div>
         
        <div>
            <input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
        </div>
         
        <div>
           
        </div>
         
        <div>
            <img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png" />
        </div>
         
      </div>
     
      <div>
         
      </div>
     
  </div>
   
  <div>
     
  </div>
</div>

Kyo Panda escreveu:Aqui:

Código:

<div>
    <style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script>
   <div id="on">
      
      <div id="facebook_right" style="top: 18%;">
          
         <div id="facebook_div">
             <img src="http://i.imgur.com/x0CZ66o.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/obloggueiro&width=200&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe>
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="twitter_right" style="top: 35%;">
          
         <div id="twitter_div">
             <img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png" /> <a class="twitter-timeline" href="https://twitter.com/OBloggueiro" data-widget-id="349665915136262144">Tweets de @OBloggueiro</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="google_plus_right" style="top: 52%;">
          
         <div id="google_plus_div">
            
         </div>
          
         <div>
             <img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png" />
            <div style="float:left;margin:10px 10px 10px 0;">
                
            </div>
            
            <div>
                <script type="text/javascript"> window.___gcfg = {lang: "en"}; (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="https://plus.google.com/+ObloggueiroPt/posts" data-width="180" data-height="69" data-theme="light">
                  
               </div>
                
               <div>
                  
               </div>
                
            </div>
            
            <div>
                
            </div>
            
         </div>
          
         <div>
            
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
    
   <div id="on">
      
      <div id="feedburner_right" style=" top: 69%;">
          
         <div id="knfeedburner_div">
            
         </div>
          
         <div>
            
            <center>
                
            </center>
            
         </div>
          
         <div>
            
            <h4 style="color:#F66303;">
                
            </h4>
            
         </div>
          
         <div>
             Receba as novidades por e-mail:
         </div>
          
         <div>
            
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                
            </form>
            
         </div>
          
         <div>
             <input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
         </div>
          
         <div>
            
         </div>
          
         <div>
             <img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png" />
         </div>
          
      </div>
      
      <div>
          
      </div>
      
   </div>
    
   <div>
      
   </div>
</div>