Redes sociales flotantes en tu blog

Hace ya unos días que empezamos nuestra Guía SEO para Bloggers, y en ella dejamos claro la importancia de nuestro blog en las principales redes sociales como Facebook, o sobre todo, Twitter.

Para ello os vamos a traer un código para que puedan compartir nuestras entradas en las principales redes sociales, y además, siempre la vereís en pantalla, por que es flotante.
Este código nos permitirá compartir las entradas en Facebook, Twitter y Google Plus, y es muy fácil de instalar y cualquier usuario lo puede hacer.
Para hacerlo, pondremos un sencillo código JQuery, vamos allá.
Para empezaremos iremos a nuestro panel de administración – Plantillas – Edición HTML y marcamos la opción Expandir plantillas de artilugios.
Pegaremos el siguiente código antes de que acabe el </head>

<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: -100px; /* Distancia desde la izquierda */

border: 1px solid #FB5F55; /* Borde del contenedor */

border-right: 0px;

padding: 10px;

background-color: #FFF; /* Color de fondo del contenedor */

z-index:9;

}

#BotonesFlotantes div {

margin: 10px 0;

}

</style>

 

Después buscamos esta línea

<div class=’post-header’>

Una vez dentro de este div, colocamos el siguiente código

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’BotonesFlotantes’>
<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=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:73px; height:63px’/></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><script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/><g:plusone size=’tall’/></div>

</div>
</b:if>

Deja tu comentario!