Redes sociais barra lateral

• Descrição:
  

Olá senhores!

Gostaria de saber como adicionar, widget de compartilhar das redes sociais na aba lateral, achei muito pratico.
Imagem


Tem um exemplo neste site, localizado na aba lateral esquerda.
http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html

• Informações:
  

Leia-me Testo Grande:

Código:

<!-- Começo código -->
<div style="display:scroll;position:fixed;top:160px;margin-left: -80px;">
<!-- FEXA começo código -->
 
<!-- Style CSS -->
<style type="text/css">
.dvin{
     border-style:solid;
     border-width: 3px;
     border-color:#e3e3e3;
     padding-top:3px;
     padding-bottom:3px;
     padding-right:2px;
     padding-left:2px;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }
 
 .tweet {
      text-align: center;
      margin-top: 5px;
 }
 
 .face {
      text-align: center;
      margin-top: 5px;
 }
 
  .like {
     text-align: center;
     margin-right:-5px;
 
 }
 
 .plus {
     text-align: center;
         margin-top: 2px;
 }
 .addthis {
      margin-left: 5px;
      text-align: center;
      margin-top: 55px;
 }
 
</style>
 
<!-- FEXA Style CSS -->
 
<!-- Box -->
<div class="dvin">
<!-- FEXA bok -->
 
    <!--FaceBook like-->
<div class="like">
<iframe scrolling="no" frameborder="0" -5px; allowtransparency="true" style="border-style:solid; border-color:#e3e3e3;
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; overflow:hidden; width:60px; height:65px;"
src="//www.facebook.com/plugins/like.php?app_id=114472178657274&href=HTTP://INTERNOVINET.COM&send=false&layout=box_count&
width=60&show_faces=true&action=like&colorscheme=light&font&height=65"></iframe>
    </div>
    <!-- FEXA FaceBook like -->
 
    <!-- Google +1 -->
<div class="plus">
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang: 'pt-BR'}
    </script>
    <g:plusone size="tall"></g:plusone>
 </div>
<!-- FEXA Google +1 -->
 
    <!-- Tweet -->
<div class="tweet">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="INTERNOVINET" rel="nofollow">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<!-- FEXA tweet -->
 
<!-- Share FaceBook -->
<div class="face">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<!-- FEXA Share FaceBook -->
 
<!-- AddThis -->
<div class="addthis">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ea7403239c7ca56"></script>
</div>
<!-- FEXA AddThis -->
 
<!-- Fim BOX-->
 </div>
<!-- FEXA fim BOX -->
 
   <!-- Fim código -->
     </div>
     <!-- FEXA fim código -->

uatyla escreveu:Curti do Facebook, Twitter, G+

Código:

