Mostrar los seguidores de twitter,facebook,feedburner con texto y imagen

Anteriormente les mostré como mostrar los seguidores de twitter,facebook con imagen y texto mas personalizado al gusto de cada persona que no sea el mismo botoncito de siempre, bueno hoy les voy a mostrar los lectores de feedburner también quiere decir que les mostrare a los tres juntos twitter,facebook y feedburner cada uno con una imagen adelante al texto lo que les voy a brindar hoy. he visto que lo buscan muchas personas pero lo único que brindan es en php mayormente para wordpress pero yo se los voy a brindar para que  puedan usarlo en blogger y en los sitios web sin necesidad de php .

Lo primero que vamos a hacer es nos dirigimos a diseño > Edición de HTML > Expandir plantillas de artilugios
podemos usar Ctrl+F para búsqueda mas rápida.
y el código que pondríamos justo antes de la etiqueta </head> sería este:

<script type='text/javascript'>
//<![CDATA[
  function fbfans(json) {
    var misfans = json.likes;
    var pagelink = json.link; 
    document.write("<span class='fan_count'>" + misfans + "</span></a>");
  }
//--><!]]>count facebook
</script>

Una ves puesto el codigo antes del vamos a colocar lo siguiente este lo podemos colocar en cualquier lugar de nuestro sitio.la mejor opcion y mas rapida es colocarlo en un gadget para eso vamos a:
Diseño> añadir gadget >html-javascript y pegamos el siguiente codigo

<script src='http://dl.dropbox.com/u/26560612/portamento-min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
   var path = location.pathname.substring(1);
   if ( path )
      $('.color a[href$="' + path + '"]').attr('class', 'color');
       });
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'tubetrucos'},
dataType: 'jsonp',
success: function(data) {
$('#followers').html(data.followers_count);
}
});
$("#totop").click(function(){
          $('html, body').animate({ scrollTop: 0 }, 'slow');
})
$(document).ready(function(){
$('.socialtip').delay(800).fadeOut(4000);
$('.social').portamento({wrapper: $('.post-footer')});
$(".slidingDiv").hide();
        $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
       $(this).text($(this).text() == 'Más...' ? 'Menos...' : 'Más...');
    });
});
</script>
<table style="" align="center" cellpadding="2" cellspacing="2">
<tbody>
<tr><td><div style="float: left;"><img style="width: 44px; height:44px;" src="http://img72.imageshack.us/img72/5376/twittery.png"/></div>
<a href="http://twitter.com/tubetrucos" target="_blank" ><div style=" float: left; text-align: left; font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<span id="followers"></span> Seguidores en twitter</div><br /><!--[if IE]><br /><![endif]-->
<div style=" float: left; text-align: left; font-size:12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">Sigueme en twitter</div></a><div style='clear:both;'/></div></td></tr>

<tr><td><div style="float: left;"><img style="width: 44px; height:44px;" src="http://dl.dropbox.com/u/25944020/facebook_icon.png"/></div>
<div style=" float: left; text-align: left; font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<script src="http://graph.facebook.com/161206907309924?callback=fbfans"></script> Mis fans en facebook</div><br /><!--[if IE]><br /><![endif]-->
<a href="http://www.facebook.com/pages/tube-trucos/161206907309924"target="_blank">
<div style=" float: left; text-align: left; font-size:12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">Sigueme en facebook</div></a><div style='clear:both;'/></div></td></tr>

<tr><td><div style="float: left;"><img style="width: 44px; height:44px;" src="http://dl.dropbox.com/u/25944020/rss.png"/></div>
<a href="http://feeds.feedburner.com/tubetrucos" target="_blank" ><div style=" float: left; text-align: left; font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/25944020/tubetrucoscontadorfeed.js?uri=tubetrucos"></script>  Suscriptores</div><br /><!--[if IE]><br /><![endif]-->
<div style=" float: left; text-align: left; font-size:12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">suscribirme tambiem!</div></a></td></tr>
</tbody></table>

Una ves puesto el codigo guardamos y listo es todo.

Lo que esta en rojo son los ID  correspondientes de uno  en cada sitio ejemplo el mio en twitter es tubetrucos
Lo que esta en naranja  son las imagenes las cuales pueden cambiar si quieren
lo que esta en amarillo son los texto los pueden modificar a sus gustos

Bueno esto es todo espero y les sirva de algo este codigo recuerden que compartir y comentar no cuesta nada denle click a los botoncitos de facebook,twitter,google+ y bitacoras y asi otros que a lo mejor tambien necesitan el código lo podran ver muchas gracias.

Tweet

Compartir esta entrada :

Quizás también le interese:

Sí disfrutas de estas entradas solo has click aquí, o suscribete para recibir mas entradas como estas.

Subscribirse por RSS Feed

Su informacion nunca sera compartida.