Botones flotantes para compartir (Incluído el botón +1)

Previamente había creado mediante jQuery una forma de mostrar botones para compartir en Twitter y Facebook flotando en el blog. En esta oportunidad, modificando un poco los valores añadí una tercera función: El botón +1 de Google.

Este botón se puede implementar añadiendo los botones para compartir debajo de cada entrada, pero para algunos no es una opción fiable ya que utilizamos otros métodos para compartir nuestro contenido y sería redundante tener duplicaciones de los botones.

Recomiendo el uso de este botón ya que de la cantidad de votaciones que obtengamos en nuestras entradas, se valdrá nuestra posición en Google.

Vista previa de los botones:

Añadiendo esta función en Blogger:

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' buscamos la siguiente línea:

<data:post.body/>

Arriba de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='cajaflotante'>

<div class='boton'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='NOMBRE-TWITTER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div>

<div class='boton'>
<div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=53&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:65px;'/></div> </div>

<div class='plusbutton'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/>
</div>

</div>
</b:if>

Reemplaza lo que está en color rojo por tu nombre de usuario en Twitter

Paso 2: Añadiendo CSS:

Ahora buscaremos la siguiente línea:

]]></b:skin>

Arriba de esta, pegaremos el siguiente código:

#cajaflotante {
float: right;
margin-left: -92px;
background: #fff;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #C0C0C0;
-webkit-box-shadow: 5px 5px 5px #C0C0C0;
}
#cajaflotante .boton {
margin:0px auto;
padding: 5px;
}

#cajaflotante .plusbutton {
margin:0px auto;
padding:0 15px;
}

Paso 3: Añadiendo jQuery a la plantilla:

Omite este paso si ya tienes jQuery instalado en tu Blog.

Ahora buscaremos la siguiente línea:

]]></b:skin>

Inmediatamente después de esta, pegaremos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Paso 4: Añadiendo el script:

Ahora buscaremos la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'>
$(document).ready(function() {
var $sidebar = $("#cajaflotante"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 65;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

Ahora guarda los cambios y listo: