Tutorial: Tutorial: Botón personalizado de Facebook con contador para WordPress

  • Autor Autor xxSakuraxx
  • Fecha de inicio Fecha de inicio
xxSakuraxx

xxSakuraxx

Dseda
Verificación en dos pasos activada
Hace un tiempo estuve investigando sobre como extraer los contadores para los botones de las redes sociales más utilizadas en nuestro medio y me di cuenta de que no había mucha información actualizada, en especial para wordpress.

pay4.jpg

Así que aquí vamos con un botón que podrás colocar debajo de tus entradas o donde desees.

Para facebook usaremos su respectiva api que nos da la información sobre cantidad de: "me gusta", "compartidos" y "comentarios"

Por ejemplo al colocar lo siguiente en la barra de direcciones:

Insertar CODE, HTML o PHP:
http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=http://forobeta.com

Nos mostrará sus estadísticas

Insertar CODE, HTML o PHP:
[{"url":"http:\/\/forobeta.com","normalized_url":"http:\/\/www.forobeta.com\/",[B]"share_count":202[/B],[B]"like_count":35[/B],[B]"comment_count":0,"total_count":237[/B],"click_count":0,"comments_fbid":"10150108161281232","commentsbox_count":0}]

Para que se impriman estas estadísticas por ejemplo en nuestro single.php de wordpress usamos lo siguiente:

Insertar CODE, HTML o PHP:
<?php
function getFacebookDetails($url){
$source_url = '.get_permalink()';
$rest_url = "http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=".get_permalink();
$json = json_decode(file_get_contents($rest_url),true);
return $json;
}
$data = getFacebookDetails("$source_url");
$shares = $data[0]['share_count'];
$comments = $data[0]['comment_count'];
$likes  = $data[0]['like_count'];
$total = $data[0]['total_count'];
echo "Compartidos: ".$shares;
echo "Me gusta: ".$likes;
echo "Comentarios: ".$comments;
echo "Total: ".$total;
?>

Les comparto el diseño de un botón para mostrar el total de interacciones en facebook, pueden hacer lo mismo con cualquiera de las cantidades antes mostradas.

Código php que puede ir en el single.php debajo de las entradas
PHP:
<?php
function getFacebookDetails($url){
$source_url = '.get_permalink()';
$rest_url = "http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=".get_permalink();
$json = json_decode(file_get_contents($rest_url),true);
return $json;
}
$data = getFacebookDetails("$source_url");
$total = $data[0]['total_count'];
echo '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'.$total. '</span> </div> </li> </ul></div> </div>' ; ?>


CSS
HTML:
.modulo_compartir{clear:both;padding:2px 0;float:none;width: 100px;}
.modulo_compartir ul{list-style:none;}
.modulo_compartir ul li{float:left;padding:0;background:none;}
.modulo_compartir button{border:none;margin:0;background-color:transparent;padding:0;border-radius:0;text-align:left;box-sizing:border-box;cursor:pointer;}
.modulo_compartir button::-moz-focus-inner {border: 0;padding: 0;}
.modulo_compartir button:focus{outline:none;}
.modulo_compartir .barra_servicios{}
.modulo_compartir .lista_servicios li{margin-left:5px;}
.modulo_compartir .boton_enviar{box-sizing:border-box;border-radius:3px;display:inline-block;height:29px;padding:2px;float:left;width:93px;
cursor:pointer; sans-serif;font-size:12px;line-height:25px;}
.modulo_compartir .boton_enviar{opacity:.76;}
.modulo_compartir .boton_enviar:hover{opacity:1;}
.modulo_compartir .boton_enviar:focus{outline:none;}
.modulo_compartir .servicio{display:inline-block;width:25px;height:25px;text-indent:-9999px;float:left;}
.modulo_compartir .servicio{background-image:url(http://www.subeimagenes.com/img/compartir-sprite-1528966.png);background-repeat:no-repeat;}
.modulo_compartir .contador{display:inline-block;float:right;text-align:right;padding:0 4px 0 2px;color:#fff;overflow:hidden;max-width:62px;overflow:hidden;}
.modulo_compartir .facebook .servicio{background-position:0 -25px;}
li.facebook .boton_enviar{background-color:#4862A3;}

Este es el diseño del botón:

Sin-t%25C3%25ADtulo-4.jpg

Se le puede añadir varias funciones como el compartir al dar click, etc.

Si te gustó el tutorial déjame un Me Agrada o un comentario, eso me ayudaria mucho y más adelante podría elaborar más ejemplos con los demás botones de redes sociales o diferentes diseños.
 
Última edición:
Muy buen tutorial, dime crees que podrá usarse en blogger.
 
Se agradece en español estoy no hay haha, yo lo vi en ingles ya hace unos años se agradece el aporte, a mi lo que me da curiosidad es como ordena jkanime justamente ese contador en el index :witless:
 
Se agradece en español estoy no hay haha, yo lo vi en ingles ya hace unos años se agradece el aporte, a mi lo que me da curiosidad es como ordena jkanime justamente ese contador en el index :witless:

Si se puede ordenar de mayor a menor cantidad de likes, haber si lo puedo publicar luego en este post 🙂
 
muy bueno , gracias 🙂
 
Excelente tutorial :encouragement:

Te recomiendo usar callback en la url para hacerlo todo del lado del cliente 😛7:😛8:

- - - Actualizado - - -

Muy buen tutorial, dime crees que podrá usarse en blogger.

En Blogger:

Arriba de </head>:
PHP:
<style type="text/css">
        .modulo_compartir{clear:both;padding:2px 0;float:none;width: 100px;}
        .modulo_compartir ul{list-style:none;}
        .modulo_compartir ul li{float:left;padding:0;background:none;}
        .modulo_compartir button{border:none;margin:0;background-color:transparent;padding:0;border-radius:0;text-align:left;box-sizing:border-box;cursor:pointer;}
        .modulo_compartir button::-moz-focus-inner {border: 0;padding: 0;}
        .modulo_compartir button:focus{outline:none;}
        .modulo_compartir .barra_servicios{}
        .modulo_compartir .lista_servicios li{margin-left:5px;}
        .modulo_compartir .boton_enviar{box-sizing:border-box;border-radius:3px;display:inline-block;height:29px;padding:2px;float:left;width:93px;
        cursor:pointer;font-family:'Roboto', sans-serif;font-size:12px;line-height:25px;}
        .modulo_compartir .boton_enviar{opacity:.76;}
        .modulo_compartir .boton_enviar:hover{opacity:1;}
        .modulo_compartir .boton_enviar:focus{outline:none;}
        .modulo_compartir .servicio{display:inline-block;width:25px;height:25px;text-indent:-9999px;float:left;}
        .modulo_compartir .servicio{background-image:url(http://www.subeimagenes.com/img/compartir-sprite-1528966.png);background-repeat:no-repeat;}
        .modulo_compartir .contador{display:inline-block;float:right;text-align:right;padding:0 4px 0 2px;color:#fff;overflow:hidden;max-width:62px;overflow:hidden;}
        .modulo_compartir .facebook .servicio{background-position:0 -25px;}
        li.facebook .boton_enviar{background-color:#4862A3;}
</style>
<script type="text/javascript">
	//<![CDATA[
    function boton_fb(json){
        document.write('<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span><span class="contador" id="fb_num_superior">'+json[0].total_count+'</span></div></li></ul></div></div>');
    }
	//]]>
</script>

Y donde quieras que aparezca el botón (en la plantilla):
PHP:
<b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='"http://api.facebook.com/restserver.php?format=json&amp;method=links.getStats&amp;callback=boton_fb&amp;urls="+data:post.url'></script></b:if>
 
Gracias [MENTION=81006]kanikase[/MENTION] por adecualro para blogger :encouragement:
 
Pues lo veo muy de gusto usar PHP para leer las stats, cuando con JS se puede obtener lo mismo... solo hay que usar:
PHP:
<div id="boton<?php the_ID(); ?>"></div>
<script>
function mostrarS<?php the_ID(); ?>(txt){
document.getElementById('boton<?php the_ID(); ?>').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script><script src="http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=<?php echo urlencode(get_permalink()); ?>&callback=mostrarS<?php the_ID(); ?>"></script>

Y listo sin tanto lio de PHP ni nada... y al hacer esto no cargamos el server con consultas externas...

Como hacer esto en blogger o para cualquier sitio (tambien WP)?? pues mas facil aun:
HTML:
<div id="boton"></div>
<script>
function mostrarS(txt){
document.getElementById('boton').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script>
<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 = "//api.facebook.com/restserver.php?format=json&method=links.getStats&urls=" + encodeURIComponent(document.location) + "&callback=mostrarS";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-code'));</script>
De esta forma no gastamos recursos de nuestro servidor... :encouragement:
Demo: http://www.cicklow.com/aaa.html
 
Está en la primera hoja así que el que lo necesite para blogger lo verá, déjalo ahí para que sepan que tú lo adaptaste 🙂

Mételo al post para borrar el comentario 😛8: es tu tutorial :sorrow:

- - - Actualizado - - -

Gracias [MENTION=9679]cicklow[/MENTION] :encouragement:

PHP:
<div id="boton<?php the_ID(); ?>"></div>
<script>
function mostrarS<?php the_ID(); ?>(txt){
document.getElementById('boton<?php the_ID(); ?>').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script><script src="http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=<?php echo urlencode(get_permalink()); ?>&callback=mostrarS<?php the_ID(); ?>"></script>

Y listo sin tanto lio de PHP ni nada... y al hacer esto no cargamos el server con consultas externas...

Como hacer esto en blogger o para cualquier sitio (tambien WP)?? pues mas facil aun:
HTML:
<div id="boton"></div>
<script>
function mostrarS(txt){
document.getElementById('boton').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script>
<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 = "//api.facebook.com/restserver.php?format=json&method=links.getStats&urls=" + encodeURIComponent(document.location) + "&callback=mostrarS";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-code'));</script>
De esta forma no gastamos recursos de nuestro servidor... :encouragement:
Demo: http://www.cicklow.com/aaa.html
 
Última edición:
[MENTION=33622]xxSakuraxx[/MENTION]

Gracias por el aporte, en la imagen tambien tienes los botones de Twitter y Google + puedes poner el codigo para implementarlo. O si puedes ayudarnos [MENTION=9679]cicklow[/MENTION] con el resto de botones para hacer los mismo con Twitter como con Google te lo agradeceria mucho.
 
Pues lo veo muy de gusto usar PHP para leer las stats, cuando con JS se puede obtener lo mismo... solo hay que usar:
PHP:
<div id="boton<?php the_ID(); ?>"></div>
<script>
function mostrarS<?php the_ID(); ?>(txt){
document.getElementById('boton<?php the_ID(); ?>').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script><script src="http://api.facebook.com/restserver.php?format=json&method=links.getStats&urls=<?php echo urlencode(get_permalink()); ?>&callback=mostrarS<?php the_ID(); ?>"></script>

Y listo sin tanto lio de PHP ni nada... y al hacer esto no cargamos el server con consultas externas...

Como hacer esto en blogger o para cualquier sitio (tambien WP)?? pues mas facil aun:
HTML:
<div id="boton"></div>
<script>
function mostrarS(txt){
document.getElementById('boton').innerHTML = '<div class="modulo_compartir estirar"><div class="barra_servicios estirar"><ul class="lista_servicios estirar"><li class="facebook"><div class="boton_enviar estirar" id="superior_fb"><span class="servicio">Recomendar en Facebook</span>  <span class="contador" id="fb_num_superior">'+txt[0].total_count+'</span> </div> </li> </ul></div> </div>';
}
</script>
<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 = "//api.facebook.com/restserver.php?format=json&method=links.getStats&urls=" + encodeURIComponent(document.location) + "&callback=mostrarS";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-code'));</script>
De esta forma no gastamos recursos de nuestro servidor... :encouragement:
Demo: http://www.cicklow.com/aaa.html

Gracias [MENTION=9679]cicklow[/MENTION] por pasarlo a JS :encouragement:

[MENTION=33622]xxSakuraxx[/MENTION] Gracias :encouragement:, una consulta: ¿Tienes el codigo de los otros botones que muestras en el inicio (Twitter, Linkedin, G+)?
 
Lo estaré adaptando en esta semana con el css correspondiente y lo pondré en el tutorial 🙂

Gracias [MENTION=9679]cicklow[/MENTION] por pasarlo a JS :encouragement:

[MENTION=33622]xxSakuraxx[/MENTION] Gracias :encouragement:, una consulta: ¿Tienes el codigo de los otros botones que muestras en el inicio (Twitter, Linkedin, G+)?
 
Díganme qué redes sociales quieren usar a parte de facebook?
 
Muy util

Muchas gracias, me sirvió de mucho. Ya lo agregue a mi sitio web. 😉
 
Muy buen tutorial, tienes buen seo busque por el titulo de la imagen y ya encontré tu sitio, lo estoy ojeando ejjeje.
 
probaré a ver que tal me resulta.
gracias
 
Atrás
Arriba