TNW Social Count para WordPress

TNW Social Count es un plugin de WordPress para compartir tus artículos en diversas redes sociales.

Social Count banner

Vale pero, ¿qué tiene de especial?

La mayoría de blogs y páginas web utilizan botones de Facebook, Twitter, etc. para facilitar a los lectores compartir el contenido a traves de las redes sociales. El problema con la implementación por defecto de dichos botones es que requieren incluir pesados archivos Javascript a tu página, lo que puede hacer que tu sitio sea mucho más lento si no eres cuidadoso con la implementación. Por si fuera poco, (y esto es una opinión personal), todos estos botones crean demasiado ruido en el diseño de la web y resultan poco agradables visualmente.

En mi trabajo para The Next Web, una de nuestras mayores prioridades es que la web cargue lo más rapido posible. Tras realizar múltiples mejoras para acelerar la velocidad de carga de la página, decidimos eliminar todos los botones sociales por defecto y crear nuestra propia implementación. Puedes verla en acción en cualquier artículo en TNW.

El feedback que recibimos fue bastante positivo, e incluso algunos sitios se inspiraron en la idea y realizaron sus propias implementaciones. Por eso he decidido abrir el código y crear un plugin de WordPress para que otros sitios puedan utilizar la misma solución.

¿Cómo funciona?

El plugin esta formado por dos partes independientes:

- El proceso que obtiene, a traves de las (más o menos soportadas) APIs de Twitter, Facebook, LinkedIn y Google+, el número de veces que cada artículo ha sido compartido en cada uno de estos servicios. Este número es guardado como post_meta en la base de datos.

- El botón que usa la información del post_meta para mostrar el total de veces que el artículo se ha compartido, y incluye un popup con botones para compartir en Twitter, Facebook, LinkedIn, Google+, StumbleUpon, Reddit, Digg, HackerNews, Instapaper y ReadItLater. Estos botones están implementados en puro html, por lo que no es necesario cargar ningun archivo de Javascript externo que pueda relentizar tu sitio.

Instalarlo es fácil

Una vez activado el plugin, puedes activar la frecuencia de actualización desde el menú de adminstración de WordPress.

Para mostrar el botón en el frontend, tienes que incluir el siguiente código en el archivo de tu tema dónde quieras mostrarlo.

if(function_exists('render_tnwsc_button')) {
    echo render_tnwsc_button();
}

Descarga el plugin en GitHub, instálalo en tu sitio y cuéntame qué te parece. Ten en cuenta que aún lo estoy probando, por lo que puede tener algún bug. Si encuentras algún problema, deja un comentario o mejor aún, hazle un fork y ayudame a mejorarlo! ;)

