Agregar botones redes sociales flotantes a mi blog

Darwin Fernandez · 2014-08-11T23:27:46-0500

Hola bueno navegando me encontré con unos botones me gusta , twiiter , google plus muy bonitos y quisiera ver si puedo agregarlos a mi blog , alguien sabe como o alguien tiene un tutorial de como hacerlo se lo agradecería

acá una imagen :

Alphax · 2014-08-11T23:33:16-0500

Link del blog donde lo viste.

Darwin Fernandez · 2014-08-11T23:43:12-0500

Lo vi en esta pagina : Ver Anime Online

yo he logrado ponerlo pero el google plus no funcione al darle click no pasa nada mm no se porque algo falla , aver si ustedes me podrian ayudar gracias por tu ayuda .

anferro · 2014-08-11T23:44:53-0500

Corp GamerSLatino dijo:
Lo vi en esta pagina : Ver Anime Online

yo he logrado ponerlo pero el google plus no funcione al darle click no pasa nada mm no se porque algo falla , aver si ustedes me podrian ayudar gracias por tu ayuda .

Que codigo pusiste para poder saber que editar

Darwin Fernandez · 2014-08-11T23:56:48-0500

anferro dijo:
Que codigo pusiste para poder saber que editar

Puse este codigo :

Insertar CODE, HTML o PHP:

<div class="compartir" id="sharefb">
<div style="padding: 30px 30px 0 25px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1406859257.html#_=1407819192613&amp;id=twitter-widget-0&amp;lang=es&amp;screen_name=TuCinema24&amp;show_count=false&amp;show_screen_name=false&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 61px; height: 20px;"></iframe>
<iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:72px; height:63px" src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/TuCinema24&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light" allowtransparency="true"></iframe>
<div id="___follow_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: 99px; height: 64px; 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: 99px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 64px;" tabindex="0" vspace="0" width="100%" id="I0_1407819192670" name="I0_1407819192670" src="https://apis.google.com/u/0/_/widget/render/follow?usegapi=1&amp;annotation=vertical-bubble&amp;height=24&amp;rel=publisher&amp;origin=http%3A%2F%2Fwww.animevk.net&amp;url=http%3A%2F%2Fplus.google.com%2F117243341745431453972&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es_419.FOxjXM9pI4Q.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAItRSTMigX4__XBdL9QHSduFWZLMx58YAg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1407819192670&amp;parent=http%3A%2F%2Fwww.animevk.net&amp;pfname=&amp;rpctoken=31907902" data-gapiattached="true"></iframe></div>
</div>
<div style="position: absolute;top: -14px;left: 108px;"><center><a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png',1)"><img alt="" id="Image1" name="Image1" onmouseup="document.getElementById('sharefb').style.display='none'" src="http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png" width="65" border="0" height="13"> </a></center></div>
</div>

y en el CSS puse este :

Insertar CODE, HTML o PHP:

.compartir {
background: url("http://www.animevk.net/wp-content/themes/animevk/img/likebg.png") no-repeat;
bottom: 1px;
float: right;
right: 3px;
position: fixed;
height: 115px;
width: 330px;
margin-bottom: 20px;
}

mmm no se si este bien pero puse esos 2 codigos y lo unico que no me funcionaba era el de google plus no se por que razones le daba click en seguir y no pasaba nada , aver si me ayudan porfa

anferro · 2014-08-12T00:22:33-0500

Intenta reemplazando esto:

<iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 99px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 64px;" tabindex="0" vspace="0" width="100%" id="I0_1407819192670" name="I0_1407819192670" src="https://apis.google.com/u/0/_/widget/render/follow?usegapi=1&annotation=vertical-bubble&height=24&rel=publisher&origin=http%3A%2F%2Fwww.animevk.net&url=http%3A%2F%2Fplus.google.com%2F117243341745431453972&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es_419.FOxjXM9pI4Q.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAItRSTMigX4__XBdL9QHSduFWZLMx58YAg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1407819192670&parent=http%3A%2F%2Fwww.animevk.net&pfname=&rpctoken=31907902" data-gapiattached="true"></iframe>