jQuery(document).ready(function(){$('p.right').append('<a href="https://twitter.com/share" class="twitter-share-button" data-via="Actiffeed" data-lang="pt">Tweetar</a> <div class="g-plusone" data-size="medium" data-annotation="none"></div>');
      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/platform.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();!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');});

uatyla escreveu:

• Descrição:
  

Olá senhores!

Gostaria de saber como adicionar, widget de compartilhar das redes sociais na aba lateral, achei muito pratico.
Imagem


Tem um exemplo neste site, localizado na aba lateral esquerda.
http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html

---

• Informações:
  

Fórum:	http://vidadeaquarista.forumeiros.com	Versão:	PHPBB3
Tipo:	Pedido de código	Tags:	redes,sociais,barra,lateral

---

Código:

<ul class="social-buttons vertical"><li><div class="socialite twitter-share socialite-instance socialite-loaded" data-text="Como adicionar Gadget e Widget flutuante na barra lateral do Blog" data-url="http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-count="vertical" data-via="FerramentasBlog" data-default-href="http://twitter.com/share?url=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-socialite="1"><iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1399599786.html#_=1399671980991&amp;count=vertical&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;size=m&amp;text=Como%20adicionar%20Gadget%20e%20Widget%20flutuante%20na%20barra%20lateral%20do%20Blog&amp;url=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;via=FerramentasBlog" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-vertical" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 59px; height: 62px;"></iframe></div></li><li><div class="socialite googleplus-one socialite-instance socialite-loaded" data-size="tall" data-href="http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-default-href="https://plus.google.com/share?url=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-socialite="2"><div class="g-plusone" data-size="tall" data-href="http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-default-href="https://plus.google.com/share?url=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-socialite="2" id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px; background-position: initial initial; background-repeat: initial initial;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" tabindex="0" vspace="0" width="100%" id="I0_1399671980830" name="I0_1399671980830" src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&amp;size=tall&amp;default-href=https%3A%2F%2Fplus.google.com%2Fshare%3Furl%3Dhttp%253A%252F%252Fwww.ferramentasblog.com%252F2013%252F05%252Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;socialite=2&amp;origin=http%3A%2F%2Fwww.ferramentasblog.com&amp;url=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.pt_BR.-Q-xq5mLEcU.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Fz%3Dzcms%2Frs%3DAItRSTOdzKK5cH2MtyFgM5q3_xttdXQYEw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Constartinteraction%2Conendinteraction&amp;id=I0_1399671980830&amp;parent=http%3A%2F%2Fwww.ferramentasblog.com&amp;pfname=&amp;rpctoken=16927715" data-gapiattached="true" title="+1"></iframe></div></div></li><li><div class="socialite facebook-like socialite-instance socialite-loaded" data-href="http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-send="true" data-layout="box_count" data-width="160" data-show-faces="false" data-default-href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;t=Como+adicionar+Gadget+e+Widget+flutuante+na+barra+lateral+do+Blog" data-socialite="3"><div class="fb-like fb_iframe_widget" data-href="http://www.ferramentasblog.com/2013/05/como-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html" data-send="true" data-layout="box_count" data-width="160" data-show-faces="false" data-default-href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;t=Como+adicionar+Gadget+e+Widget+flutuante+na+barra+lateral+do+Blog" data-socialite="3" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=345473792208615&amp;href=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;layout=box_count&amp;locale=en_US&amp;sdk=joey&amp;send=true&amp;show_faces=false&amp;width=160"><span style="vertical-align: bottom; width: 49px; height: 86px;"><iframe name="f3e8e4740" width="160px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=345473792208615&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D41%23cb%3Df22b1e33d%26domain%3Dwww.ferramentasblog.com%26origin%3Dhttp%253A%252F%252Fwww.ferramentasblog.com%252Ff3374d1e8%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fwww.ferramentasblog.com%2F2013%2F05%2Fcomo-adicionar-gadget-e-widget-flutuante-na-barra-lateral-do-blog.html&amp;layout=box_count&amp;locale=en_US&amp;sdk=joey&amp;send=true&amp;show_faces=false&amp;width=160" style="border: none; visibility: visible; width: 49px; height: 86px;" class=""></iframe></span></div></div></li></ul>

Código:

 
<!--  Começo código  --><style type="text/css">
.dvin{
     border-style:solid;
      border-width: 3px;
     border-color:#e3e3e3;
     padding-top:10px;
     padding-bottom:50px;
     padding-right:2px;
     padding-left:2px;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }
  .plus {
     text-align: center;  
     margin-top: 5px;
     margin-left: 1px;
 }
 .tweet {
      text-align: center;
      margin-top: 3px;
 }
 .face {
      text-align: center;
      margin-top: 4px;
 }
</style>
<div style="position: fixed; top: 40%; right: 3px">
   <div class="dvin">
      <!--  Google +1  -->
      <div class="plus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'pt-BR'};}</script><g:plusone size="tall"></g:plusone>
      </div>
      <!--  Tweet  -->
      <div class="tweet">
          <a rel="nofollow" href="http://twitter.com/share" data-via="Internovinet" data-count="vertical" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      </div>
      <!--  Facebook  -->
      <div class="face"><a type="box_count" name="fb_share" href="http://www.facebook.com/sharer.php">Share</a><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
      </div>
   </div>
</div>

Código:

<!--  Começo código  --><style type="text/css">
  .plus {
    text-align: center; 
    margin-top: 5px;
    margin-left: 1px;
 }
 .tweet {
      text-align: center;
      margin-top: 3px;
 }
 .face {
      text-align: center;
      margin-top: 4px;
 }
</style>
<div style="position: fixed; top: 40%; right: 3px">
  <div class="dvin">
      <!--  Google +1  -->
      <div class="plus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'pt-BR'};}</script><g:plusone size="tall"></g:plusone>
      </div>
      <!--  Tweet  -->
      <div class="tweet">
          <a rel="nofollow" href="http://twitter.com/share" data-via="Internovinet" data-count="vertical" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      </div>
      <!--  Facebook  -->
      <div class="face"><a type="box_count" name="fb_share" href="http://www.facebook.com/sharer.php">Share</a><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
      </div>
  </div>
</div>