En 2011 WordPress.com implementó una nueva herramienta para seguir/ser-seguido llamada “Follow Button”. Hace unos días (mas de lo que ella quisiera) una amiga me escribió que quería el botón de “Seguir” de wordpress en su blog, y claro, que no quería migrar todo a WordPress.com, y no encontré un plugin que hiciera exactamente esto.

Entonces encontré el artículo de Frederick Giasson llamado WordPress’s Follow Button for Non-WordPress.com Users y lo apliqué en mi blog antes de pasar la información a mi amiga.

El post de Frederick hace dos “mejoras” en el concepto que yo he omitido:

1. Cambió el icono de “+” por un asterisco naranja.
2. Añadió un enlace a sus feed RSS.

Para Frederick, “Follow” no se trata sólo de correos electrónicos, también se trata de medios de otros médios de sindicación.

Por último, no quería cortar cualquier parte de código en WordPress ni en ningún otro plugin de WordPress. Lo único que vamos a modificar es el tema, agregando un poco de código para ello. La implementación actual se podría mejorar mediante la actualización Subscriber2 por ejemplo, pero yo no quería que la gente tuviese que hacer esto para crear el botón “Seguir” en su blog.

Paso # 1: Instalación de Subscribe2

Lo primero es lo primero.

La primera cosa que tienes que hacer es instalar el plugin de WordPress que permitirá a los usuarios suscribirse y gestionar sus suscripciones a tu blog a través de mensajes de correo electrónico. Utilizaremos el plugin Subscribe2 para WordPress que ofrece estas características a la instancia de WordPress.

Para instalar este plugin WordPress utilizando el modo automático “del sistema de instalación del complemento, siga estas instrucciones. Lea las instrucciones de instalación del plugin si desea hacerlo de esta manera el manual:

1. Accede a tu blog de WordPress y visita Plugins-> Agregar nuevo.
2. Busca Subscribe2, haga clic en “Instalar Ahora” y luego activa el plugin
3. Haga click en el enlace “Configuración” del menú de administración, y selecciona “Subscribe2″
4. Configura las opciones al gusto, incluida la plantilla de correo electrónico y cualquier categorías que deben ser excluidos de la notificación
5. Has click en “Herramientas” en el menú de administración, y selecciona “Suscriptores”
6. Puedes suscribir manualmente a gente que ya tengas o como mejor te parezca
7. Crea una página de WordPress nueva para mostrar el formulario de suscripción.
8. Al crear la página, puedes hacer click en la “S2″ en la barra encima del editor de textos para insertar automáticamente la señal subscribe2. O, si lo prefieres, puedes introducir manualmente el shortcode subscribe2 o ficha: [ subscribe2 ] o el HTML invisible
9. Asegúrese de que el formulario está en una línea por sí mismo y que tiene una línea en blanco arriba y otra abajo. Este código será automáticamente reemplazado por la información de suscripción dinámica y mostrará todos los formularios y mensajes como sean necesarios
10. En el área “Configuración” de Subscribe2 selecciona el nombre de página que acabamos de crear en el paso anterior en “apariencia”

Seguimiento.

Una vez que hayas terminado de instalar el plugin, puedes comprobar que todo está funcionando visitando la página que creamos en el paso 7 escribiendo tu propio correo electrónico (uno que no esté conectado a cualquier usuario de esa cuenta preferiblemente) y luego verificando en tu bandeja de entrada si usted recibe una notificación de suscripción.

Para probar esta página tienes que estar deslogueado. Sino veras una confirmación de que ya estás registrado.

Paso # 2:

Personaliza tu página

El siguiente paso es opcional. Como el formulario generado por el plugin Subscribe2 es realmente minimalista, es posible que desee personalizarlo un poco, para cambiar su diseño y añadir un poco de explicación en la página, para ayudar a los lectores a entender lo que está pasando. Puedes ver mi página de registro como ejemplo.

Paso # 3:

Agregue el código del botón Seguir en que el tema

El tercer paso es realmente lo que transformará el plugin Subscribe2 en el botón Seguir. Lo que estamos haciendo aquí, es sólo para agregar el código, en el tema, para mostrar el botón Seguir.
Lo primero que tienes que hacer, es localizar en el pie de página de las páginas se generan en el tema.
Abre la carpeta del tema de tu blog:

• Via FTP: /../wordpress/wp-content/themes/mitema/footer.php.
• Via Tema: Apariencia > Editor > footer.php

Verifica que esta etiqueta está al final del código. Sino entonces búscala por los archivos del tema por que el código del botón viene justo antes de esto.
Una vez que hayas encontrado la etiqueta podemos pasar a los siguientes pasos.

Nota importante: Si el tema de tu blog no incluye automáticamente jQuery entonces tienes que incluir este código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

justo antes de la etiqueta < /head> que en la mayoría de los casos está en header.php.

Si no tienes jQuery cargado, un error de JavaScript será devuelto, y el panel “congelación” de la página web.

Lo único que tienes que hacer es copiar/pegar el código encima de la etiqueta < /​​body> del footer.php y hacer un par de ajustes para que funcione con tu blog.

1. En la línea #3, sustituir [[ruta-al-icono]] con la ruta del icono wordpress-plus.png. Puedes descargar el icono y el código wordpress-follow.zip para usarlo en tu blog.
2. En la línea #9, sustituir [[ruta-a-su-SEGUIMIENTO DE PÁGINA DE WORDPRESS]] por la URL de la página de Seguimiento (la que creaste cuando instalaste Subscribe2)

<?php $useragent= $_SERVER['HTTP_USER_AGENT'];if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){?><style>
#bit, #bit *{*zoom:1;} #bit { bottom: -300px; font: 13px "Helvetica Neue",sans-serif; position: fixed; right: 10px; z-index: 999999; } .loggedout-follow-shelf{position:fixed;right:40%;z-index:999999;bottom:-300px;}.loggedout-follow-normal{position:fixed;z-index:999999;bottom:-300px;right:10px;}.loggedout-follow-typekit{margin-right:4.5em;position:fixed;z-index:999999;bottom:-300px;right:10px;}#bit a.bsub{display:block;overflow:hidden;padding:0 10px 0 8px;float:right;text-decoration:none !important;line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;text-shadow:#444 0px -1px 0px;letter-spacing:normal;border:0;background-color:#464646;background-image:-ms-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-moz-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:-o-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));background-image:-webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:linear-gradient(bottom, #464646, #3f3f3f 5px);-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);outline-style:none;outline-width:0;}#bit a.bsub{-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;border-radius:2px 2px0 0 0;} #bit a:hover span, #bit a.bsub.open span{color:#ffffff !important;}#bit a.bsub.open{background:#333;}#bitsubscribe{background:#464646;color:#fff;padding:15px;width:200px;margin-top:27px;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-o-border-radius:2px 0 0 0;-ms-border-radius:2px 0 0 0;border-radius:2px 0 0 0;*float:right;*margin-right:-68px;}div#bitsubscribe.open{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);-o-box-shadow:0 0 8px rgba(0,0,0,0.5);-ms-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);}#bitsubscribe div{overflow:hidden;}#bit h3, #bit #bitsubscribe h3, #bitsubscribe h3 label{margin:0 0 .5em 0 !important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;font-size:28px;color:#fff;text-align:left;}#bit #bitsubscribe p{margin:0 0 1em 0;*margin:0;font:15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;color:#fff;}#bitsubscribe p a{margin:20px 0 0;color:#fff;text-decoration:underline;}#bit #bitsubscribe p.bit-follow-count{font-size:13px;} #bit #bitsubscribe p#bsub-subscribe-button, form#loggedout-follow {margin: 0;}#bitsubscribe input[type=submit]{padding:2px 20px;background:#333;background:-moz-linear-gradient(top, #333 0%, #111 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111));background:-webkit-linear-gradient(top, #333 0%,#111 100%);background:-o-linear-gradient(top, #333 0%,#111 100%);background:-ms-linear-gradient(top, #333 0%,#111 100%);background:linear-gradient(top, #333 0%,#111 100%);color:#ccc;text-shadow:0 1px 0 #000;border:1px solid #282828;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-shadow:inset 0 1px 0 #444;-webkit-box-shadow:inset 0 1px 0 #444;box-shadow:inset 0 1px 0 #444;text-decoration:none;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;*margin:1em 0 1em 0;} #bitsubscribe input[type=submit]:hover{background:#222;background:-moz-linear-gradient(top, #333 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222));background:-webkit-linear-gradient(top, #333 0%,#222 100%);background:-o-linear-gradient(top, #333 0%,#222 100%);background:-ms-linear-gradient(top, #333 0%,#222 100%);background:linear-gradient(top, #333 0%,#222 100%);color:#fff;-moz-box-shadow:inset 0 1px 0 #4f4f4f;-webkit-box-shadow:inset 0 1px 0 #4f4f4f;box-shadow:inset 0 1px 0 #4f4f4f;text-decoration:none;}#bitsubscribe input[type=submit]:active{background:#111;background:-moz-linear-gradient(top, #111 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222));background:-webkit-linear-gradient(top, #111 0%,#222 100%);background:-o-linear-gradient(top, #111 0%,#222 100%);background:-ms-linear-gradient(top, #111 0%,#222 100%);background:linear-gradient(top, #111 0%,#222 100%);color:#aaa;-moz-box-shadow:inset 0 -1px 0 #333;-webkit-box-shadow:inset 0 -1px 0 #333;box-shadow:inset 0 -1px 0 #333;text-decoration:none;}#bitsubscribe input[type=text]{-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;}#bitsubscribe input[type=text]:focus{border:1px solid #000;}#bitsubscribe.open{display:block;}#bsub-subscribe-button{text-align:center;margin:0 auto;} #bsub-subscribe-button input {margin: 0; } #bitsubscribe #lof-readerpromo p{color:#ccc;}#bitsubscribe #lof-followpublicize{border-top:1px solid #3c3c3c;margin-bottom:.5em;}#bitsubscribe #lof-followpublicize h3{font-size:13px;padding-top:1em;margin-bottom:1em !important;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter, #bitsubscribe #lof-followpublicize p.lof-followpublicize-facebook{background:#555;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #333;-webkit-box-shadow:inset 0 1px 1px #333;-o-box-shadow:inset 0 1px 1px #333;-ms-box-shadow:inset 0 1px 1px #333;box-shadow:inset 0 1px 1px #333;margin-bottom:.5em;overflow:hidden;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter{padding:10px 10px 5px;}#bitsubscribe #bsub-credit{text-align:center;font:normal 11px "Helvetica Neue", sans-serif;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c;}#bitsubscribe #bsub-credit a{color:#aaa;text-shadow:0 1px 0 #262626;background:none;text-decoration:none;}#bitsubscribe #bsub-credit a:hover{color:#fff;background:none;}
#bit a.bsub span{background:url('wordpress-plus.png') 0 1px no-repeat;padding-left:18px;}
</style>
<script type="text/javascript" charset="utf-8">jQuery.extend(jQuery.easing,{easeOutCubic:function(x, t, b, c, d){return c * ((t = t / d - 1) * t * t + 1) + b;}});jQuery(document).ready(function(){var isopen = false,bitHeight=jQuery('#bitsubscribe').height(); setTimeout(function(){jQuery('#bit').animate({bottom: '-' + bitHeight - 30 + 'px' }, 200); }, 300); jQuery('#bit a.bsub').click(function(){if(!isopen){isopen = true; jQuery('#bit a.bsub').addClass('open');jQuery('#bit #bitsubscribe').addClass('open'); jQuery('#bit').stop(); jQuery('#bit').animate({ bottom:'0px'},{duration: 400,easing:"easeOutCubic"});}else{isopen=false;jQuery('#bit').stop(); jQuery('#bit').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200,function(){jQuery('#bit a.bsub').removeClass('open');jQuery('#bit #bitsubscribe').removeClass('open');});}});});</script>
<div id="bit" class=""><a class="bsub" href="javascript:void(0)">
<span id='bsub-text'>Sigueme</span></a>
<div id="bitsubscribe"><h3><label for="loggedout-follow-field">Siguenos!</label></h3>
<form action="[[A-TU-PAGINA-DE-WORDPRESS]]" method="post" accept-charset="utf-8" id="loggedout-follow">
<p>Recibe cada artículo nuevo de este blog en tu correo.</p>
<p class="bit-follow-count">Únete a otros <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> seguidores:</p><p><input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Escribe tu email" onfocus='this.value=(this.value=="Escribe tu email") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Escribe tu email" : this.value;' id="loggedout-follow-field"/></p><input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
<p id='bsub-subscribe-button'> <input type="submit" name="subscribe" value="Anotame!" /></p></form></div></div>
<?php } ?>