Lee ahora: 8 comandos útiles para GIT »

  • http://michaeljbarber.com Michael Barber

    Thanks for releasing this, Pablo. It is pretty stellar and I can already see speed improvements from my previous share buttons/plugins. One minor bug is I noticed it doesn’t have the previous number of Shares indicated. Do you just have to wait for the auto-sync to occur?

    Also, do you have any plans to release your WordPress theme? i love its simplicity.

    Thanks,
    Michael

    • Pablo Román

      Hey Michael,

      I’ve just released a new version of the plugin, including the option to update the social count of all the posts at once. Please check out the changes on GitHub.

      Thanks for the comment regarding the theme. I don’t think I’ll release it in the short term, but I’d love to open-source it in the future, when I get the time.

  • http://www.sowediscover.nl Ramon van Biljouw

    First of all: I love this sharing tool. Simple, but elegant, in design. I’m an amateur regarding php and css code, so please bare with me. I have a question an I hope you are willing to answer it. I have the plugin installed on my WordPress website, and now I want to have it on one line with a next/previous post buttons, but I don’t know how to. The share button always adds a line break. Could you help me out? I hope so, if not; well you can’t blame me for not trying.
    An example can be seen on: http://www.sowediscover.nl/2011/06/23/meeting-the-greeter/

    Regards, Ramon

    • Pablo Román

      Hey Ramon, thanks for the kind words.

      You can try floating the share widget the to the right with:

      .toolbar-social { float: right; }

      Let me know if it works, cheers!

      • Ramon van Biljouw

        Hey, Pablo, wow that did the trick. Thank you so much for your quick response and help. Regards, Ramon

  • Phil

    Hi Pablo,

    Love this plugin, it’s so much cleaner than having all the extra buttons (and their scripts too)

    I’ve made a few modifications to the class names so that the plugin works with Twitter’s Bootstrap, which works fine on its own (http://four-drops.net/wptest/) but when I use exactly the same plugin files on a template (http://www.four-drops.net/wp/) it doesn’t work – any ideas how to stop this issue / what might be interfering with it?

    Thanks, and keep up the great work!

    Phil

    • Pablo Román

      Hi Phil,

      Looks like you forgot to include the css for the button in your second example. Hope that it helps, and I’m glad you like the plugin. Cheers!

      • Phil

        Ahhhhhhh I feel silly having missed that out – thank you for your help, and keep up the great work :)

  • Ramon van Biljouw

    Hey Pablo, can you help me out once more… Thanks to you I have the sharing tool working on my WP site. I’ve managed to change the lay-out, although not perfectly, of the sharing button but now the counter is not aligned with the button (somewhat higher). I’ve tried several modifications in the CSS (and reversed it afterwards) but without success. In case there is a simple solution can you help me out. Thank you in advance.

    Ramon

  • http://theinvisibleoffice.com/ Erica

    Hey Pablo,

    I love your plugin. My site was clogged up with buttons before. So I installed it. It’s showing up above my posts where I wanted it. But the share buttons don’t appear.

    I’m sure I missed a step but I can’t figure out where. Do you see anything I’ve done?

    Thanks

    • http://inamus.com EG

      Hi, i have a problem similar to Ericas. When i added the code to the webpage, the button is showed, however no social sharing buttons pop-up. The webpage with the error: http://start.inamus.com

      Thanks!

  • http://www.bitscatalans.com Jordi Serra

    Genial el plugin, lo estoy probando, solo tengo un problema. Cuando sincronizo los posts anteriores via plugin de WordPress, se bloquea, al cabo de un minuto me dice:

    Fatal error: Maximum execution time of 10 seconds exceeded

    A su vez, he instalado en otro blog, me ha hecho correctametne la sincronización, en canvio, no me muestra correctamente el número total.

    En canvio, en el log me pone:
    http://estol.cat/ens-iniciem-a-pinterest/ / facebook (6) / twitter (4) / linkedin (0) / google (1)

    Pero el botón me sale a 0.

    Gracias de antemano.

  • http://www.techispeaks.com Kathirason Asokan

    awesome plugin.. definitely i will be using in any of my projets

  • Juan

    Genial plugin! Justo hoy paseando por TNW he pensado, ¿cómo habrán hecho esto? Y el bendito Google me ha llevado hasta tu GitHub :) Espero poder probarlo en próximos proyectos, enhorabuena por tu curro!

    • Pablo Román

      Gracias Juan! Espero tener tiempo de actualizar el plugin, ahora mismo en TNW está un poco diferente de la versión en GitHub. Saludos!

      • Francisco Delgado

        Había empezado a programar un plugin así, ¡hasta que me di cuenta que esto ya lo hacía! Lástima que no consigo hacerlo funcionar, no se si tengo que meter add_post_meta en código o qué, aunque dudo que tenga que tocar código. Debería funcionar tal como está, ¿no? He probado a hacer el sync now, pero se bloquea al cabo de un par de minutos. Sin embargo, el log parece correcto. Además, parece que hay un problema de estilos, porque los botones salen mal. ¿Algo que haya olvidado en la instalación? Simplemente activé el plugin y coloqué el código. Desde ya, muchas gracias!

      • Dzul

        Do u know how TNW makes the sharing bar floating at the top while we reading the post?

  • http://www.amitpatil.me Amit

    How can i use this plugin with genesis framework ?

  • Jens

    Hello!
    I wanted to ask you if you will update this plugin to the current version seen at The Next Web, with the jQuery function making the share count go from 0 and up?

    Or is it possible to implement this to the current version of the Git Hub plugin?

    My best regards!
    // Jens.

  • http://techpp.com Raju

    Really waiting for an update. If not the jQuery based implementation, at least a fix for some bugs (like Sync breaking down after some posts).

  • Alyen

    Muy bueno el plugin, muchas gracias !!!!!

  • Capitan Supositorio

    Estoy pensando instalarlo, queria preguntarte, como puedo poner la cantidad de shares en el post

    en el inicio http://www.cuchabamba.com.ar como tiene readwrite.com ese cuadrado amarillo.