Insertar CODE, HTML o PHP:

<!-- Inserta esta etiqueta donde quieras que aparezca widget. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/115081025762845243709" data-rel="publisher"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de widget. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (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);
  })();
</script>

y en el nuevo codigo cambia:

TheNextWeb

por el nombre de tu pagina o ususario

Darwin Fernandez · 2014-08-12T01:59:41-0500

anferro dijo:

Intenta reemplazando esto:

Insertar CODE, HTML o PHP:

<!-- Inserta esta etiqueta donde quieras que aparezca widget. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/115081025762845243709" data-rel="publisher"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de widget. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (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);
  })();
</script>

y en el nuevo codigo cambia:

por el nombre de tu pagina o ususario

Listo ya lo agregue quedo perfecto

muchísimas gracias el código que agregue final quedo asi :

Insertar CODE, HTML o PHP:

<div class="compartir" id="sharefb">
<div style="padding: 30px 30px 0 25px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1406859257.html#_=1407819192613&amp;id=twitter-widget-0&amp;lang=es&amp;screen_name=TuCinema24&amp;show_count=false&amp;show_screen_name=false&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 61px; height: 20px;"></iframe>
<iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:72px; height:63px" src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/TuCinema24&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light" allowtransparency="true"></iframe>
<div id="___follow_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: 99px; height: 64px; background-position: initial initial; background-repeat: initial initial;"><!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="tall" data-href="https://plus.google.com/b/108191117707138250808/+Tucinema24/"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (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);
  })();
</script></div>
</div>
<div style="position: absolute;top: -14px;left: 108px;"><center><a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png',1)"><img alt="" id="Image1" name="Image1" onmouseup="document.getElementById('sharefb').style.display='none'" src="http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png" width="65" border="0" height="13"> </a></center></div>
</div>

asi me quedo

si hubiera algo para moverlo un poquito a la derecha al botón de google plus quedaría perfecto gracias amigo por tu ayuda

anferro · 2014-08-12T10:00:37-0500

Intenta cambiando:
el ancho que es de 72px por 80px

<div class="compartir" id="sharefb">
<div style="padding: 30px 30px 0 25px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1406859257.html#_=1407819192613&id=twitter-widget-0&lang=es&screen_name=TuCinema24&show_count=false&show_screen_name=false&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 61px; height: 20px;"></iframe>
<iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:72px; height:63px" src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/TuCinema24&layout=box_count&show_faces=false&width=72&height=63&action=like&font=tahoma&colorscheme=light" allowtransparency="true"></iframe>
<div id="___follow_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: 99px; height: 64px; background-position: initial initial; background-repeat: initial initial;">
<div class="g-plusone" data-size="tall" data-href="https://plus.google.com/b/108191117707138250808/+Tucinema24/"></div>


<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(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);
})();
</script></div>
</div>
<div style="position: absolute;top: -14px;left: 108px;"><center><a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png',1)"><img alt="" id="Image1" name="Image1" onmouseup="document.getElementById('sharefb').style.display='none'" src="http://www.animevk.net/wp-content/themes/animevk/img/cerrar.png" width="65" border="0" height="13"> </a></center></div>
</div>

Darwin Fernandez · 2014-08-12T13:14:55-0500

lo cambie el ancho y se desaparecio el boton de Me Gusta de facebook :sorrow:

habrá otra manera de hacerlo :'( ?

luismaster2009 · 15 Ene 2015

No me salio flotando porque?

JDRomero · 16 Ene 2015

Esta muy bueno ese botón, debieras compartirlo acá con un tutorial xD

Agregar botones redes sociales flotantes a mi blog

Darwin Fernandez

Alphax

Darwin Fernandez

anferro

Darwin Fernandez

anferro

Darwin Fernandez

anferro

Darwin Fernandez

luismaster2009

JDRomero