Desactivar para dispositivos móviles

Las primeras y la última línea del código detectan si el usuario está viendo la página desde un dispositivo móvil.
Algunos dispositivos móviles pueden tener problemas de mostrar esta ventana flotante. A veces, la ventana puede ser flotante en el centro de la pantalla del dispositivo sin devolverse a la parte inferior de la página. Por esta razón, es posible que quieras desactivar (o eliminar) esta opción si el usuario está utilizando un dispositivo móvil para leer tu blog. Puedes desactivarlo si el servidor web detecta que un móvil está solicitando la página web mediante con estos dos bloques de código.

Paso # 5:

Pruebalo!

Si estas leyendo este paso significa que ya terminaste tu propio botón Seguir!

¡Felicitaciones!

Pero lo último que queda por hacer, es probarlo. Una vez que hayas guardado el archivo con el código anterior, sólo actualiza cualquier página de tu blog. Deberías ver que aparece el botón Seguir en la esquina inferior derecha de tu blog. Si haces click en él, deberías ver el formulario de suscripción para tus lectores al sistema. Si agregas uno de tus correos electrónicos, y haces click en el botón de suscripción, debes redirigirte a la página de seguimiento. Por último, deberías recibir un email de confirmación que te pedirá que confirmes tu suscripción haciendo click en un enlace.
Si todos estos pasos funcionan correctamente significa que has terminado y estas listo para proporcionarle esta nueva funcionalidad a los lectores de tu blog!

Conclusión

Si tienes alguna pregunta acerca de este hack, no dudes en preguntar aquí, en la sección de comentarios de este post. Estaré encantado de responder a todas ellas.
Feliz Hackeo!

Recursos

Puedes descargar el wordpress-follow.zip para tener el icono de “+” y un ejemplo del footer.php.

Abajo esta el detalle de cada uno de los pedazos de código para los que quieran modificar mas a fondo esta funcionalidad.

<?php $useragent= $_SERVER['HTTP_USER_AGENT'];if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){?>

 #bit, #bit *{*zoom:1;} #bit { bottom: -300px; font: 13px "Helvetica Neue",sans-serif; position: fixed; right: 10px; z-index: 999999; } .loggedout-follow-shelf{position:fixed;right:40%;z-index:999999;bottom:-300px;}.loggedout-follow-normal{position:fixed;z-index:999999;bottom:-300px;right:10px;}.loggedout-follow-typekit{margin-right:4.5em;position:fixed;z-index:999999;bottom:-300px;right:10px;}#bit a.bsub{display:block;overflow:hidden;padding:0 10px 0 8px;float:right;text-decoration:none !important;line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;text-shadow:#444 0px -1px 0px;letter-spacing:normal;border:0;background-color:#464646;background-image:-ms-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-moz-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:-o-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));background-image:-webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:linear-gradient(bottom, #464646, #3f3f3f 5px);-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);outline-style:none;outline-width:0;}#bit a.bsub{-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;border-radius:2px 2px0 0 0;} #bit a:hover span, #bit a.bsub.open span{color:#ffffff !important;}#bit a.bsub.open{background:#333;}#bitsubscribe{background:#464646;color:#fff;padding:15px;width:200px;margin-top:27px;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-o-border-radius:2px 0 0 0;-ms-border-radius:2px 0 0 0;border-radius:2px 0 0 0;*float:right;*margin-right:-68px;}div#bitsubscribe.open{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);-o-box-shadow:0 0 8px rgba(0,0,0,0.5);-ms-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);}#bitsubscribe div{overflow:hidden;}#bit h3, #bit #bitsubscribe h3, #bitsubscribe h3 label{margin:0 0 .5em 0 !important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;font-size:28px;color:#fff;text-align:left;}#bit #bitsubscribe p{margin:0 0 1em 0;*margin:0;font:15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;color:#fff;}#bitsubscribe p a{margin:20px 0 0;color:#fff;text-decoration:underline;}#bit #bitsubscribe p.bit-follow-count{font-size:13px;} #bit #bitsubscribe p#bsub-subscribe-button, form#loggedout-follow {margin: 0;}#bitsubscribe input[type=submit]{padding:2px 20px;background:#333;background:-moz-linear-gradient(top, #333 0%, #111 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111));background:-webkit-linear-gradient(top, #333 0%,#111 100%);background:-o-linear-gradient(top, #333 0%,#111 100%);background:-ms-linear-gradient(top, #333 0%,#111 100%);background:linear-gradient(top, #333 0%,#111 100%);color:#ccc;text-shadow:0 1px 0 #000;border:1px solid #282828;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-shadow:inset 0 1px 0 #444;-webkit-box-shadow:inset 0 1px 0 #444;box-shadow:inset 0 1px 0 #444;text-decoration:none;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;*margin:1em 0 1em 0;} #bitsubscribe input[type=submit]:hover{background:#222;background:-moz-linear-gradient(top, #333 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222));background:-webkit-linear-gradient(top, #333 0%,#222 100%);background:-o-linear-gradient(top, #333 0%,#222 100%);background:-ms-linear-gradient(top, #333 0%,#222 100%);background:linear-gradient(top, #333 0%,#222 100%);color:#fff;-moz-box-shadow:inset 0 1px 0 #4f4f4f;-webkit-box-shadow:inset 0 1px 0 #4f4f4f;box-shadow:inset 0 1px 0 #4f4f4f;text-decoration:none;}#bitsubscribe input[type=submit]:active{background:#111;background:-moz-linear-gradient(top, #111 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222));background:-webkit-linear-gradient(top, #111 0%,#222 100%);background:-o-linear-gradient(top, #111 0%,#222 100%);background:-ms-linear-gradient(top, #111 0%,#222 100%);background:linear-gradient(top, #111 0%,#222 100%);color:#aaa;-moz-box-shadow:inset 0 -1px 0 #333;-webkit-box-shadow:inset 0 -1px 0 #333;box-shadow:inset 0 -1px 0 #333;text-decoration:none;}#bitsubscribe input[type=text]{-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;}#bitsubscribe input[type=text]:focus{border:1px solid #000;}#bitsubscribe.open{display:block;}#bsub-subscribe-button{text-align:center;margin:0 auto;} #bsub-subscribe-button input {margin: 0; } #bitsubscribe #lof-readerpromo p{color:#ccc;}#bitsubscribe #lof-followpublicize{border-top:1px solid #3c3c3c;margin-bottom:.5em;}#bitsubscribe #lof-followpublicize h3{font-size:13px;padding-top:1em;margin-bottom:1em !important;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter, #bitsubscribe #lof-followpublicize p.lof-followpublicize-facebook{background:#555;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #333;-webkit-box-shadow:inset 0 1px 1px #333;-o-box-shadow:inset 0 1px 1px #333;-ms-box-shadow:inset 0 1px 1px #333;box-shadow:inset 0 1px 1px #333;margin-bottom:.5em;overflow:hidden;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter{padding:10px 10px 5px;}#bitsubscribe #bsub-credit{text-align:center;font:normal 11px "Helvetica Neue", sans-serif;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c;}#bitsubscribe #bsub-credit a{color:#aaa;text-shadow:0 1px 0 #262626;background:none;text-decoration:none;}#bitsubscribe #bsub-credit a:hover{color:#fff;background:none;}
#bit a.bsub span{background:url('wordpress-plus.png') 0 1px no-repeat;padding-left:18px;}

<script>
jQuery.extend(jQuery.easing, { easeOutCubic: function (x, t, b, c, d) { return c * ((t = t / d - 1) * t * t + 1) + b; } });
		jQuery(function () {
		 	var isopen = false, bitHeight = $('#bitsubscribe').height();
		 	setTimeout(function () { $('#bit').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200);}, 300);
		$('#bit a.bsub').click(function () {
		 	if (!isopen) {
		 		isopen = true;
		 		$('#bit a.bsub').addClass('open');
		 		$('#bit #bitsubscribe').addClass('open')
		 		$('#bit').stop();
		 		$('#bit').animate({ bottom: '0px' }, { duration: 400, easing: "easeOutCubic" });
		 	} else {
		 		isopen = false;
		 		$('#bit').stop();
		 		$('#bit').animate({ bottom: '-' + bitHeight - 30 + 'px'}, 200, function () {
					$('#bit a.bsub').removeClass('open');
		 			$('#bit #bitsubscribe').removeClass('open'); });
		 		}
		 	});
		});
</script>

<div id="bit" class="">
		<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Sigueme</span></a>
		
		<div id="bitsubscribe">
			<h3><label for="loggedout-follow-field">Siguenos!</label></h3>
			<form action="[[A-TU-PAGINA-DE-WORDPRESS]]" method="post" accept-charset="utf-8" id="loggedout-follow">
				<p>Recibe cada artículo nuevo de este blog en tu correo.</p>
				<p class="bit-follow-count">Únete a otros <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> seguidores:</p>
				<p><input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Escribe tu email" onfocus='this.value=(this.value=="Escribe tu email") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Escribe tu email" : this.value;' id="loggedout-follow-field"/></p>
				<input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
				<p id='bsub-subscribe-button'> <input type="submit" name="subscribe" value="Anotame!" /></p>
			</form>	
		</div>
		
	</div>

<?php } ?>

Creditos

Este artículo fue traducido y parafraseado de este:
http://fgiasson.com/blog/index.php/2011/10/02/wordpresss-follow-button-for-non-wordpress-com-users/