M
MixViral
Gamma
Es importante resaltar, que tutoriales como este pueden ser encontrado en Internet, sin embargo este en especial lo he arreglado con los codigos actuales de facebook y he reducido significativamente la cantidad de lineas.
Con este sencillo pero útil truco podremos agregar a nuestras entradas una serie de botones sociales que incluyen facebook, twitter y G+ que bajaran o subir con la pagina permitiendo al visitante la posibilidad de picar en los botones.
INSTALACION:
Primero agregamos los estilos CSS y el JS buscamos </head> y antes de esta etiqueta agregamos el siguiente codigo:
Insertar CODE, HTML o PHP:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: 5px;
border-right: 0px;
padding: 5px;
background-color: #FFF;
z-index: 9;
}
</style>Agregamos los scripts para que los botones funcionen, justo antes de </head> agregamos esto:
Insertar CODE, HTML o PHP:
<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 = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es'}
</script>Ahora buscamos <div class='post-header'> y debajo de esta agregamos el siguiente codigo:
Insertar CODE, HTML o PHP:
<b:if cond='data:blog.pageType == "item"'>
<div id='BotonesFlotantes'>
<div style='height: 69px;'><div class='fb-like' data-layout='box_count' expr:href='data:post.url'/></div>
<div style='height: 69px;'><div class='fb-share-button' data-layout='box_count' expr:href='data:post.url'/></div>
<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div><div class='g-plusone' data-size='tall' expr:href='data:post.url'/></div>
</div>
</b:if>Esta segundo código debe ser agregado según el tipo de plantilla que tengan...
DEMO: 20 Fotos Historias que debes conocer | Mix Viral
y Bueno compañeros, espero les sirva este tutorial como les mencione y como podran ver el codigo que se usa de lo botones es realmente simple pero 100% funcional, si te gusto picar en Me Gusta no cuesta nada 🙂 Saludos!
Última edición: