
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.
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:
Nos mostrará sus estadísticas
Para que se impriman estas estadísticas por ejemplo en nuestro single.php de wordpress usamos lo siguiente:
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
CSS
Este es el diseño del botón:
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.

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:

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: